Hi, in this blog I’m going to explain the pagination in Table with S/4 Hana cloud oData service with flexibility to control number of visible rows per page.
In this example, I am using S/4 Hana cloud oData service through destination. I have 621 records in Product entity set and by default, I have to display 10 records per click and user can change number of visible rows. So, I have placed four nav buttons for First page, Previous page, Next page and Last page with page count information and drop down for number of visible rows and then some magical code.
Firstly, create new front end web and mobile application with zproducts name.
In the canvas, give title as Products and remove bottom text.
Add Integration:
Go to Integrations tab and select add integration and then select BTP destinations under sap systems.
In BTP destinations, select our S/4 Hana cloud service destination i.e., S4HANA_Joule_Product and select A_Product entityset. Now Select install integration and enable data entity. You can browse real data by selecting browse real data. Click on save at top right corner.
Add Variables:
Now go to Variables tab and go to page variables and select add page variable and choose from scratch.
Add variable noOfVisibleRows with value type Number with initial value 10.
Similarly add variables totalNoOfRows with value type Number,
Variable currentPage with value type Number with initial value 1,
totalPages with value type Number with initial value 1 and
variable isRefresh with value type true/false with initial value false and Click on save at top right corner.
User Interface:
In User Interface, we install table with data adaptor from marketplace and assign our entity set to it to fetch the data and we will add new property to make table to load the data at each time when user clicks on nav buttons or change number of visible rows.
Go to User Interface tab and select marketplace and search for basic table with data adapter and install it. Drag and drop the basic table with data adapter to canvas and select configure and select A_product and add the required columns and in properties tab, at pagination in Object with properties, assign noOfVisibleRows page variable to page size, assign currentPage page variable to Page Number and click on save. Click on save and exit and save at top right corner.
Go to open in component template editor at bottom in properties tab and select properties and in properties, add new property Refresh of type true/false. Go to view and select add logic to Basic table with data adapter at bottom right corner. Drag and drop Receive event and select Internal property ‘Refresh’ changed and connect end of the receive event to start of get record collection. Click on save and exit. You can see Refresh property in properties tab.
Assign Refresh property with isRefresh page variable
Now select at page level and open logic canvas. Drag and drop record collection and connect to Page Mounted and assign A_Product to resource and for pagination make Include total count as true by selecting binding type as static values true/false.
Now drag and drop set page variable and select variable name as totalNoOfRows and assign formula outputs[“Get record collection”].totalCount for value and connect end of get Record Collection top node to start of Set Page Variable node.
Similarly, drag and drop another set page variable for totalPages and assign formula CEIL(outputs[“Get record collection”].totalCount / pageVars.noOfVisibleRows).
Add Nav Buttons:
Now drag and drop container at bottom of table and select layout as horizontal.
Drag and drop button inside the container and name it as First. For disabled, add formula IF(pageVars.currentPage > 1, false, true) and in logic convas, add two set page variables. One for currentPage and set the value to 1 and another for isRefresh and assign formula NOT(pageVars.isRefresh).
Similarly add another button inside the container and name it as Previous. For disabled, add formula IF(pageVars.currentPage > 1, false, true) and in logic convas, add two set page variables. One for currentPage and assign formula pageVars.currentPage – 1 and another for isRefresh and assign formula NOT(pageVars.isRefresh).
Add another button inside the container and name it as Next. For disabled, add formula IF(pageVars.currentPage < pageVars.totalPages, false, true) and in logic convas, add two set page variables. One for currentPage and assign formula pageVars.currentPage + 1 and another for isRefresh and assign formula NOT(pageVars.isRefresh).
Add another button inside the container and name it as Last. For disabled, add formula IF(pageVars.currentPage < pageVars.totalPages, false, true) and in logic convas, add two set page variables. One for currentPage and assign formula pageVars. totalPages and another for isRefresh and assign formula NOT(pageVars.isRefresh).
Drag and drop text after Previous button and for content add formula pageVars.currentPage + ” / ” + pageVars.totalPages.
Drag and drop Dropdown and give label text as No of Rows and select option list -> List of values and add value and give values 10, 25, 50, 100 and save. Make Placeholder text as empty.
In Logic pane of dropdown field, drag and drop set page variable and assign variable name to noOfVisibleRows and add formula IF(self.value, NUMBER(self.value), pageVars.noOfVisibleRows ) for value.
Similarly, drag and drop another page variable and assign currentpageno to it and value as 1.
Another page variable with totalpages and formula for value is CEIL(pageVars.totalNoOfRows / pageVars.noOfVisibleRows) and save at the top right corner.
Add another page variable with isRefresh with formula for value NOT(pageVars.isRefresh).
Preview Application:
Save at top right corner and click on preview and select open web preview. Now, you can see our application with pagination and flexibility to control number of visible rows per page.
By doing this, we can easily add pagination in Table on button click by consuming S/4 Hana cloud oData service with flexibility to control number of visible rows per page.
That’s it!!!
Hi, in this blog I’m going to explain the pagination in Table with S/4 Hana cloud oData service with flexibility to control number of visible rows per page. In this example, I am using S/4 Hana cloud oData service through destination. I have 621 records in Product entity set and by default, I have to display 10 records per click and user can change number of visible rows. So, I have placed four nav buttons for First page, Previous page, Next page and Last page with page count information and drop down for number of visible rows and then some magical code. Firstly, create new front end web and mobile application with zproducts name. In the canvas, give title as Products and remove bottom text. Add Integration:Go to Integrations tab and select add integration and then select BTP destinations under sap systems.In BTP destinations, select our S/4 Hana cloud service destination i.e., S4HANA_Joule_Product and select A_Product entityset. Now Select install integration and enable data entity. You can browse real data by selecting browse real data. Click on save at top right corner. Add Variables:Now go to Variables tab and go to page variables and select add page variable and choose from scratch.Add variable noOfVisibleRows with value type Number with initial value 10.Similarly add variables totalNoOfRows with value type Number,Variable currentPage with value type Number with initial value 1,totalPages with value type Number with initial value 1 andvariable isRefresh with value type true/false with initial value false and Click on save at top right corner.User Interface:In User Interface, we install table with data adaptor from marketplace and assign our entity set to it to fetch the data and we will add new property to make table to load the data at each time when user clicks on nav buttons or change number of visible rows.Go to User Interface tab and select marketplace and search for basic table with data adapter and install it. Drag and drop the basic table with data adapter to canvas and select configure and select A_product and add the required columns and in properties tab, at pagination in Object with properties, assign noOfVisibleRows page variable to page size, assign currentPage page variable to Page Number and click on save. Click on save and exit and save at top right corner.Go to open in component template editor at bottom in properties tab and select properties and in properties, add new property Refresh of type true/false. Go to view and select add logic to Basic table with data adapter at bottom right corner. Drag and drop Receive event and select Internal property ‘Refresh’ changed and connect end of the receive event to start of get record collection. Click on save and exit. You can see Refresh property in properties tab. Assign Refresh property with isRefresh page variable Now select at page level and open logic canvas. Drag and drop record collection and connect to Page Mounted and assign A_Product to resource and for pagination make Include total count as true by selecting binding type as static values true/false. Now drag and drop set page variable and select variable name as totalNoOfRows and assign formula outputs[“Get record collection”].totalCount for value and connect end of get Record Collection top node to start of Set Page Variable node.Similarly, drag and drop another set page variable for totalPages and assign formula CEIL(outputs[“Get record collection”].totalCount / pageVars.noOfVisibleRows).Add Nav Buttons:Now drag and drop container at bottom of table and select layout as horizontal.Drag and drop button inside the container and name it as First. For disabled, add formula IF(pageVars.currentPage > 1, false, true) and in logic convas, add two set page variables. One for currentPage and set the value to 1 and another for isRefresh and assign formula NOT(pageVars.isRefresh).Similarly add another button inside the container and name it as Previous. For disabled, add formula IF(pageVars.currentPage > 1, false, true) and in logic convas, add two set page variables. One for currentPage and assign formula pageVars.currentPage – 1 and another for isRefresh and assign formula NOT(pageVars.isRefresh).Add another button inside the container and name it as Next. For disabled, add formula IF(pageVars.currentPage < pageVars.totalPages, false, true) and in logic convas, add two set page variables. One for currentPage and assign formula pageVars.currentPage + 1 and another for isRefresh and assign formula NOT(pageVars.isRefresh).Add another button inside the container and name it as Last. For disabled, add formula IF(pageVars.currentPage < pageVars.totalPages, false, true) and in logic convas, add two set page variables. One for currentPage and assign formula pageVars. totalPages and another for isRefresh and assign formula NOT(pageVars.isRefresh).Drag and drop text after Previous button and for content add formula pageVars.currentPage + ” / ” + pageVars.totalPages.Drag and drop Dropdown and give label text as No of Rows and select option list -> List of values and add value and give values 10, 25, 50, 100 and save. Make Placeholder text as empty.In Logic pane of dropdown field, drag and drop set page variable and assign variable name to noOfVisibleRows and add formula IF(self.value, NUMBER(self.value), pageVars.noOfVisibleRows ) for value.Similarly, drag and drop another page variable and assign currentpageno to it and value as 1.Another page variable with totalpages and formula for value is CEIL(pageVars.totalNoOfRows / pageVars.noOfVisibleRows) and save at the top right corner.Add another page variable with isRefresh with formula for value NOT(pageVars.isRefresh).Preview Application:Save at top right corner and click on preview and select open web preview. Now, you can see our application with pagination and flexibility to control number of visible rows per page. By doing this, we can easily add pagination in Table on button click by consuming S/4 Hana cloud oData service with flexibility to control number of visible rows per page. That’s it!!! Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
