How to use Smart Templates with SAP Web IDE - Object Page

[former_member125464]

Object Page

For space requirements this blog has been split in 5 parts:

Link	Content
How to use Smart Templates with SAP Web IDE - Introduction	How to use Smart Templates with SAP Web IDE - Introduction
How to use Smart Templates with SAP Web IDE - Creation	How to use Smart Templates with SAP Web IDE - Creation
How to use Smart Templates with SAP Web IDE - ListReport	How to use Smart Templates with SAP Web IDE - ListReport
This part	How to use Smart Templates with SAP Web IDE - Object Page
How to use Smart Templates with SAP Web IDE - Extensibility	How to use Smart Templates with SAP Web IDE - Extensibility

The ListReport page has been configured, now let's do the same for the Object Page which displays the details for any row clicked in the ListReport. At moment, if you run the application and click on one of the products, you just get a pretty blank page.

1 - In SAP Web IDE reopen the annotation1.xml file with the AM

2 - So what we can do is to start adding a header to this Object Page. The right annotation for this is the UI.HeaderInfo annotation term. Click on the "+" sign on the root item in the AM and add a UI.HeaderInfo

3 - First of all, enter the singular an plural names for the main entity set of your application. In this case we are working with products so they will be Product and Products

4 - Click on the "+" sign on the UI.HeaderInfo annotation term, select to have the description in the header as well and click on OK. Then save the annotation file

5 - When you start the application you see the header we have just specified

6 - And here you can understand where the singular and plural names for the main entity collection are displayed in the application

7 - We would like now to show also some numeric data just below the header in the Object Page. For this scope you can use a special annotation term called UI.DataPoint: this allows to display a numaric value, for example, and to some extents, to do even some calculations on it. Here, to keep things simple, we want just to show the product's Price. Let's add a new UI.DataPoint annotation in the AM

8 - Just type in the string Price for the Title and choose the field Price for the Value then click on Apply

9 - Save the annotation and refresh the application. You can see that the price is displayed just below the header

10 - You can try to add a new UI.DataPoint to the annotation file to display for example the Tax Tarif Code. This time since you have two UI.DataPoints, in order for them to be correctly identified you need to specify also a Qualifier in at least one of the UI.DataPoint objects. Let's do it here for the Tax Tarif Code and click on Apply

11 - The new UI.DataPoint has been added and displayed

12 - What about if I wanted to display some other numeric values all grouped together as if it was a single DataPoint? This is not possible just with UI.DataPoint components: we need to use a different approach. We could create a UI.FieldGroup to group them together and then display this UI.FieldGroup on the ObjectPage by using another annotation term called UI.HeaderFacets. We are going to see this in the next steps

13 - Add a new UI.FieldGroup object to the annotation file

14 - Add 4 UI.DataFields to this group

15 - Specify for the DataFields the following values: WeightMeasure,Width,Height,Depth. Again since there will be other UI.FieldGroups in this annotation file, let's assign a Qualifier to this new group (i.e. FGTechData). Apply and save the file

16 - Now that the UI.FieldGroup is in place, we can add a UI.HeaderFacets component to collect these three things together: the UI.FieldGroup and the two UI.DataPoints. Let's add a new UI.HeaderFacets annotation term and then 3 UI.ReferenceFacets to it

17 - The 3 UI.ReferenceFacets, once added, should look like in this picture. We need to specify a Label, an ID and a Target Element for all of them

18 - Finally, after saving the annotation file and refreshing the application, you can see the 3 new objects correctly displayed

19 - Let me introduce now another annotation term: the UI.Identification. This term is used to collect together all the fields that are in charge of identifying a record in the collection. In other words, they could be the mandatory fields you need to fill in order to save a record in that collection. For example, for our Product entity set, they could be ProductID, Name, Category, TypeCode, Description and Price. They could be enough for inserting a new product in the ProductSet. We want to use this annotation term just below the header in the Object Page so that when we create a new record or edit an existing one, its fields are used as data entry fields. You will better understand with this example.

Let's add a UI.Identification term to the annotation file.

20 - Inside this term, add for example 6 UI.DataFields, one for each of the fields mentioned above

21 - Before we use this new term we would like to show for example some other information related to the status of the record. For this we have a special annotation term named UI.StatusInfo which is normally used to show information like the status of an order, of a product or of any other entity in the application. In this case, just for sake of simplicity, we will use it to show the creation date of a product and the last time it was changed.

Both, the UI.Identification and the UI.StatusInfo will be displayed just below the UI.HeaderInfo.

Add the UI.StatusInfo term with two UI.DataFields inside and assign them to the CreatedAt and ChangedAt fields

22 - Now that we have the UI.Identification and the UI.StatusInfo we can put them together in a new annotation term which is the UI.CollectionFacet. First add a UI.Facet term to the annotation, then, by clicking on the "+" sign on its row, add a UI.CollectionFacet to it

Just inside this UI.CollectionFacet let's add 2 UI.ReferenceFacets

23 - Define a label for the UI.CollectionFacet and assign the two UI.ReferenceFacets to the UI.Identification and UI.StatusInfo

24 - Refreshing the application you will see the new terms correctly displayed and if you go in Edit mode the fields that can be editable will be opened

25 - There's just one step missing in our tour on the annotation files. We want to show just below the UI.CollectionFacet another UI.ReferenceFacet linked to some Sales Data of the chosen product. This is feasible of course, but we need to access the entity set of Sales Order Line Items in order to display such data. Go back on the AM, select the SalesOrderLineItemSet and click on Annotate

26 - Add a UI.LineItem annotation term and configure it to display ProductID, NetAmount, TaxAmount and GrossAmount

27 - Go back to the ProductSet and add a new UI.ReferenceFacet in the UI.Facet already present. We need to add it outside the UI.CollectionFacet, so we need to click on the "+" sign at level of the UI.Facets term

28 - Configure this ReferenceFacet with the following parameters:

Parameter	Value
Label	Sales Data
ID	RFSalesData
Navigate to	ToSalesOrderLineItems
Target Element	@UI.LineItem

Remove all the flags from the checkboxes.

As you can see here we are navigating to another entity set (ToSalesOrderLineItems) binding this object to the only one element present there (UI.LineItem).

29 - Finally, save the annotation file and refresh your app: sales data are now displayed in the app

OPTIONAL STEPS: Display a product picture

So far we have never edited the annotation.xml file by using the XML editor, we always used the AM. Well here, as an optional part, I can show you how to display a product's picture in the UI.HeaderInfo term. This is easy if you already have a field in your service providing an URL to the image. You just need to bind this field to the ImageUrl parameter of the UI.HeaderInfo.

Unfortunately we don't have such field for the GWSAMPLE_BASIC service we are using here, so we need to use a workaround: we can collect all the pictures in one folder named images; each picture will have the same name of the associated product. Then from the UI.HeaderInfo/ImageUrl parameter we will point to the related picture in the webapp/images path.

In order to do this we need to manually edit the association1.xml file.

Here are all the required steps:

30 - Import the images folder coming with the application you can clone from the Github repository into your application

31 - Double click on the annotation1.xml file in your app, in order to open it with the XML editor. From the Edit menu click on Beautify in order to properly format the XML code

32 - Find the string

<PropertyValue Property="ImageUrl" String=""/>

and replace it with the following code

<PropertyValue Property="ImageUrl">

  <Apply Function="odata.concat">

  <String>/webapp/images/</String>

  <Path>ProductID</Path>

  <String>.jpg</String>

  </Apply>

</PropertyValue>

33 - Save the annotation file and refresh the app: the image is correctly displayed in the UI.HeaderInfo of the Object Page

In the final part of this blog where you will understand how to extend this application to add more nice features to it! If you want you can continue here!