Add and configure a Grid (SwatGrid)

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>
Title = OrderGrid
Entity = OrderEntity
Fields = CustNum, OrderStatus, Ordernum, Instructions, OrderDate

💡

Please select them from the list and not copy the previous 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 element “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. Then 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 tab, called “Flow View”, in the centre of the Object Designer

💡

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.

5 Helpcenter Article

Grid/Table

The Grids or Tables are created in Build.One using the SwatGrid object. Objects of type "SwatGrid" display data in a tabular way with rows and columns. They can be used in other container objects (objects which includes other objects) like panels in a SwatWindow.

helpcenter.build.one