Configure Object Pages Using SAP Fiori Tools
- How to configure an object page using annotations
- How to add a new object page to your project
Conrad BernalApril 20, 2022Prerequisites
- You should have a preview of your app running with either real or mock data. Your list report should be configured as instructed in Configure a List Report Page using SAP Fiori Tools.
Now that you have created a list report page featuring a list of items, your end users need to be able to drill down for more information on a single item.
In this tutorial, you are going to add a supplemental data to the object page that accompanies your list report. This way your users can learn more about an item in the list. The object page contains some preconfigured annotations that you will modify to meet your end users’ needs. These modifications include adding a section for technical data, as well as a chart and a table. After that, you will add another object page so that your end-users can drill down for even more information pertaining to the sale of the item.
- Step 2
Now that you have edited the
FieldGroup, you need to reference it to display it in a section. To do so, you can use the SAP Fiori tools - XML Annotation Language Server to add the new annotation termUI.Facets.-
In your local annotation file
annotation.xml, for the targetSAP.SEPMRA_C_PD_ProductType, insert a new line after the end of the</Annotation>tag of the annotation termUI.SelectionFields.
To accelerate the coding required here, use the Code Complete feature: Press CMD/Ctrl + Space and then choose
UI.Facets.Hint: After pressing CMD/Ctrl + Space, you can also search for your desired element, rather than scrolling through the entire list. For example, type
Fac(as in,UI.Facets) and this will narrow down the list of items for you.
-
At this point, you have inserted the
Annotationtag and it already contains theCollectiontag. Your cursor should be within<Annotation Term="UI.Facets" >. Press Tab to move your cursor under the<Collection>tag.
Hint: Take advantage of this procedure: pressing CMD/Ctrl + Space, making your selection, and then using the Tab key. This can help minimize the time you spend adding/editing annotations in the code editor.
-
You need to refer to the
UI.FieldGroup#TechnicalDatathat you copied from the backend in the previous step in theUI.Facetyou have created here. To do that, you will create a new record type calledUI.ReferenceFacet.Ensure your cursor is between the lines of the
<Collection>and</Collection>tags. Press CMD/Ctrl + Space and then selectRecord (full) "ReferenceFacet". -
You need to assign the target of this
ReferenceFacet. Press CMD/Ctrl + Space again and select@UI.FieldGroup#TechnicalData.Press Tab to jump to the Property label. Enter the string
Technical Data.Press Tab again to jump to the Property id. Enter the string
TechData.Your annotation file should look like the image below:
-
Save
annotation.xmland take a look at your running app. Select a row in the list to open the object page. You should see a new section in the object page showing the technical data of the selected product.
-
- Step 3
Next, you are going to add a chart to this object page to show users the monthly revenue of their selected product.
-
Within the code block of the annotation term
UI.Facetsfor the targetSAP.SEPMRA_C_PD_ProductType, find the end tag</Record>ofUI.ReferenceFacetand hitEnter.You need to insert a new
UI.ReferenceFacetto include theUI.Chartannotation term ofto_productSalesData. -
Just as you did in the previous step, use CMD/Ctrl + Space and select
<Record(full) : "ReferenceFacet:>. Your cursor will be in theAnnotationPath.Use CMD/Ctrl + Space and select
to_productSalesData, then enter/and select@UI.Chart.Press Tab to jump to the property label. Enter the string
Monthly Revenue.Press Tab again to jump to the property id. Enter the string
MonthRev.Your annotation file should look like the image below:
-
Save the file
annotation.xmland take a look at your running app. You should see a new section in the object page showing the monthly revenue chart of the product.
If your current product does not show any data, refresh the page. If data is still not displayed, go back to the list report page and select a different product.
-
- Step 4
Next, you are going to add a section to your object page that shows the sales history of an item. This step involves the setup in adding
UI.LineItem. In the next step, you will add theUI.Facetthat makes it visible.-
Insert a new line after the end tag
</Annotations>for the targetSAP.SEPMRA_C_PD_ProductType. The line looks like so:XMLCopy<Annotations Target="SAP.SEPMRA_C_PD_ProductType"> ..... </Annotations> -
Add a new
<Annotations>tag for the targetSAP.SEPMRA_C_PD_ProductSalesDataType. You can use CMD/Ctrl + Space and select<Annotations>.
In the next step, you will refer to this
UI.LineItemfrom the earlier created Facet for the current object page -
Add the annotation term
UI.LineItemusing CMD/Ctrl + Space. Press Tab to move your cursor to the line below<Collection>. Then, using CMD/Ctrl + Space again, add a column to the table (Record "DataField"). -
Press CMD/Ctrl + Space and add a
Path. EnterIDfor thisPath.Insert a new line after the end of
<PropertyValue Property="Value" Path="ID"/>Use CMD/Ctrl + Space to add a Label property. Enter
Sales IDfor the String. -
Now you are going to add another column.
Navigate to the line below the
</Record>you just created. Again, use CMD/Ctrl + Space and selectRecord "DataField"and add one property – Value (using CMD/Ctrl + Space). Assign the Path asDeliveryCalendarMonthT.
-
Save the file
anootation.xml.
-
- Step 5
Now you are going to add the actual section that displays the table of sales data to your object page. This will allow users to see instances of when their selected item has sold.
-
Within the code block of the annotation term
UI.Facetsof the targetSAP.SEPMRA_C_PD_ProductType, find the end tag</Record>of typeUI.ReferenceFacetand hit Enter.You need to insert a new
UI.ReferenceFacetto include theUI.LineItemannotation term ofto_productSalesDatafrom the previous step. -
In the new line, use CMD/Ctrl + Space and select
<Record(full) : "ReferenceFacet:>. Your cursor will move toAnnotationPath. Use CMD/Ctrl + Space and selectto_productSalesData, then enter/and select@UI.LineItem.Press Tab to go to the property label. Press CMD/Ctrl + Space and select String, then enter the string
Sales Data.Press Tab to go to the property id. Press CMD/Ctrl + Space and select String, then enter the string
SalesData.
-
Save the file
annotation.xmland check your running app. You should see a table with line items indicating when the selected item has sold.
If your current product does not show any data, refresh the page. If data is still not displayed, go back to the list report page and select a different product.
-
- Step 6
Next, you are going to create a second object page for your users that opens when an entry from the Sales Data list is clicked. To do this, you are going to use the Page Map . It provides a visual representation of an application’s pages, navigations, and service entities that it uses. You can use it to add new navigations and pages, delete pages, and navigate to corresponding editing tools.
Like the other tools, you access it through the Command Palette.
-
Press CMD/CTRL + Shift + P and type
Page Mapand select Fiori: Show Page Map.
This opens the visual representation of your application pages. To add a new object page, click on the + on the first object page.
-
From the Navigation dropdown, select the
to_ProductSalesData (SEPMRA_C_PD_ProductSalesData)entry and click Add.
Switch back to your running application. Once your app has refreshed, click on the arrow next to an entry in the Sales Data table, you will be taken a new object page.
-