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.

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