1 Context:
A grid is a graphical no-code design element that displays data from one or more tables. We will now use the first grid to display order data from the order table in our screen.
2 Result:
3 Step by step guide:
3.1 Generate an own grid
- 👋 Select “B icon” in the top left corner to go back to the Home screen
- 👋 Navigate to “Design” -> “Components” -> “Grids”
- 👋 Click on the “Generate” button to create your own “OrderGrid_<yourName>”
- 👋 Fill in the following information in the form
- Name = OrderGrid_<yourName>
- Titel = OrderGrid
- Entity = OrderEntity
- Fields = CustNum, OrderStatus, Ordernum, Instructions, OrderDate 💡(Please select them from the list and not copy this line)
- Module = MyAppModule
- 👋 Select “Confirm” to generate your grid
3.2 Put the grid and DSO in the screen
- 👋 Now navigate back to your “OrderOverview” Screen Designer
- 👋 In the panel “Object Structure” on the left click on the small gearwheel icon of the tree node “designPhGrid” and select the option “Replace”. A modal dialog for the object selection appears.
- 👋 Search for your generated grid “OrderGrid_<yourName>” and double click it to replace it. Than select “Save”
- 👋 Click on “Launch” to see your current result. Your grid will be displayed but without any populated data. Close this window and go back to the Screen Designer
- 👋 In the panel “Object Structure” click on the small gearwheel icon of “designPhDatasource” and select “Replace”.
- 👋 Search for the “OrderDSO” and double click it to replace it.
- 💡 The Business Entity or Datasource object is a non graphical control which allows the data transfer between front- & backend
- 💡 A Business Entity provides data from different data sources, e. g. databases, APIs or calculated data based on every data the system has access to
- 💡 You can think of it this way: a data source object corresponds to one or more tables in your database. With this you can then fill your objects like grids or forms or many more with data, write back into these tables or create new data sets.
- 👋 Please select the third icon, called “Flow”, when hovered over, in the tab on the left
- 💡 You should now see a panel with the objects and relations
- 👋 Here you can see that the object relations have already been set based on the selected template.
- 💡 “<This object>” represents the entire screen. It is connected to the primary data source using “PrimaryDSO” relationship.
- 💡 This DSO is then connected to the Grid using the “Data” relationship type to supply it with data from the database table.
- 💡 These relationships can also be manually set.
- 👋 Now launch your screen again and see the grid displayed on your first screen.
- 💡 The data visible is pre-populated data of the “OrderDSO”
4 Explanation:
By adding the grid, we were able to display data from the order table on our screen. Since we used a template, we did not have to set the connections between objects manually. However, these can also be set manually by drag & drop. The Flow Designer is used to map object relationships and regulate data flow. In our example, the screen is connected to the data source and this data source in turn supplies the grid with data.
