Abstract
When modeling a SAPUI5 application, we might want to consider the dimensions of the target device. For example: A table takes a lot of (horizontal) space to show the data.
Improvement 1 - Tile View: One alternative is using a Tile View element. This enables us to organize each record in several rows, thus using less horizontal space. This transforms into more vertical space we scroll through.
Improvement 2 - Paging: Another idea to improve the experience is the notion of paging. If we have too much scrolling to our liking, we could show subsets of the data, and allow moving to the next / previous chunk using buttons. Here is an example application demonstrating this:
Modeling
Dependencies:
This solution is based on: Paging records - Using SQL to get Chunks of Data, which contains a detailed description of the SQL-based paging technique. And so, the data service we use here to get subsets of the data, could be described like this:
- Input parameters:
- @start - start index
- @Step - number of rows
- Result: the requested subset of the Suppliers table
However, This is not obligatory, and you might use other paging techniques, for example:
Paging records in the UI
Paging records in the UI - Coding our own Web Service to get Row Numbers
Modeling steps:
1. Search for the relevant data service and add it to the model.
2. In case it is a JDBC Stored Procedure, as shown here:
- Right click => Test Data Service.
- Enter input value and press Text.
- Press Add Fields to have the fields in the output port.
3. Add a Tile View from the output of the service.
4. Add a Data Share element.
5. Connect the Data Share to the service, edit the link to "listen" to the "*get" event (we model its triggering in later steps).
6. Connect a Start Point element to the input of the Service - this so we get the data immediately on application load.
7. Add two fields to the Data Share, index and step, as follows:
8. Define the field assigns in the Mapping link. Here we pass our SQL code the starting index and number of rows:
9. Define the mapping from the Start Point - getting the first subset of data:
10. Move to the Layout Board. A final layout might look this way:
11. Change control to non-editable style: Right click => Change Control Type => Plain Text.
12. Insert a column and add an Image control to it. Define the URL for a relevant picture.
13. Define the Tile View to have a Toolbar and add Three buttons to it: Next, Previous, and First.
14. Define the Image for each button and delete the Text.
15. Define the Actions for the First button.
- ASSIGN to reset to the first chunk of records.
- GET as a Custom Action to activate the data service (see in step 5 where we define the link activation event).
16. Define Action for the Previous button:
17. Define Action for the Next button:
18. Finally, define Enabled condition for the Previous button:
That's it!
Other VC5 documents:
Featured Content for SAP NetWeaver Visual Composer
VC5 - new elements and properties
VC5 - a new Button Image property
Paging related documents:
Paging records in the UI
Paging records in the UI - Coding our own Web Service to get Row Numbers
Paging records - Using SQL to get Chunks of Data
- SAP Managed Tags:
1 Comment
