Skip to Content
Author's profile photo Virendra Kumar Soni

Adding Controls on Smart template using Annotations…SAP WEB IDE

Hi  all

i have created a blog

Create Smart Template Project………SAP WEB IDE

Now in Smart template if we want to add some controls like Data Field,Line item , Data point , presentation Variant etc

we don’t need to write code on JS , XML , HTML etc we can add controls by using Annotation file .

STEP 1.

/wp-content/uploads/2016/01/16_876191.png

open Annotation folder => right click on annotation.xml

here you can open 3 way.

code editor – you to wirte code your self .which can be difficult

so open file by Annotation Modeler after click this u will get

17.PNG

Click on Green icon

18.PNG

here you can chose function what you want add on smart template project.

Example 1 : i want to add on line item  one Action button and one Navigation Button on overview page like this

/wp-content/uploads/2016/01/19_876200.png

so to create this select UI.LineItem and click Ok

then click Plus Icon on Line Item you will get

20.PNG

here you have to select controls according to your req.

now i select DatafieldforAction and DatafieldForIntentBasedNavigation

now you will see

21.PNG

Now click 1st one Data filed for Action U will get from Right side u have to fill.den

like this

22.PNG

click on apply Save Project

Run The Project Again

now when i run then project i got my desire output

23.PNG

So it was just a example .

plz do comment for any controls.which you want add on overview Page or List view Page

Regards

Virendra

Assigned Tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vijay Kumar Kalluri
      Vijay Kumar Kalluri

      Its Good Blog Virendra Soni

      Thanks for sharing

      Author's profile photo Magina Zhang
      Magina Zhang

      Hi Virendra Soni,

      I found a blog on the wiki page wrote by u in SCN:

      http://scn.sap.com/community/developer-center/front-end/blog/2016/01/28/adding-controls-on-smart-template-using-annotationssap-web-ide

      which really helped me on the topic: add a button in the toolbar,

      but here comes an issue that have u found that after u add the button, the table column name was disappear when initial the page

      and if I try to load the data, it pops up an error msg: “select item“

      It’ll would be really nice if u could help check on this issue~

      And thanks u very much in advance!

      BR,

      Magina

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Hi Magina

      if you want some Column is automatically  display Data is automatically  come on that column without using Setting Icon

      use this annotation code at annotations/localAnnotations_1.xml


      it is for Column

      /wp-content/uploads/2016/03/json1_897646.png


      and if you want create some Filter Elements display at filterbar without using filter settings

      then it for Filter elements

      /wp-content/uploads/2016/03/json2_897671.png

      it will solve your problem ............

      or follow this Blog  Manage Smart Template (List View and Object View ) using Annotations file... you will get everything.

      Regards

      Virendra Soni

      Author's profile photo Magina Zhang
      Magina Zhang

      hi Soni,

      right, I can set the default columns now,

      but the issue was still there that:

      when I add the button, all the columns and data can't load by following the ways above.

      BR,

      Magina

      Author's profile photo Shibaji Chandra
      Shibaji Chandra

      Hi Soni,

      I am trying to build an overview page and added some Analyitcal cards on that. Now I am looking for how I can put Navigation so that user can go to a Master Detail App while clicking the card. Could you please enlighten how to do this?

      BR

      Shibaji

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      HI Shibaji

      You have to use  at your Cart Line item

      <Record Type="com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation">
        
      <PropertyValue Property="SemanticObject" String="SemanticObject1"/>
        
      <PropertyValue Property="Action" String="Action1"/>
        
      <PropertyValue Property="Label" String="App1"/>
        
      <Annotation Term="com.sap.vocabularies.UI.v1.Importance" EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium"/>
      </Record>


      then you will be able to navigate another view

      Regards

      Virendra

      Author's profile photo Former Member
      Former Member

      can you also suggest how can we replace the text on the button with an icon, like "add" or other sap icons?

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Please specify issue with snapshot
      so that I can help you on same

      regards
      virendra

      Author's profile photo Former Member
      Former Member

      Hi Virendra,

      Greeting...!!!

      Thanks for the tutorial, it was very helpful....

      I have created the same application using annotation but on my header there is action buttons initially there not enabled but the moment is click on some another button those action buttons gets enabled.

      Kindly check in the above screenshot : initially when i land on the page and click on the action button, the buttons are coming as disabled but when i click on Copy button which is on the header and navigate back to this page then it gets enabled.

       Since i have not specified in the press event, i am not able to make those button enabled initially.

      Kindly help....

       

      Thanks and regards,

      Amit Mahindre

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Hi Amit

       

      Is this Buttons are Custom button (Breakout/Extension ) or Action  button (data field for action ) ..?????

      Author's profile photo Natarajan Srikanta
      Natarajan Srikanta

      Hi Virendra Soni,

       

      Thanks for your blog.

      1. Can you let me know how to add filters at the top of the page
      2. I had created an annotation , however, i could see radio button after each line item which im not expecting. kindly let me know how to remove the radio button from each line item.
      3. Initially i had created the app in splash->build(prototyping tool) and then imported to webide. When im running with mock data , i could see the filters and object page(page 2) but when im binding the data with Northwind or ES4 odata, filters are not displayed and object page is empty .
        Please find attached screen shots for reference. kindly look into this and advice accordingly.
      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni
      Blog Post Author

      Hi

      Sorry for Delay . Did you get your Solution ??

      Regards

      Virendra

      Author's profile photo Jithin Cherian
      Jithin Cherian

      Hi Virendra,

       

      Really helpful.

      Just need one thing..

      Question : If I want one column to be displayed as a LINK and on click of that I want open another SAP Standard WEBAPP by passing the Selected LINK INFORMATION.

       

      Kindly help me with this.

       

      Thanks in advance...

      Author's profile photo Mynyna Chau
      Mynyna Chau

      Hi Jithin cherian if you want more community members to be aware of your question, you should consider asking your question here: https://answers.sap.com/questions/ask.html
      Best regards

      Mynyna (SAP Community moderator)