3

Display Sales Orders App – AppGyver

 1 year ago
source link: https://blogs.sap.com/2022/06/10/display-sales-order-app-appgyver/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
June 10, 2022 5 minute read

Display Sales Orders App – AppGyver

AppGyver , the Low code/ No Code platform seems pretty cool. You can check my blog on “Music Plyer with AppGyver” Here. This time I wanted to try out the AppGyver with API’s and so decided to use the API hub sandbox system to start with.

Purpose:

The purpose is to build a basic sales orders display app, which :

  • Should show list of  all the orders from the source system by calling an API  (here we will be using API HUB Sandbox ).
  • User should be able to search a specific sales order
  • Possible navigation to details of selected sales order
  • Sales order details should show the Items and the Partners also
  • Further Navigation option to selected item details or selected partner details

MyApp

To build this app we will go step by step. Let’s begin.

Create Project on AppGyver

Creating project creates the initial page named “Empty Page”. We can change the name as needed. So, we will leave this page as is for now and will come to it in sometime

2-10.png

Create Data Source

Before we even start creating our UI, lets first configure our data sources. As I mentioned, we will be using SAP API hub to fetch the sales order from sandbox system. The API, which we will use is API_SALES_ORDER_SRV.

Navigate to the Data tab from top menu on the initial page and create a data source with appropriate name. Under the base section, maintain the Base URL of the API and maintain the Header parameter like API Key( from API hub) as that will be needed to access the data on sandbox system.

3-10.png

As we need to fetch sales orders, we need to configure the Get Collection for Sales Orders Entity  and maintain the response node which is going to hold the fetched data

4-9.png

We can also test the configured API under the test node and when successful, we can set the schema so that we can use the elements from the response data into our UI and logic.

5-10.png

As we also need to navigate to the sales order details, we need the individual sales order details as well. For that we need to configure the Get Record also with the URL path for fetching the sales order details

In this case, we will need to pass the sales order number also in the URL and also that should be dynamic, so that details are fetched for the selected sales order only. For that we will pass a variable in the URL the value of which will be passed dynamically. We will see how to do that in later section. For now, let’s pass the URL placeholder as shown below

6-11.png

With this , we have set up our sources for Sales orders and the Sales order details. Similarly , configure the data sources for Sales order Items ,Item details and Partners and Partner details. Once we are done we will have below Data Sources

7-9.png

So, all done from Data sources part. Let’s move on to the UI.

UI Design

We created the initial page with project creation. Change the Heading to  ‘Sales Orders’ and add list item component from the left panel.

8-9.png

As, we need to show the sales orders list , we will need sales order data sources on this page. Navigate to the Variables section as shown above and add the Data Variable “SalesOrders” which we created as Data Sources above.

9-7.png

Navigate back to the UI view. As we need the list of sales orders, we need the list to repeat itself for all the orders fetched. For that , select the list and click on Repeat with property on the right and bind it with the sales order data variable which we just created

10-4.png

Now list will repeat itself for all the selected records. Bind the Primary and Secondary labels of list with Sales Order number and Created By fields from the Data Variable created from salesorders data source

11-4.png

Now, we can see fields mapped from data source in the list. We can see same value in all rows , but at runtime it will be populated based on real data.

12-4.png

Next, we create the Sales order details page

13-4.png

Add the data variables required on this page. In this case , we will need all the 3 data sources, Sales Order, SO items and Partners

14-3.png

Next, we add the details to the page view as we did  for Sale Orders main page. Here we will add some details from sales order header  and then add lists for Sales order items and Sales order partners.

15-3.png

With this, we have the Sales Orders page and the Sales order details page. We need to setup the navigation between the two pages.

On the Sales Order page, select the list item and navigate to the logic section. Drag the Open page flow function and connect it with the component action output. Assign the Sales Order details page to the Open page flow function page parameter as shown below.

16-3.png

Similarly, we will add pages for item details and partner details and connect them to the items list and partner list to open the details for selected record.

17-2.png

Finally, I added the search control on the sales order page and filtered the data source result with entered value in search control. I added some styling to the app to make it look a little better.

The app can be checked here https://mysalesorders.appgyverapp.com/

Check the final demo of the app below.

Keep Learning and keep sharing!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK