After you have created the entry page of your application, you will now create a page to show the details of the selected business partner.
You will add a new page to your application and add page parameters so you can access data from your application.
-
On the top left section, choose the name of your current page Home, which is highlighted in light blue to open the page menu of SAP Build Apps.
-
Choose ADD NEW PAGE.
-
Enter Details as Page name, and then Select OK. Your new page will be created and open.
-
On the Details page, choose the toggle button to switch to VARIABLES tab.
-
Choose the PAGE PARAMETERS button on the left side of the screen.
-
Choose ADD PARAMETER.
-
It creates a new parameter, choose the created parameter to edit.
-
On the right side of the screen, change the Parameter name to businessPartnerId.
-
Again, choose ADD PARAMETER and create a second parameter.
-
Change Parameter name to businesspartnerName.
-
Choose SAVE.
-
Switch back to VIEW via the toggle button.
To show the business partner details on the details page, you need to connect the Home page and the Details page. In this section, you will first create a new navigation logic to pass the page parameter created in the previous step. On the details page, you will then load the business partner address by passing the business partner id to the A_BusinessPartnerAddress entity.
-
On the top left section, choose the name of your current page Details, which is highlighted in light blue, to open the PAGES menu.
-
Select Home to switch to Home page to create a logic to pass the business partner and business partner full name parameters from Home page to Details page .
-
Select the first row in the list.
-
At the bottom of App Builder where you can see Add logic to LIST ITEM1. Choose the arrow to open the logic canvas.
-
In the component menu on the left side, choose NAVIGATION → Open page to add a function that opens a new page.
-
Drag and drop it to the Logic canvas.
-
Hover over the Component tap and choose the round dot. Connect the dots of the Component tap and the Open page components. It creates a new connection and sets the logic to open a new page on the event of tapping an item in the list item.
-
Choose the Open page component.
-
On the right side of the screen, select PROPERTIES → Parameters → businessPartnerId.
-
Choose the X button. It opens a popup.
-
Select Data item in repeat.
-
Select current.
-
Scroll the list and select BusinessPartner, and then choose SAVE.
-
Repeat the steps 9-13 for to the businesspartnerName parameter and select current.BusinessPartnerFullName.
-
Choose SAVE to save the changes.
With this step now, you can pass the selected business partner id and name fields from the list to the details page.
The detail page receives the Business partner ID from the main page. In this step, the ID is used to get the address of the selected business partner.
-
From the left side of the screen, choose Home.
-
Select the Details page from there to switch to the Details page.
-
Toggle to the VARIABLES tab.
-
Select DATA VARIABLES on the left.
-
Choose ADD DATA VARIABLE.
-
Select A_BusinessPartnerAddress from the list.
-
Choose the Filter Conditions button on the right.
-
A popup opens. Select Object with properties.
-
Choose Add Condition. In the Property dropdown, select Business Partner.
-
Under Compared Value, choose button ABC.
-
Select Data and Variables.
-
Select Page parameter.
-
Select businesspartnerId and choose SAVE.
-
Choose the SAVE button to save changes to the page.
-
Toggle to the VIEW mode now.
Now, your application loads the business partner's address and stores it to the data variable.
Next, you will change the header of the details page, so it displays the current Business Partner.
-
Select the default description on the page and delete it by pressing the trash bin icon.
-
Select headline component. On the right side of the screen, choose ABC button in Content section.
-
Select Data and Variables
-
Select Page parameter.
-
Select businesspartnerName and choose SAVE.
Next, you will add a list element, which displays the address of the business partner.
-
Drag the List item from the CORE tab on the left.
-
From the right PROPERTIES panel, find Arrow Visible section and select false from the dropdown.
-
Choose the Repeat with button on the left side of the screen
-
In the popup, select Data and Variables → Data variable.
-
Select A_BusinessPartnerAddress1 from the list.
-
Choose SAVE.
-
On the right side of the screen, choose ABC button under Primary Label.
-
Select Data item in repeat.
-
Choose current.
-
Scroll and select StreetName. Choose SAVE*.
-
On the right side of the screen, Choose ABC button under the Secondary Label.
-
Select Data item in repeat.
-
Choose current.
-
Scroll and select PostalCode. Choose SAVE.
-
Choose SAVE at the top of page.
Now, that your app is developed, Let's preview the application.
-
Choose LAUNCH.
-
Choose OPEN PREVIEW PORTAL and choose Open web preview button.
-
Select your application and choose OPEN.
-
Choose the list item to see the details page.
The main page should look like:
The details page should look like:
