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
3 – Right click on this new folder and choose New –> Create Annotation.
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
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
7 – Right click on the new annotation annotation1.xml and choose Open with –> Annotation Modeler
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
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
10 -Add a new UI.LineItem annotation term and click on OK
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
12 – Add a UI.DataField annotation term and click on OK
13 – Do the same for 4 times more. You should have now 5 UI.DataFields added to the UI.LineItem annotation term
14 – Select the first one and bind it to the ProductID value, then click on Apply
15 – Do the same for the other UI.DataFields assigning them to Name, Category, Description and Price
16 – If you start now the application, you will be able to see the ListReport page fully populated
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
18 – Choose first the ProductID field, then click on Add Path and specify Category as well. Then click on the Apply button
19 – Save the annotation
20 – Refresh or restart the application and you should be able to see two search fields just in the page header
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.
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
23 – This is how the final layout looks like with the new button
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!
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
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
Hello Simmaco,
Please find attached screen shot.
Thank you!
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
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!
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
Dear Simmaco,
I have added annotation1.xml file as u have shown. but it is giving following error as attached in screenshots
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
Thank U Simmaco.
I have solved the problem by creating annotation file locally..
Is it possible to have a column in the list report that shows an icon? If yes, how can I do this? Thx
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
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
Thanks - great blog !
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
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.
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.
Cheers,
Valter
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
Hi Sunil,
It might be the Web IDE plugin.
Try to add the entry manually in the manifest.json.
Thank you Valter
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
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:
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:
I changed from:
to:
and it worked.
Cheers,
Valter
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
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.
Hi,
Can someone tell me how to enable the "Export to Excel" button (Button isn't visible)?
Thanks!
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
I have the same issue, I can't find solutions to this problem anywhere. Did anyone find something?
After creating the app, I reloaded the OData service. (Overwriting the old) Then it worked. At least in my case.
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.
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
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?
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
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:
I have tried solution provide by Valte Arauj above. but it is not working .
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!