Fiori Element List Report development using SAP Business Application Studio (BAS) Guided Tools
In the past weeks I explored some capabilities of the SAP Business application studio while developing Fiori elements-based list report applications. Most important part is annotations since lots of people are new to this new IDE SAP BAS and initially, they might struggle to find all the tools and wizards which they were using in SAP WEB IDE so I decided to share my learning through this blog.
What you will learn?
The goal was to fast track your Fiori element-based development using this new SAP BAS IDE.
- We will explore use of SAP Fiori Application modeler.
- Use of Fiori guided development tool for Annotations.
Let’s Start the development step by step using Northwind OData service
You can create new project using template in SAP BAS.
You can use welcome page for new project creation.
Select the Fiori application template and start.
After this we will have various type of Fiori element-based Floorplan available but here we will choose List Report Object Page.
Next wizard will give you option to choose Data source and entity binding. Here I have used simple to use Northwind OData service.
Once your project added to your workspace. Open the application in terminal and install all the dependencies using – npm install command.
now you can preview your application. Right click on project select Preview application.
Then it will give you other run options you can select start.
Once application is open in new tab we can see initially there is not table column and filter fields available.
Lets create some annotation for table – right click on the project and select SAP Fiori tools- Guided Development.
This tool will give you lots of options to add annotations or extend your Fiori element app. For now we will choose add and edit table column option to add line items in our app.
After this wizard will give you to choose entity type for annotations. Select proper entity type and Properties for table.
Initially I have selected only three fields here in customer entity.
After adding line-item field press on insert Snippet button. This will add generated annotations to your local annotation file – webapp/annotations/annotation.xml
Similarly we will add some filter fields in filter bar.
On click of any row you will see object page section is currently blank. Lets add some details here using annotations.
To add object page details in guided development we have object page section.
Lets add some header facet first in object page.
Currently I have inserted one data point customer id in object page.
Now let’s add one section and some fields to it.
First option will be to add some fields to field group. Select entity type, Qualifier and Field properties.
Now if you refresh your app and will navigate to your object page section you will one section Contact has been added with some fields.
Similarly you can proceed with more complex scenarios.
Other than Fiori guided tool we have Application modeler as well for Fiori elements.
Application Modeler is helpful to add various features to Smart Controls in List Report and Object Page using various properties config. Lets explore this area.
First Go to application modeler area as seen above in screenshot then right click on project and click on Open Application Info.
Now this wizard will give you lots of option to play around with your application but we will select Open Page Map.
Page map section will give you to edit some features for your List report and Object page section.
Similarly config for Smart Table section.
As we have seen above Fiori Guided tool and Application modeler tool can fast track your Fiori element development and save lots of time. I hope you like above exploration on Fiori elements development tools on SAP BAS.
Keep Learning Keep Sharing !!!
Note – All the images and screenshot has been taken from my personal sap btp trail account and this is dummy project created for learning and knowledge sharing purpose which do not conflict with any thir party for copy rights of images and screenshots