Customizing Fiori Elements Applications in SAP Business Application Studio

[yasasriakkireddy9719]

Hello Everyone!

In this blog post I am going to demonstrate how can we customize the Fiori elements application in Business application Studio using Guided development tool.

Firstly what are SAP Fiori Elements:

1. SAP Fiori Elements is a framework for generating user interfaces at run time using metadata annotations and provided templates of mostly used application templates.


2. SAP Fiori elements uses annotations that add semantics and structures to the data provided by the user.

SAP Fiori Elements development:

In SAP Business Application Studio, create a dev space and open new project from template.

Go to SAP Fiori Application template.

Select the type of floor plan as Overview Page.

 

Here, I have taken my system and service details of SAP system.

 

Give the required fields, the entity field of particular service.

Fill all the mandatory fields.

Now, go to your webapp folder and check the annotation.xml file where you can see the generated code for your floor plan.

 

 

Right click on the application and select preview application you can check the output of your code.

Now, comes the customization of the floor plan where I want to add a list card to the overview page.

Go to View ànd select Find Command.

Check for the Open Guided Development command.

Here, check for the overview page and select the list card.

Check the steps to do and click on Start Guide.

 

 

Name all the mandatory parameters and click on apply button, this will add the changes to your code.

 

Here, you can see the details of your card in OverviewPage.json file.

 

Go to run configurations and add this app configuration and bind the services.

Click on Run.

Find the generated output with the list card in the overview page.

Here, I have also added another table card with the same data.

 

We can also change the layouts of the screen where I have added flexible column layout for the below screen.

Here comes the output of it.

 

You can also play around with all the other floor plans using this guided development tool.

Thank you!!

Happy Learning…