1 Context:
A design template is a pre-defined group of objects that constitite a sceen and its’ set parameters. This allows recurring design patterns to be readily available, incresing development speed. At the beginning, when we created our first screen, we used such a template. In this exercise we will create our own.
2 Result:
3 Step by step guide:
- 👋 Navigate to “Design” -> “Screens” and select the “Create” button in the toolbar
- 👋 Name it “OverviewScreenTemplate”, add a description and select the “Module” -> “MyFirstApp”
- 👋 Select the Layout -> “Window(simple)”
- 👋 Click on “Confirm” to save it and open the screen in the Screen Designer
- 👋 Select in the “Preview” panel and change the “Layout” to “3T” in the “Attributes” panel
- 👋 Search in the panel “Browse catalog of objects” for the following attributes and place them on the “Preview” panel:
- “designPhGrid” -> “A”
- “designPhForm” -> “B”
- “designPhGrid” -> “C”
- “designPhToolbar” -> “A”
- “designPhDatasource” -> “On the screen two times”
- 👋 Connect them in the “Flow” panel in the following order:
- “<This Object>” -PrimaryDSO-> “designPhDatasource” –Data--> “designPhGrid”
- “designPhDatasource” –Data-> “designPhDatasource2” –Data-> “designPhGrid2”
- “designPhDatasource” –Display> “designPhForm”
- “designPhToolbar” -TableIO> “designPhGrid”
- 👋 Navigate to “Design” -> “Screens” and search for the attribute “Template Object” in the “List of Screens” and set it to ‘true’ for your newly created template screen and select “save”
Now the next time you create a screen your template will appear in the template overview and you can start working on that basis of this template
4 Explanation:
If you notice that the same design patterns occur repeatedly during your development, you can save a lot of time by creating and utilizing templates. Moreover, you can use this feature to create mockups quickly, which you can discuss with the client, in order to make changes swiftly.