As we know, Business Application Studio (BAS) is going to be recommended editor for future UI5 developments, in this blog we will see how to create OVP app in BAS.
You might be thinking, we have many wonderful blogs on how to created OVP apps, so why one more. I agree, but after migration from WEBIDE to BAS ,when I tried to create one in BAS , I figured there is no annotation modeler available in BAS for defining the local annotations and all I will have to do is code for it. Similarly, I didn’t know how to create card ( not a UI5 developer and my hand is tight when it comes to front end development).I searched for any available blogs using BAS, but no luck. At the same time I got some hints from expert answers in community questions and thought of trying them out.
Now as I have tried, so thought of sharing it thinking if it could help anyone like me. So, Lets Begin…
Prerequisites:
- Cloud connector setup is done to connect to backend data source system
- Destination is created in CF subaccount
- BAS Application is enabled and dev space created for App development.
- OData service to be used to create OVP page is ready – Here I have created a CDS based OData service (ZPUR_REP_CDS) for Purchasing data like, PO number, Plant , Vendor, material, PO Doc Type, Invoice number ,PO Quantity, Invoice amount etc…
Once we are done with the prerequisites, we are ready to build our OVP app in BAS.
- Open BAS editor and create a new project from Template.
- Select SAP Fiori Elements application template and click start
- Select Overview page and click Next
- On the next screen, select the data source. As we will be using data from backend on-premise system, select “Connect to an SAP system”
- Select the system from the available list of system connected via cloud connector
- Next, select the OData service (ZPUR_REP_CDS) to be used for data fetching
- Select the Entity from the service. In this case only single entity is part of OData service
- Fill in the project attributes and click finish
- The project template and folder structure will be auto created with different files as shown below
- Next , we need to create the annotations to define the properties we want to be represented in the OVP card. In this case, lets say we want to display the Purchase Orders Invoiced amount by Vendor. Also, lets say we want to show the same as line type chart in card.
- As I mentioned in the beginning, we don’t have Annotation modeler available to define all the above defined properties and so we will have to do the same via code in annotations file in XML editor ( I wish annotation is modeler is made available soon in BAS also )
- Lets define our local annotations. For that open the auto generated annotations.xml file under <project> =>webapp=>annotations
- Add the annotations as shown below to define the target entity , Chart type, Measure and dimension. Don’t miss to specify the Qualifier for the chart annotation. It can be any string. In this case, I have used “Chart1”
- With annotations defined, now we need to create card and link annotations we created to that card. Here again I wondered, how to create card? need to code again ??
If you remember from WebIde, we had the option to right click on project and create Card and link the same with annotations. I looked for same but could not found that option. So, I looked upto community again and with some search could figure out there is a similar option called “Guided Development” … pheww.. thank god…:).Lets see how to use this option.
- Goto menu item View=>Find Command or press CTRL+SHIFT+P
- Search for “Fiori” and select ” Open Guided Development”
- On the next screen, we see there is guided development support provided for different fiori element application types. As we want to create an Analytical card, select the same under the Overview page
- On the next screen, select Start Guide
- On the next screen we can fill in the details just like we use to do in WEBIde and link the card with the annotations we created using the qualifier we maintained in annotation file. The required code will be auto generated
- Click on Apply and the code will be incorporated in the manifest file to create the card with details maintained.
- With this we have created OVP card and linked it with the annotations. Lets see how it displays
- Before we run the project , lets compile it . Goto Terminal=>New Terminal
- run command “npm i”
- run command “npm audit fix” in case any vulnerabilities appear
- GoTo Run configuration tab on left panel and click on create run configuration icon
- On the next screen, select the UI5 version to used to run project
- Select the destination type, in this case backend SAP system
- Select the system from the list of available ones as per Cloud connector connectivity done earlier
- Enter any name and press enter
- We will see a new run configuration created in the left window . Click on Green play icon in front of run configuration
- We will see a debugger session started and a popup will appear in the right corner to “Open in New Tab”
- On the next screen, click on test/ folder
- Click on flpSandbox.html file
- our app will appear on the sandbox launchpad. Click on the app.
- Here we go, As you will see, the app opens up with the Analytical card showing PO invoices amount by Vendor as line chart
- Similarly we can add more more cards and of different types using guided development.
- Before we close, lets see how we can add filter fields to our app.
- Add the SelectionFields annotation to the annotations.xml file as shown below
- Save the file and re-run the app and we will see Material field is added as the selection field in the app
- Lets filter Data with Material “TG14” and as we can see , data in all the card is changed based on the the filtered material.
Cool, so with this, we learned how to create OVP app using Business application Studio and how to use guided development option to accelerate the app creation.
