Adding additional objects & filters to complete the screen

1 Context:

🧠

In this step, we will add additional grids and DSOs to display not only order information but also the corresponding customers and items. To do this, we will add two more grids to the Tabbar and connect them with two additional DSOs. Then, we will establish a foreign key relationship between orders and customers to display the respective customer of each order.

2 Result:

3 Step by step guide:

3.1 Add the customer and item grid

Please copy the grids “CustomerGrid” and “ItemGrid” again and name them accordingly. If you need help here please take a look at chapter 80 & 90 ☝️
Drag and drop these objects to the simple swat tabbar in your OrderOverview screen

The “CustomerGrid_<yourName>” belongs to panel A in the tabbar on page “Customer Information” tab
The “ItemGrid_<yourName>” belongs to Tabbar panel A on page “Item Information” tab

Add the “CustomerDSO” to the screen (By dropping it in the title of the window inside the “Design view”, you will see that the highlight it becomes green indicating that it is the correct area to drop it)

💡

The DSO cannot be added to any panel because the belong to the screen level and it can be used by any object of the screen

Add the “ItemDSO” to the screen (Same as previous step)
Add the “OrderLineDSO” to the screen (Same as previous step)

‣

Result of the following two steps

Go to the “Flow View” tab and connect the next object (You can see the result picture above)

“OrderDSO” with the “CustomerDSO” with the “Link type” -> “Data”
“OrderDSO” with the “OrderLineDSO” with the “Link type” -> “Data”
“OrderLineDSO” with the “ItemDSO” with the “Link type” -> “Data”

Set the following connections: (You can see the result picture above)

CustomerDSO → (Data) → CustomerGrid_<yourName>
ItemDSO → (Data) → ItemGrid_<yourName>

3.2 Configure the connections with foreign keys

💡

Now we are going to filter the "Customer Information" tab, so it only shows the specific record that matches the selected record in the "OrderGrid" by attribute "CustomerNum".

To do so, please select "CustomerDSO" and search for the attribute "ForeignFields" in the "Attributes" panel

Fill the "Attribute Value" with "CustNum,CustNum"

💡

With this we create a relationship between these attributes in the two DSOs – (key value relation).

💡

With this connection we see the customers which relate to an order.

Please select the "OrderLineDSO" and search for the attribute "ForeignFields" in the "Attributes" panel

Fill the "Attribute Value" with "Ordernum,Ordernum"

Please select the "ItemDSO" and search for the attribute "ForeignFields" in the "Attributes" panel

Fill the "Attribute Value" with "Itemnum,Itemnum"

Launch your screen to see the result

3.3 Create a version and test other combinations

Select the top node in the “Object structure” panel “yourScreenName/layout”
Click on the button “Create Version” in the ribbon bar

💡

It will create now snapshot of your current screen

Now lets change the direction of the relation between the “OrderDSO” and the “CustomerDSO”.
Mark the relation and click delete button in the ribbon (A new section of the ribbon called “Link” have appeared when selecting the link).
Then, set the connection again but now from the “CustomerDSO” to “OrderDSO” with the link type “Data”.
Clear the Attribute “ForeignField” in the CustomerDSO and set it in the OrderDSO with "CustNum,CustNum"

‣

Result Picture

Launch your screen to see the result
Close the launched screen
To revert the changes click on the button “Revert to previous version”
Select the created version with the timestamp
Click on Confirm

💡

Now you can see that the old state is reverted and we can move on based on that

3.4 Change the size and the alignment of a grid

💡

Since the "CustomerGrid" holds many attributes, not all relevant to the use case, we now want you to filter out most of them and only make Customer Number, Address, City and Name visible in the Grid.

Head back to the "Design View" tab and select the "CustomerGrid" in the "Design View" panel, then find the field "instanceRestriction" in the "Attributes" panel
Fill the "Attribute Value" with "!CustNum,!Name,!Address,!City,!Country,*"

💡

The final change will be to configure the order of the columns of the "CustomerGrid".

To do so we drag the columns to their intended position in the launched page. For example, moving "Name" to the left side of the "CustomerGrid".

💡

This change however is not permanent.

To make this change permanent you have to press ”Control+Shift+ S”, which will prompt a popup asking you whether you want to save the repository-setting changes for the changed "CustomerGrid"

4 Explanation:

☝

We have extended our screen to display more information. We have added multiple data sources and grids, and established primary key relationships between them. Additionally, we have reversed the relationships to clarify the flow of the relations. This way, we have provided our product owner with a very informative screen to manage orders.