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.

Prerequisites

Trial account of SAP BTP

SAP Business Application Studio Setup

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.

I have inserted one customer id filter field.

Now after refresh my application will look like this.

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.

on click of any row on list now you will see some data coming in object page header. Similarly, you can add more data points based on your requirements.

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.

Click next button to add section details. But before that you should press insert snippet button since this code will be used in next part of wizard. Section or (Facets) will require qualifier path of  field groups.

Finally insert this code as well to you annotation using insert snippet button.

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 –

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.

Click on Pencil button of list report and it will give you option to edit features for List Page for each area like – Filter bar, Table, Tool bar and columns.
Below is config options for smart filter bar.

Similarly config for Smart Table section.

Conclusion

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