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

/wp-content/uploads/2016/04/38_929867.png


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

/wp-content/uploads/2016/04/39_929868.png


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

/wp-content/uploads/2016/04/40_929869.png


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

/wp-content/uploads/2016/04/41_929873.png


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

/wp-content/uploads/2016/04/42_929874.png


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

/wp-content/uploads/2016/04/43_929875.png


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

/wp-content/uploads/2016/04/44_929879.png


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

/wp-content/uploads/2016/04/45_929880.png


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

/wp-content/uploads/2016/04/46_929881.png


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

/wp-content/uploads/2016/04/47_929885.png


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

/wp-content/uploads/2016/04/48_929886.png


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

/wp-content/uploads/2016/04/49_929887.png


14 – Add 4 UI.DataFields to this group

/wp-content/uploads/2016/04/50_929898.png


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

/wp-content/uploads/2016/04/52_929899.png


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

/wp-content/uploads/2016/04/53_929900.png


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

/wp-content/uploads/2016/04/54_929901.png


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

/wp-content/uploads/2016/04/55_929902.png


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.

/wp-content/uploads/2016/04/56_929915.png


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

/wp-content/uploads/2016/04/57_929916.png


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

/wp-content/uploads/2016/04/58_929918.png


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

/wp-content/uploads/2016/04/59_929919.png


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

/wp-content/uploads/2016/04/60_929920.png


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

/wp-content/uploads/2016/04/61_929925.png


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

/wp-content/uploads/2016/04/62_929926.png


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

/wp-content/uploads/2016/04/63_929939.png


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

/wp-content/uploads/2016/04/64_929940.png


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).

/wp-content/uploads/2016/04/65_929941.png


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

/wp-content/uploads/2016/04/05_929954.png

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>








/wp-content/uploads/2016/04/71_930005.png

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

/wp-content/uploads/2016/04/72_930006.png


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!

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Andrea Molina

    Hello SIMMACO FERRIERO

    I wish I had seen this blog post before going through all of this in the hard way – The bets to learn though.  I’m looking for a reference to add the rating column to the first screen table. Any idea how to do that?

    Thanks for you post 😀

    Andrea

    (0) 
    1. SIMMACO FERRIERO Post author

      Thanks Andrea, yes there is a way for doing it. I’m going to publish my last part of this blog where, as extensibility concepts, I explain how to do it!

      Stay tuned! It will be ready in the next few days.

      Regards,

      Simmaco

      (0) 
  2. Valentino Paderni

    Hello Simmaco, I follow step by step your series of blog which help me a lot to get inside the smarte template world. Anyway the status and indentification annotation are not working for me when switch in edit mode. All filed become editable and mandatory.

    are enough thos type of annotation or something else is required somewhere?

    Thank you

    Valentino

    (0) 
  3. Grace Zou

    Hi Simmaco,

    Thanks for your posting, it helps me a lot. I have been researching about smart template to refactor fact sheet. And I have two questions for now:

    1.If it is possible to build a “object page” app of smart template individually rather than a combination of “list report” and “object page”?

    2. How could I add a table section into the Object Page?

    Thanks a lot.
    Regards,
    Grace

    (0) 

Leave a Reply