Develop Fiori List Report and Object Page – Fiori Elements – Using Northwind odata service and local annotations
To develop fiori application using smart templates having odata service as backend.
You may have annotations on backend(preferably CDS , gateway project etc) or in frontend UI project.
Sap Web IDE comprises of several features and plugins.
With the help of Annotation Modeler tool, one can add/modify annotations in UI project.
Let’s use northwind odata service which does contain any pre-set annotations from backend to create Fiori list report application.
Sign up for a free trial account on SAP Cloud Platform
Create a Destination on SAP Cloud Platform
Open SAP WEB IDE
- In the navigation pane (left side), choose Services.
- On the Services pane, search for “web ide”.
- select SAP Web IDE tile, In the “SAP Web IDE Overview” page click on link Open SAP Web IDE.
Create List Report Application in SAP WEB IDE
- In the menu bar, select File > New > Project from Template.
- Under Template selection, select “List Report Application” and click next
Enter Basic Information details as shown below and click on next
Under Sources (left side) select service URL and choose “Northwind Odata Service” as a system to connect to a required service.
Enter relative URL “V2/northwind/northwind.svc” in the text field shown below.
Click on Test button to check whether service is available. If you are able to see data in the Service Table, then connection to service is successful, click on Next.
Northwind odata service does not contain any annotations from backend. So the Table is empty. Click on Next
Choose Odata Collection and Navigation as shown below and click on Finish.
New smart template project “orderSmartApp” is created
Project files and structure is available under WEB IDE workspace.
Create Annotation File
- Right click on webapp folder in the project, select New à Folder
Enter folder name annotation click OK.
- Right click on annotation folder in the project, select Annotation File
- Check file name and service is already filled. Click Next
- Check whether project folder structure is as shown below.
- Open annotation.xml file, Double click on it
annotation.xml file opens up with Annotation Modeler UI.
At any point of time, you can check xml code by switching view to code editor which is available in footer bar.
Add annotations using Annotation modeller
List report page contains following areas.
- Header Title
- Header content – smart filter
- Smart table
- Footer toolbar
To add Smart table using annotations. Choose “Order” in Odata Entity Type dropdown and click on Annotate Button.
Select “Annotations” row in table and click on + (plus button) shown under “Actions” column
- Pop up opens up listing applicable annotations. Select LineItem (represents smart table in application) and click OK, UI.LineItem annotation is added in the Table
To show initially visible columns in smart table, add DataField as a child to UI.lineItem.
Select UI.LineItem row –> click (+) button and select Datafield under records –> OK
This resolves to first column in LRP app smart table.
Select OrderId in dropdown for UI.DataField value.
Repeat adding UI.DataField for additional columns in smart table.
To add Smart Filter using annotations.
Select “Annotations” row in table and click on + (plus button) shown under “Actions” column. Select “selectionFields” –> press OK
Select UI.selectionFields row and click on (+) button. select item and press OK
Add more Item to add selection fields as required
Run the Application
Select project root folder “orderSmartApp” and click on “Run” icon as shown below.
Click on GO button. Application shows list of orders.
Select any order in table, application navigates to detail page of an order(also known as Object page).
Object page contains three sections i.e snapping header, navigation bar and content area.
Now, let’s add some more annotations to Odata service to see order details in object page
Go to Annotaion Modeler, add UI.DataPoint annotation to create snapping header for Order ID, customer Id and Order Date
Enter value for Qualifier, title and value to show Order ID in header section of object page. Repeat adding UI.DataPoint for customer id and order date as shown in below snapshot.
Run application (step 7) and click on any order in list report. Application navigates to detail page with header section containing customer Id, order id and order date
Lets add annotations to create content area containing order and shipper information.
Add UI.FieldGroup for order information having fields(order id, order date and required date)
Add UI.FieldGroup for shipper information having fields(shipper name, address, city country)
Provide Qualifier “OrderDetails” and “ShipmentDetails”.
Click (+) on each UI.DataField row and add Label.
Enter value for Label.
Select value for all UI.DataField value as shown in below snapshot .
To create navigation area of object page and add content created in above step 9. Add UI.Facet and its children UI.ReferenceFacet as shown below
Run the application (step 7) . List Report and Object Page application is ready.
For more reference on other possible features using annotations, Please refer to standard documentation from SAP