It is common to present data with hierarchy, like in a Master / Slave scenario. Usually we need two lists to achieve this (here is a VC5 example with Tile View). This way however does not always meet with our needs, for example: a device too small to contain two separate UI lists.
So we may want to present the hierarchy in one element, in this case the VC5 Tile View element. If we have the two hierarchies (e.g. customers and their orders) in one table in memory, plus the ability to distinguish between the data types, we could organize the data like this:
In the above application we see Customer => Orders data: each customer followed by his / her orders. We also present a collapse / expand button to hide / show the Orders for each customer.
The Solution - Backend Part
For this part I used Microsoft SQL Server Management Studio.
We start with preparing the queries to be later consumed by Visual Composer. Assume we already have the Customers and Orders tables. A simple query to get the Customers and Orders in a single view might look like this:
And the corresponding result:
For detailed explanation of the Join operation see:Handling the Join Operation.
In our specific solution we want to have two types of records for this view, Customer and Order. Moreover, we want to be able to distinguish between them. So we might alter our SQL code this way (the change appears in gray):
And we get the following result (additional rows in gray):
Now we have a record for each customer, followed by his / her orders. This thanks to the SQL Union statement adding another record for each customer, with order_id zero.
The Solution - Modeling Part
1. Search for the data service and drag it to the model.
In case it is a JDBC Stored Procedure, as shown here:
- Right click => Test Data Service.
- Enter input values (if any) and press Test.
- Press Add Fields to have the fields in the output port.
2. Connect a Start Point element to the input of the service.
3. Add a Switch Operator the model.
4. Connect the output of the service to the input of the Switch Operator.
5. Add a Data Share element.
6. Connect the output of the service to the Data Share (Share1).
7. From the output of the Data Share drag and choose to add a Filter Operator. Set the event name on the link to *submit. We later model the triggering of this event.
8. Connect the output of the Filter to the input of the Switch Operator.
9. From the output of the Switch Operator drag and choose to add a Tile View element.
10. Add a Data Share element (share2). Right click and open the Define Data dialog box, add a Text Field by the name "hide". This text will contain the supplier_id(s) if records that should be collapsed. for example: 1;3; to collapse the orders of suppliers 1 and 3.
The idea is to show the result of the query in the Tile View. There are two flows:
Flow 1: Immediately after the service execution.
Flow 2: Whenever the user presses Collapse / Expand button. Here we use the records kept in the Data Share (share1) beforehand, as we pass them through the filter. This way the irrelevant (or collapsed) records are not showing.
11. The Switch Operator is defined as follows. It allows us to connect several paths of execution, in this way we need it as a Tile View can only have one input link.
12. Define the Filter Operator. Define an expression so that records that are "collapsed" do not pass: such a record has an order_id that is not zero, and it's customer_id number appears in the share2@hide fields.
Here is the example application with a debugging Form - a Form View element connected to "share2" element, showing the "hide" field. Note the value changes as we collapse and expand:
13. Go to the Layout Board.
14. Add columns to the Tile using Right Click => Insert Column.
15. Place controls related to the Customer in the second row, and those related to Order in the first.
16. Chane the controls to be of Plain Text type (see image).
17. From the Compose Panel add a Button control.
18. Select the Button and press Configure. Press on the Image property to add image to it. Add the "Expand" and then the "Collapse" SAPUI5 icons. set the condition on the first to: =CONTAINS(share2@hide,@customer_id&";")
This way we see the Expand image if the orders are collapsed, and the Collapse image otherwise.
19. In the Configure Panel delete the text of the Button.
The SAPUI5 Icons feature is made available in version EHP1 for 730 SPS 13, and 740 SPS 08. However, it is possible to add images by URL using the + button in the dialog.
20. Define the Button control Actions as follows:
- ASSIGN Action: update the global share2@hide field. if the customer_id was already there, remove it. otherwise, concatenate it to current value. here is the full text of the value parameter:
=IF(CONTAINS(share2@hide,[Customers and Orders]@customer_id&";"),
REPLACE(share2@hide,[Customers and Orders]@customer_id&";",""),
share2@hide&[Customers and Orders]@customer_id&";")
- SUBMIT Action: this comes to trigger the listening to *submit on the link between "share1" and the filter.
21. Set visibility condition on fields related to Customer:
22. Set visibility condition on fields related to Order:
That's it
Dedicated VC5 features necessary for this solution:
- Tile View
- The Button Image property
Related links - SQL:
Handling the Join Operation
Creating a JDBC Connection Profile - Configuring Composition Environment Platform - SAP Library
Working with Stored Procedures - Modeling Composite Views with Visual Composer - SAP Library
How to: Create a Stored Procedure (SQL Server Management Studio)
Related documents - VC5
VC5 - a new Button Image property
VC5 - new elements and properties
VC5 Paging Records Example
- SAP Managed Tags:
2 Comments
