Skip to Content

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:

0.PNG

 

8. Define the field assigns in the Mapping link. Here we pass our SQL code the starting index and number of rows:1.PNG

 

9. Define the mapping from the Start Point – getting the first subset of data:

2.PNG

 

10. Move to the Layout Board. A final layout might look this way:

layout_final.PNG

 

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.

/wp-content/uploads/2014/04/layout_1_441680.png

 

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

3.PNG

 

16. Define Action for the Previous button:

4.PNG

 

17. Define Action for the Next button:

5.PNG

 

18. Finally, define Enabled condition for the Previous button:

/wp-content/uploads/2014/04/6_441685.png

 

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

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply