1 Context

2 Result

3 Step by step guide

3.1 Create the following three screens:

1. 👋 "ItemOverview<_yourName>" and use the template "TrainingDay5_Template"-
1. Copy the "ItemGrid" and "ItemForm" and name them "...<_yourName>"-
2. Replace the placeholder objects with the DSO, Grid and Form
2. 👋 "CustomerOverview <_yourName>" and use the template "TrainingDay5_Template"
1. Copy the "CustomerGrid" and "CustomerForm" and name them "...<_yourName>"
2. Replace the placeholder objects with the DSO, Grid and Form
3. 👋 "PanelSwitcher <_yourName>"
1. Put in the “SimpleSwatPanelSwitcher” on panel “A” and select “Save”
4. 👋 Select the “SimpleSwatPanelSwitcher” in the "Preview" section and search for the attribute “viewName” in the “Attributes” section,
5. 👋 Insert the name of the default screen, which should be displayed by launching the screen. In our case is “CustomerOverview<_yourName>” screen and select “Save”
6. 👋 Select the screen and search in the “Attributes” section for the following attributes and populate them (do not forget to save them after, by hitting “Save”):
1. “titleShort” -> “PanelSwitcher”-
2. “EventNamespace” -> “#”

3.2 Create the function in typescript

1. 👋 Select “</> Open events file” to create a new javaScript class
2. 👋 Now please view the code, then press “Strg + S” to compile your changes.

export function <yourFunctionName>(eventSource: akioma.swat.Toolbar) {
  eventSource.window.getFirstChildByType('panelSwitcher').controller.switchView('SCREENNAME FOR PANEL ACTION');
}

export function <yourFunctionName>Back(eventSource: akioma.swat.Toolbar) {
  eventSource.window.getFirstChildByType('panelSwitcher').controller.switchView('SCREENNAME FOR PANEL ACTION');
}

3.3 Create the menu functions and link them with the type script

1. 👋 Navigate to “Design” -> “Actions and Menus” -> “Actions” and create the following two functions
1. 👋 “PanelSwitcherFunction_<yourName>”
1. Module: “MyAppModule”
2. Icon: “fad fa-arrow-right”
3. Action Type: “RUN” (This command means you activate/run a function)
4. #.togglePanelSwitcheryourName(eventSource); → (This is the name of the typescript Function)
2. 👋 “PanelSwitcherFunctionBack_<yourName>”
1. Module: “MyAppModule”
2. Icon: “fad fa-arrow-left”
3. Action Type: “RUN”
4. #.togglePanelSwitcherBackyourName(eventSource); → (This is the name of the typescript Function)

3.4 Create a menu structure

1. 👋 Navigate to “Design” -> “Actions and Menus” -> “Menus” and toggle the checkbox “Show root menus” and select the “Build.One Application”
2. 👋 Select in the ribbons the button “Add as sublevel” and fill in the “MenuName” -> “PanelSwitcher_<yourName>” and the “Menu Structure Code” -> “PanelSwitcher_<yourName>” and select “Save”
3. 👋 Select your newly created “PanelSwitcher_<yourName>”  folder, in the dropdown above select the type “Item” and click again on “Add as sublevel”. Fill in a name as “Next Page” and insert the function “PanelSwitcherFunction_<yourName>” and select “Save”
4. 👋 Execute step 9 above again for the other function “PanelSwitcherFunctionBack_<yourName>” and fill in the name as “Back”. Now copy the menu structure code of the “PanelSwitcher_<yourName>” folder

3.5 Add the toolbar with the functions to your screen

1. 👋 Navigate back to the Screen Designer of your panel switcher screen 
2. 👋 Search in the section ”Browse catalog of objects” for the “SimpleSwatToolbar” and add it to your screen above the panel switcher and select “Save”
3. 👋 Select the toolbar and search in the “Attributes” section for the attribute “ToolBarKey”, then fill in the previously copied menu structure code and select “Save”
4. 👋 Empty the cache and hard reload your screen
5. 👋 Launch the screen to see the result. With the toolbar buttons you now should be able to switch between the panels

4 Explanation