Skip to Content

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

To report this post you need to login first.

12 Comments

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

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

    (0) 
    1. virendra soni 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

      (0) 
      1. 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

        (0) 
  2. 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

    (0) 
    1. virendra soni 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

      (0) 
  3. 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

    (0) 
  4. 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.
    (0) 

Leave a Reply