Create own custom templates

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)”

We select an empty template as we are going to define our own one

Click on “Confirm” to save it and open the screen in the Screen Designer
Search in the “Attribute” panel the attribute “Layout” and change it to “3T”
Search in the tab “Library of objects” for the following objects and place them on the “Design View” panel:

“designPhGrid” -> “Panel A”
“designPhForm” -> “Panel B”
“designPhGrid” -> “Panel C”
“designPhToolbar” -> “Panel A”
“designPhDatasource” -> “Add it to the screen title two times”

Connect them in the “Flow view” tab 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.