Logo

    Home

    Documentation

    Use Cases

    Training

    Applications

    Release Notes

    Adding additional objects & filters to complete the screen (With Versions)

    Adding additional objects & filters to complete the screen (With Versions)

    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

    image
    image

    3 Step by step guide

    3.1 Add the customer and item grid

    1. Please duplicate the grids “CustomerGrid” and “ItemGrid” again and name them accordingly. If you need help here please take a look at chapter 80 & 90 ☝️
    2. Drag and drop these objects to the simple swat tabbar in your OrderOverview screen
      1. The “CustomerGrid_<yourName>” belongs to panel A in the tabbar on page “Customer Information” tab
      2. The “ItemGrid_<yourName>” belongs to Tabbar panel A on page “Item Information” tab
    3. Add the “TrainingCustomerDSO” 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)
      4. icon

      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

    4. Add the “ItemDSO” to the screen (Same as previous step)
    5. Add the “OrderLineDSO” to the screen (Same as previous step)
    6. Go to the “Flow View” tab and connect the next object (You can see the result picture below)
      1. “OrderDSO” with the “TrainingCustomerDSO” with the “Link type” -> “Data”
      2. “OrderDSO” with the “OrderLineDSO” with the “Link type” -> “Data”
      3. “OrderLineDSO” with the “ItemDSO” with the “Link type” -> “Data”
    7. Set the following connections: (You can see the result picture below)
      1. TrainingCustomerDSO → (Data) → CustomerGrid_<yourName>
      2. ItemDSO → (Data) → ItemGrid_<yourName>
    ‣
    Result of the previous two steps

    3.2 Configure the connections with foreign keys

    icon

    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".

    1. To do so, please select "TrainingCustomerDSO" and search for the attribute "ForeignFields" in the "Attributes" panel
      1. Fill the "Attribute Value" with "CustNum,CustNum"
        2. icon

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

        icon

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

    2. Please select the "OrderLineDSO" and search for the attribute "ForeignFields" in the "Attributes" panel
      1. Fill the "Attribute Value" with "Ordernum,Ordernum"
    3. Please select the "ItemDSO" and search for the attribute "ForeignFields" in the "Attributes" panel
      1. Fill the "Attribute Value" with "Itemnum,Itemnum"
    4. Launch your screen to see the result

    3.3 Create a version and test other combinations

    1. Select the top node in the “Object structure” panel “yourScreenName/swatwindow”
    2. Click on the button “Create Version” in the ribbon bar
      3. icon

      It will create now snapshot of your current screen

    3. Now lets change the direction of the relation between the “OrderDSO” and the “TrainingCustomerDSO”.
    4. Mark the relation and click delete button in the ribbon (A new section of the ribbon called “Link” have appeared when selecting the link).
    5. Then, set the connection again but now from the “TrainingCustomerDSO” to “OrderDSO” with the link type “Data”.
    6. Clear the Attribute “ForeignField” in the TrainingCustomerDSO and set it in the OrderDSO with "CustNum,CustNum"
      7. ‣
      Result Picture
    7. Launch your screen to see the result
    8. Close the launched screen
    9. To revert the changes click on the button “Revert to previous version”
    10. Select the created version with the timestamp
    11. Click on Confirm
    icon

    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

    icon

    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.

    1. 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
    2. Fill the "Attribute Value" with "!CustNum,!Name,!Address,!City,!Country,*"
    icon

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

    1. 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".
      2. icon

      This change however is not permanent.

    2. 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

    icon
    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.
    Logo