Skip to Content

ListReport

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
This part

How to use Smart Templates with SAP Web IDE – ListReport

How to use Smart Templates with SAP Web IDE – Object Page 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

Now that you have seen how to create a Smart Template application, let’s see how to configure its ListReport page with SAP Web IDE.

1 – Open your SAP Web IDE and go into your STDemo app


2 – Create a new folder named annotations under webapp

/wp-content/uploads/2016/04/15_929772.png

3 – Right click on this new folder and choose New –> Create Annotation.

/wp-content/uploads/2016/04/16_929773.png


4 – Create a new annotation by choosing its name (i.e. annotation1.xml) and by selecting the service data source (in this case GWSAMPLE_BASIC), then click on Next

/wp-content/uploads/2016/04/17_929780.png


5 – Click on Finish


6 – If you double click on the manifest.json file, you can check that now a new annotation is present in the app and that it has been tied to the metadata.xml file for the selected service

/wp-content/uploads/2016/04/19_929782.png


7 – Right click on the new annotation annotation1.xml and choose Open with –> Annotation Modeler

/wp-content/uploads/2016/04/20_929786.png


8 – The AM opens. Now we need to choose for which entity set we want to create an annotation. Since ProductSet is the entity set we have chosen as Data Binding OData collection, this is the one automatically proposed. Keep this choice and click on Annotate

/wp-content/uploads/2016/04/21_929799.png


9 – A new annotation is created for ProductSet. What we want is to display a list of all members belonging to this collection, so we need to add to this annotation file a new UI.LineItem annotation term: it will take care of displaying this list. Click on the “+” sign located on the Local Annotations row

/wp-content/uploads/2016/04/22_929800.png


10 -Add a new UI.LineItem annotation term and click on OK

/wp-content/uploads/2016/04/23_929807.png


11 – Once this term has been added, we need to define columns for this table. So click on the “+” sign on the UI.LineItem row

/wp-content/uploads/2016/04/24_929808.png


12 – Add a UI.DataField annotation term and click on OK

/wp-content/uploads/2016/04/25_929810.png


13 – Do the same for 4 times more. You should have now 5 UI.DataFields added to the UI.LineItem annotation term

/wp-content/uploads/2016/04/26_929811.png


14 – Select the first one and bind it to the ProductID value, then click on Apply

/wp-content/uploads/2016/04/27_929812.png


15 – Do the same for the other UI.DataFields assigning them to Name, Category, Description and Price

/wp-content/uploads/2016/04/28_929816.png


16 – If you start now the application, you will be able to see the ListReport page fully populated

/wp-content/uploads/2016/04/29_929817.png


17 – We have not finished yet: we would like to place a filter bar on top of this UI.LineItem component being able to filter by ProductID and Category. Let’s go again on the AM and click on the “+” sign aside the Local Annotations row. Select the UI.SelectionFields annotation term and click on OK

/wp-content/uploads/2016/04/30_929818.png


18 – Choose first the ProductID field, then click on Add Path and specify Category as well. Then click on the Apply button

/wp-content/uploads/2016/04/31_929822.png


19 – Save the annotation

/wp-content/uploads/2016/04/32_929823.png


20 – Refresh or restart the application and you should be able to see two search fields just in the page header

/wp-content/uploads/2016/04/33_929824.png


21 – As last step in this chapter, we would like to add a button on top of the UI.LineItem object. We would like, with this button, to execute some special Function Import coming from the backend. These functions, if present, are listed in the metadata.xml file. Click on the “+” sign on the UI.LineItem annotation and add a new UI.DataFieldForAction component.

/wp-content/uploads/2016/04/34_929825.png


22 – Define a label for this component and select as action the RegenerateAllData function; then click on Apply. As you can see here this is a special function which has its specification in the metadata.xml file. You just need a button to call it. This function is executed on the backend service.


NOTE: Pay attention that in this case this function does nothing here: it’s just an example to show how you can attach a button which triggers an action on the backend service

/wp-content/uploads/2016/04/35_929826.png


23 – This is how the final layout looks like with the new button

/wp-content/uploads/2016/04/36_929827.png

Let’s continue with the next part where we’ll learn how to add a Object Page to our application which is displayed when you click on one of the ListReport’s rows: How to use Smart Templates with SAP Web IDE – Object Page!

To report this post you need to login first.

29 Comments

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

  1. sudhanshu sharma

    Thanks for this wonderful post ! Im following these steps with same standard oData service but having trouble while adding a button. Actually im not able to see action “RegenerateAllData” in the drop down even though its available in metadata.xml. Could you please advise on this.

    Thanks

    (0) 
    1. SIMMACO FERRIERO Post author

      Hi Sudhanshu,

      could you please attach here a screen shot of your DataFieldForAction configuration, where you say that your Dropdown box is empty?

      Regards,

      Simmaco

      (0) 
        1. SIMMACO FERRIERO Post author

          Hi Sudhanshu,

          it seems that your application looks different from mine: you have several annotation files and in this annotation you are using content from another. Not sure if this can be do problem. In order to investigate deeper I would need to have you app. Is it ok for you to send me it privately? Or maybe you can try to follow exactly my process and see if you have the same.

          Regards,

          Simmaco

          (0) 
          1. sudhanshu sharma

            Hello Simmaco,

            That’s absolutely correct. I deleted two auto created Annotations and it showed me all Function imports for this service. Thanks again !

            Also, can i use only function import in DataFieldForAction or any other CRUD operation.

            please advise me on this.

            Thanks!

            (0) 
            1. Carlos Roggan

              Hi Sudhanshu,

              in OData V2, an action can only be a function import.

              Furthermore, for other operations like CREATE or UPDATE, you would need the payload to be sent, and for DELETE you need to address one specific entry.

              It has a different semantic than the function import

              So I guess the answer is no…

              Cheers,

              Carlos

              (1) 
    1. SIMMACO FERRIERO Post author

      Hi,

      yes this is a know issue with the latest version of SAP Web IDE. To workaround it you can try to add manually the annotation file in the manifest.json file.

      In this way it should work.

      Regards,

      Simmaco

      (0) 
  2. Carlos Roggan

    Hi Simmaco,

    really good contributions, these posts – just as I like them to be.

    The only thing I would ask for….:

    Please keep on publishing 😉

    Carlos

    (1) 
  3. Timothy Muchena

    Hi

    Thanks for the amazing blog. I tried using annotations(created in backend) with a smart table on type Analytical table because I want the table to display subtotals but i got error Select at least one column to perform the search which I haven’t been able to resolve. I was wondering if you could check out this post that I created for . Maybe you might have an idea of what I’m doing wrong.

    Kind regards

    (0) 
  4. T.R. DIVYA

    Hi Simmaco,

    Its a very helpful blog.
    I have performed all the steps as mentioned.
    I have a small obstacle in this. When I added the DataFieldForAction annotation with label and action, I got a button but without text on it.

    Where could I have gone wrong?

    Regards,
    Divya

    (0) 
  5. TAPAS SANTRA

    Hi Simmaco,

    Thanks for sharing such an excellent use case of UI Annotations.

    Unfortunately when I am trying to annotate the local annotation file the “Local Annotation” node is not appearing. The pane displays a message that the OData entity is not annotated.

    I am using OData Service GWSAMPLE_BASIC and I have created the local annotation file from “New -> Create Annotation” menu option. manifest.json file is also adjusted automatically.

    Can you please guide me on this?

    Thanks.
    Tapas.

    (0) 
    1. Valter Araujo

      Hi Tapas,

      It happened the same in my Web IDE (Version: 170119) which by the way has no option for “Create Annotation”, instead there is NEW > “Annotation File”.

      It worked to me when I deleted the project and start from scratch. When I was creating the Annotation file using the wizard I named as “annotations”, so the file is annotations.xml. And my manifest.json is below. After that I was able to “annotate” the ProductSet.

      		"dataSources": {
      			"mainService": {
      				"uri": "/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",
      				"type": "OData",
      				"settings": {
      					"annotations": ["localAnnotations"],
      					"localUri": "localService/metadata.xml"
      				}
      			},
      			"localAnnotations": {
      				"uri": "annotations/annotations.xml",
      				"type": "ODataAnnotation",
      				"settings": {
      					"localUri": "annotations/annotations.xml"
      				}
      			}

      Cheers,
      Valter

      (0) 
      1. Sunil Ghatage

        Hi Valter,

        I am also facing the same issue, I tried deleting the project number of times but every time I am getting same issue. What could be the reason?

        Thanks,

        Sunil

        (0) 
          1. Sunil Ghatage

            Hi All,

            There is one more reason why we can get this issue, and that is because of schema namespace value in the metadata.xml file. In my case since we were using our own registered namespace the schema namespace value has “/” symbol in it. When I removed this “/” from namespace value, it started working.

            Regards,

            Sunil Ghatage

            (0) 
  6. Valter Araujo

    Hi Simmaco,

    The “Regenate All” is not showing when I execute the app. The function import is listed in the action box at the AM, the code is annotated as you can see below but the “action” does not appear in the top of the table.

    I am using the latest Web IDE (Version: 170119).

    Is there anything I am missing?

    Below is my annotation:

    						<Record Type="UI.DataField">
    							<PropertyValue Property="Value" Path="Price"/>
    						</Record>
    						<Record Type="UI.DataFieldForAction">
    							<PropertyValue Property="Action" String="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/RegenerateAllData"/>
    							<PropertyValue Property="Label" String="{@i18n&gt;@REGENERATE_ALL}"/>
    							<Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
    						</Record>
    					</Collection>

    Very helpful blog, congrats!

    Thanks,
    Valter

    Edited:
    I found the problem. There is an issue in the SAP Web IDE about the i18n.

    i18n.properties:

    @REGENERATE_ALL=Regenerate all

    I changed from: 

    <PropertyValue Property="Label" String="{@i18n&gt;@REGENERATE_ALL}"/>

    to:

    <PropertyValue Property="Label" String="Regenerate All"/>

    and it worked.

    Cheers,
    Valter

    (0) 
  7. Wenshan Liu

    Hi,

    I’m using HCP Canary (classic HCP). Generate with smart template ‘List Report Application’. Then when I try to open annotation.xml with Annotation Modeler, I got an error saying ‘Odata metadata can’t be loaded. Please check the OData service URI in the app descriptor (manifest.json file) of this pro.’ But I didn’t change anything after template generation. Not sure what need to adjust.

    In the console, there is a message as following:

    (destination) Destination ‘webide_di’ is either not a Web IDE destination or not valid because the WebIDEUsage or URL properties are missing in the destination settings.
    Check your destination settings in the SAP Cloud Platform Cockpit.

    Can someone help on what values should be set on the destination webide_di in HCP?

    Thanks!

    Wenshan

    (0) 
    1. Erik Hoven

      I have the same issue….

       

      OData metadata can’t be loaded. Please check the OData Service URI in the app descriptor (manifest.json file) of this project.

      (0) 
  8. Amit Singh

    Hi,

    I am not able to create annotation file.

    “Metadata cannot be loaded” error is coming while creating new annotation file.

     

    Please help.

     

    Thanks,

    Amit

    (1) 
  9. Thorsten Pache

    Hi,

    what can i do, that the list in the report is shown from start automatically?

    Without having to press the “GO” key.

    Best Regards, Thorsten.

     

    (0) 
  10. Raghuram Nagandla

    Dear Team,

    I am not able to create annotation file. It says “metadata not loaded”.

    I am trying to follow the steps given in the blog.

    Can someone provide steps to add manually or resolve the issue.

    Any how this blog is good enough.

    Thx,

    Raghu

    (0) 

Leave a Reply