Template Studio Sidebar

Template Studio Sidebar shows Wizard, Panels & Flyouts in the upper section and Toolbox in the lower section. Wizard tab shows a list of pages that can be shown at runtime when you open the item. In Aras ProAppDesigner you can create single page or multi page applications. When you create only one page, at runtime when the page is shown in the Wizard, it shows item’s keyed name as page title. In case of multipage application, all the pages are shown in the Navigation bar with their page titles.

Panels tab shows list of panels that can be used while adding panel control in any group control on the page. Panel looks like a page in all aspects, and it can be created just like a page with only exception that it can be used under a group control in the page to create complex layouts. Same panel can be used on many pages, for showing same header and footer across all pages of the Wizard.

Flyouts tab shows a list of flyouts that can be used at many places in the Wizard by associating them to click handlers of various controls like buttons and toolbar commands. Flyout looks like a page in all aspects, and it can be created just like a page with only exception that it can be shown as a popup with submit, cancel and reset buttons.

You can create new page by clicking on ‘Add Page’ button in the sidebar. You can drag-drop pages to reorder created pages. Each page on the right side is shown with actions in the top-right corner with settings and delete icon.

• Name: It is used to uniquely identify page inside the wizard.
• Label: It is used to show title on the page. It can be localized by defined Languages and Locales inside innovator. Label also allows you to set the icon for the page.
• Access: It allows you to define roles which can access or edit the page. Roles (group or alias identities) can be at Show and Edit level. When page is hidden because you do not have defined role, properties used inside this page are not even fetched from server.
• Read Only: Based on the option selected for Read Only, whole page can become read-only even if you can edit the properties used inside the page with lock. You can select one of the options like ‘Yes’, ‘No’, ‘Expression’, or ‘Script’. Expression allows you to define a Boolean expression using properties from the current and previous pages (in case of multi-page application) to conditionally make the page read-only if expression is evaluated to true. Expression will be evaluated based on the cached property values on the client. Script allows you to write custom JavaScript code that should return Boolean value. If the returned value is true, the whole page will be read-only.
• Display Condition: Based on the option selected for Display Condition, the page will be shown or hidden from the wizard at runtime. You can select one of the options like ‘Always Show’, ‘Always Hide’, ‘Expression’, or ‘Script’. Expression allows you to define a Boolean expression using properties from the current and previous pages (in case of multi-page application) to conditionally display the page if expression is evaluated to true. Expression will be evaluated based on the cached property values on the client. Script allows you to write custom JavaScript code that should return Boolean value. If returned value is false, whole page will be hidden.
• Save On Navigate: If this option is selected as Yes, all updates made so far are saved to server when you navigate away from the page.
• OnLoad: OnLoad event allows you to show custom UI in the page if the page has HTML or Frame controls. Please refer to the Template Customization section for more details.

Panels can be created or managed in the same way as wizard pages. Panel can be placed just like any other control under the group through panel control available in the Toolbox. Panel can also be used as a tab inside Tab control.

Flyouts can be created or managed in the same way as wizard pages. The difference is, flyout can be shown as a popup at runtime based on the button click event. In order to show flyout as a popup, you need to place a button on the page and associate its OnClick handler with the flyout. Flyout has one additional setting to set the Flyout Width in percentage with respect to the page width.

• OnSubmit: OnSubmit event allows you to write custom logic that will be executed when the page is submitted. It can be mainly used if the dialog has any custom UI and if you want to save the changes to page or any external system. Please refer to the Template Customization section for more details.

At runtime, flyout is shown as popup, it shows Reset, Ok and Cancel buttons at the bottom. Reset button will reset all values to their original values if you made any changes, Ok button will commit the changes to the client cache and Cancel button will close the flyout without committing the change to the cache.