Skip to Content
Author's profile photo SIMMACO FERRIERO

How to use Smart Templates with SAP Web IDE – ListReport

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!

Assigned Tags

      33 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo sudhanshu sharma
      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

      Author's profile photo SIMMACO FERRIERO
      SIMMACO FERRIERO
      Blog 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

      Author's profile photo sudhanshu sharma
      sudhanshu sharma

      Hello Simmaco,

      Please find attached screen shot.

      IMG.png

      Thank you!

      Author's profile photo SIMMACO FERRIERO
      SIMMACO FERRIERO
      Blog 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

      Author's profile photo sudhanshu sharma
      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!

      Author's profile photo Carlos Roggan
      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

      Author's profile photo Dhammadeep Pathade
      Dhammadeep Pathade

      Dear Simmaco,

      I have added annotation1.xml file as u have shown. but it is giving following error as attached in screenshots16-Jun-16 4-56-20 PM.png

      Author's profile photo SIMMACO FERRIERO
      SIMMACO FERRIERO
      Blog 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

      Author's profile photo Dhammadeep Pathade
      Dhammadeep Pathade

      Thank U Simmaco.

      I have solved the problem by creating annotation file locally..

      Author's profile photo Hans Christian Gaedke
      Hans Christian Gaedke

      Is it possible to have a column in the list report that shows an icon? If yes, how can I do this? Thx

      Author's profile photo Carlos Roggan
      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

      Author's profile photo Timothy Muchena
      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

      Author's profile photo Erik Hoven
      Erik Hoven

      Thanks - great blog !

      Author's profile photo T.R. Divya
      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

      Author's profile photo TAPAS SANTRA
      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.

      Author's profile photo Valter Araújo
      Valter Araújo

      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

      Author's profile photo Sunil Ghatage
      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

      Author's profile photo Valter Araújo
      Valter Araújo

      Hi Sunil,

      It might be the Web IDE plugin.

      Try to add the entry manually in the manifest.json.

       

      Author's profile photo Sunil Ghatage
      Sunil Ghatage

      Thank you Valter

      Author's profile photo Sunil Ghatage
      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

      Author's profile photo Valter Araújo
      Valter Araújo

      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

      Author's profile photo Wenshan Liu
      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

      Author's profile photo Erik Hoven
      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.

      Author's profile photo Anthony Tello
      Anthony Tello

      Hi,

      Can someone tell me how to enable the "Export to Excel"  button (Button isn't visible)?

      Thanks!

      Author's profile photo Amit Singh
      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

      Author's profile photo Former Member
      Former Member

      I have the same issue, I can't find solutions to this problem anywhere. Did anyone find something?

      Author's profile photo Thorsten Pache
      Thorsten Pache

      After creating the app, I reloaded the OData service. (Overwriting the old) Then it worked. At least in my case.

       

       

      Author's profile photo Thorsten Pache
      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.

       

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      Hi,

      I have tried creating the annotation file, but when I try to open it, I have the following message:

       

      Do you have any idea why?

      Author's profile photo Roxana Tudor
      Roxana Tudor

      Hi,

      I managed to solve the issue "Metadata cannot be loaded." After creating the Overview Project, you need to modify the manifest.json file as follows:

      in the dataSources section you need to delete "/destination/" from the "uri" field and add the "odataVersion": "2.0" to the settings. After that, try to create a new annotation file and you shouldn't get the error anymore.

      Before:

      After:

      Cheers,

      Roxana

      Author's profile photo Former Member
      Former Member

      Hi Simmaco,

      Thanks for this wonderful blog.

      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.

      Below is the code:

      <Annotation Term="UI.LineItem">
      					<Collection>
      						<Record Type="UI.DataField">
      							<PropertyValue Property="Value" Path="ProductID"/>
      						</Record>
      						<Record Type="UI.DataField">
      							<PropertyValue Property="Value" Path="Name"/>
      						</Record>
      						<Record Type="UI.DataField">
      							<PropertyValue Property="Value" Path="Category"/>
      						</Record>
      						<Record Type="UI.DataField">
      							<PropertyValue Property="Value" Path="Description"/>
      						</Record>
      						<Record Type="UI.DataField">
      							<PropertyValue Property="Value" Path="Price"/>
      						</Record>
      						<Record Type="UI.DataFieldForAction">
      							<PropertyValue Property="Action" String="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/RegenerateAllData"/>
      							<Annotation Term="Common.Label" String="Regenerate All "/>
      						</Record>
      					</Collection>
      				</Annotation>

       

      I have tried solution provide by Valte Arauj above. but it is not working .

      Author's profile photo IGOR DÍEZ TEJADA
      IGOR DÍEZ TEJADA

      Hi!! Could you tell me what did you do to enable the radiobuttons in each line of the table? i'm following your guide step by step but i can't achieve it...

       

      Thank you!