Display Sales Orders App - AppGyver

[Vijay]

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

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.

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

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.

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

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

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.

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.

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

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

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.

Next, we create the Sales order details page

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

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.

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.

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.

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!