Skip to Content

Today I saw quite a lot threads in this space regarding the SmartTable and other SmartControls that at first time were released with SAPUI5 version 1.25. Since version 1.28 they were more and more usable. But the documentation is still very poor and so it is hard word to get a project with smartcontrols running.

Cause I had the chance to work in a project in which we used the SmartTable, SmartFilterBar and SmartVariant I decided to write this blog and show how the SmartTable control can be used in SAPUI5 project. Accompanying this blog there is a github repository with a working project. Simply clone this repository into your hanatrial hcp account, run it and play around with it.

The main part is done in the metadata file which in a real project is generated at the gateway server. The view then just consists of a page with the SmartTable control in it.

Lets start with describing the metadata file. In my metadata.xml file I created one EntityType (Person) and an according EntitySet (Persons). This entityset will be displayed in the SmartTable.


Here is a screenshot of the applications output

Bildschirmfoto 2015-09-16 um 23.01.53.png


The metadata file

This is my metadata.xml file:

<?xml version=”1.0″ encoding=”utf-8″?>

<edmx:Edmx Version=”1.0″

    xmlns:edmx=”http://schemas.microsoft.com/ado/2007/06/edmx

    xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata

    xmlns:sap=”http://www.sap.com/Protocols/SAPData

    >

  <edmx:Reference

  Uri=”http://server:port/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName=’%2FIWBEP%2FVOC_CORE’,Version=’0001′,SAP__Origin=”)/$value

  xmlns:edmx=”http://docs.oasis-open.org/odata/ns/edmx“>

  <edmx:Include Namespace=”com.sap.vocabularies.UI.v1″ Alias=”UI”/>

  </edmx:Reference>

    <edmx:DataServices m:DataServiceVersion=”2.0″>

        <Schema Namespace=”SmartTbl” xml:lang=”de” sap:schema-version=”1 “

            xmlns=”http://schemas.microsoft.com/ado/2008/09/edm“>

            <EntityType Name=”Person” sap:content-version=”1″>

                <Key>

                    <PropertyRef Name=”PersonID”/>

                </Key>

                <Property Name=”PersonID” Type=”Edm.String” Nullable=”false” sap:creatable=”false”

   sap:updatable=”false” sap:sortable=”false” sap:filterable=”false”/>

                <Property Name=”FirstName” Type=”Edm.String” Nullable=”false” sap:visible=”true” sap:creatable=”false” sap:updatable=”false”

   sap:sortable=”false” sap:filterable=”false”/>

                <Property Name=”LastName” Type=”Edm.String” Nullable=”false” sap:visible=”true” sap:creatable=”false” sap:updatable=”false”

   sap:sortable=”false” sap:filterable=”false”/>

                <Property Name=”Birthday” Type=”Edm.DateTime” Nullable=”false” sap:visible=”true” sap:creatable=”false”

   sap:updatable=”false” sap:sortable=”false” sap:filterable=”false”/>

            </EntityType>

            <EntityContainer Name=”SmartTbl_Entities” m:IsDefaultEntityContainer=”true”

  sap:supported-formats=”atom json xlsx”>

                <EntitySet Name=”Persons” EntityType=”SmartTbl.Person” sap:creatable=”false”

    sap:updatable=”false” sap:deletable=”false” sap:pageable=”false” sap:addressable=”false”

    sap:content-version=”1″/>

            </EntityContainer>

            <Annotations Target=”SmartTbl.Person”

                xmlns=”http://docs.oasis-open.org/odata/ns/edm“>

                <Annotation Term=”com.sap.vocabularies.UI.v1.LineItem”>

                    <Collection>

                        <Record Type=”UI.DataField”>

                            <PropertyValue Property=”Value” Path=”FirstName”/>

                            <Annotation Term=”UI.Importance” EnumMember=”UI.Importance/High”/>

                        </Record>

                        <Record Type=”UI.DataField”>

                            <PropertyValue Property=”Value” Path=”LastName”/>

                            <Annotation Term=”UI.Importance” EnumMember=”UI.Importance/High”/>

                        </Record>

                        <Record Type=”UI.DataField”>

                            <PropertyValue Property=”Value” Path=”Birthday”/>

                            <Annotation Term=”UI.Importance” EnumMember=”UI.Importance/High”/>

                        </Record>

                    </Collection>

                </Annotation>

            </Annotations>

        </Schema>

    </edmx:DataServices>

</edmx:Edmx>


The first thing to mention is the edmx:Reference tag. To be honest I don’t understand it in detail but we need it cause we use the sap.vocabulary further down in the Annotations tag. If we don’t have this tag no columns will be displayed in the SmartTable.

<edmx:Reference  Uri=”http://server:port/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName=’%2FIWBEP%2FVOC_CORE’,Version=’0001′,SAP__Origin=”)/$value

  xmlns:edmx=”http://docs.oasis-open.org/odata/ns/edmx“>

  <edmx:Include Namespace=”com.sap.vocabularies.UI.v1″ Alias=”UI”/>

</edmx:Reference>


The next thing is the sap:visible=”true” annotation at the properties of the EntityType. We need to set this attribute to make the property visible in the SmartTable.

<Property Name=”FirstName” Type=”Edm.String” Nullable=”false” sap:visible=”true” sap:creatable=”false” sap:updatable=”false”

   sap:sortable=”false” sap:filterable=”false”/>


Then there is the Annotations tag. The target for this tag is our Person EntitySet.

      <Annotations Target=”SmartTbl.Person” …

The enclosed Annotation tag must be of Term=”com.sap.vocabularies.UI.v1.LineItem”. This tells the SmartTable that it defines the columns of table.

          <Annotation Term=”com.sap.vocabularies.UI.v1.LineItem”>

For each column of the table a Record of Type “UI.DataField” is defined

                        <Record Type=”UI.DataField”>

                            <PropertyValue Property=”Value” Path=”FirstName”/>

                            <Annotation Term=”UI.Importance” EnumMember=”UI.Importance/High”/>

                        </Record>

Here you can define several display properties for the column, e.g. the header label.


The view

The master.view.xml is quite simple how it is supposed to be for SmartControls.


<core:View controllerName=”com.tammenit.smarttbl.view.Master”

  xmlns:core=”sap.ui.core”

  xmlns:l=”sap.ui.layout”

  xmlns:table=”sap.ui.table”

  xmlns:smartTable=”sap.ui.comp.smarttable”

  xmlns=”sap.m”>

  <Page id=”productListPage” navButtonPress=”onNavBack” showNavButton=”true” title=”{i18n>masterTitle}”>

  <content>

            <smartTable:SmartTable

                    id=”PersonSmartTable”

                    entitySet=”Persons”

                    tableType=”Table”

                    useExportToExcel=”false”

                    useVariantManagement=”false”

                    useTablePersonalisation=”true”

                    header=”The Persons”

                    showRowCount=”true”

                    enableAutoBinding=”true”>

                <!– layout data used to make the table growing but the filter bar fixed –>

                <smartTable:layoutData>

                    <FlexItemData growFactor=”1″/>

                </smartTable:layoutData>

            </smartTable:SmartTable>

  </content>

  <footer></footer>

  </Page>

</core:View>


The only remarkable part of this file is the SmartTable. In this control the most important thing is to define an entitySet to be displayed. This is done (what wonder) with the property entitySet. In my example the SmartTable is bound to the Persons EntitySet. All other settings are not really important and you can inform yourself about them in the API documentation.


Generating the metadata file on Gateway server

Another interesting question is “How do we create the metadata file on Gateway server?”. I have to admit that I don’t know this. In our project this was done by a colleague who stood in close contact to the SAP development department. Even though it would have been interesting to get the information about that I was too busy with programming the frontend. Sorry for leaving a gap here.

 

The source

You can find and download or just clone the source of this little application on github. Have a look at the README file for more details on importing it into your hanatrial account and running the application.




To report this post you need to login first.

18 Comments

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

  1. Joseph BERTHE

    Hello,

    Nice bolg, but as you have said it is very bad documented 🙂

    I have a question, I know you did not generate metadata, but can you ask to your collegue how he add sap:visible into the property ?

    Regards,

    (0) 
  2. Margot Wollny

    Hi Helmut,

    Great blog, interesting to read how Smart Controls are used in projects.

    Out of curiosity: Do you already know the new tutorial on Smart Controls? Guess this document may have come too late for your project, but would be interesting to get your opinion on it.

    Regards, Margot

    (0) 
    1. Helmut Tammen Post author

      Hi Margot,

      thank you for the link to the new tutorial. Haven’t seen it yet and will have a more detailed look at it as soon as I find time.

      The challenges for us were to create the annotations on Gateway server and to understand which annotation has which effect in the frontend app.

      I think the tutorial could have helped us a lot 😥 .

      Furthermore we are not running in a Fiori Launchpad. So we could not use the standard data layer for saving variants, table configuration, …

      Hence we implemented our own persistence layer for this in the backend, trigger it from frontend and fill the controls (aggregations) by our own.

      Our project will continue and of course the users will have more requirements. It’s good to see that the documentation gets better.

      Best regards

      Helmut

      (0) 
      1. Silvia Grabmann

        Hi Helmut,

        thank you for your blog. I also implemented the smarttable with smartfilterbar…. it is working pretty good. Now I want to try out variants. I am already able to run it over HCP by not saving it back to the layered repository … just with running by mockup

        // enable ‘mock’ variant management

          jQuery.sap.require(“sap.ui.fl.FakeLrepConnector”);

          sap.ui.fl.FakeLrepConnector.enableFakeConnector(“./service/component-test-changes.json”);

        My question is if it is only possible to use variant management if the sapui5 app is included within the fiorilaunchpad or if there is also a option if the sapui5 app is included just into a netweaver portal.

        And how you have achieved it without the fiori launchpad? Have you created an odata service and saving the created variants back to the gateway for that user and fetching these once again?

        Thank you in advance for your response,

        Silvia

        (0) 
        1. Helmut Tammen Post author

          Hi Silvia,

          you are right. The gateway colleague implemented the saving an retrieving functionality for the variants in the OData service and I hooked into the events of the SmartControls at frontend side and called the OData service.

          As far as I remember it took a while to work out how to hook into these events and into which events.

          Regards Helmut

          (0) 
  3. Tejas S. Gargeya Sastry

    Hi Helmut,

    I need to have icons in one of the columns of the smart table. How can i achieve this? Please suggest the modification that needs to be done to the metadata. Thank you.

    Regards,

    Tejas.

    (0) 
    1. Helmut Tammen Post author

      Hi Tejas,

      sorry but I can’t help you with this. In our project we only had to display text values. Did you already have a look at the tutorials Margot mentioned (see above)? Maybe you find more details there. Otherwise I would suggest to open a new thread here or open a ticket on support.sap.com.

      Best Regards

      Helmut

      (0) 
      1. Tejas S. Gargeya Sastry

        Yes I looked into the tutorials. I actually found a solution to this problem a few minutes back. I think I will post it on scn over the weekend. Thank you for the response, and the blog was very helpful 🙂

        (0) 
        1. Helmut Tammen Post author

          Sounds great. I’m very interested in that blog.

          If you want to write a sample app to demonstrate it just fork my repo at github or contribute to it directly. I can give you contributor rights to it. Just contact me directly and tell me your email address.

          (0) 
        2. Helmut Tammen Post author

          Btw, in near future we will be able to create annotations in Web IDE with an annotation modeler. Then the backend just delivers the data and all frontend stuff is done on frontend side.

          (0) 
          1. Tejas S. Gargeya Sastry

            oh wow.. that’s amazing. Now I’m exnteding the mpc to get all the annotations i need. It was a bit difficult until i got a hang of it. i hope the modelling is made easier on web ide

            (0) 
        3. Joseph BERTHE

          Hello,

          Just for people how wants to know here is how to do it 🙂

          In the <smartTable:SmartTable> tag, add CustomData for a sap.m.Table tag as shown in the help :

          http://help.sap.com/saphelp_scm700_ehp03/helpdata/en/be/d8274140d04fc0b9bcb2db42d8bac2/content.htm

          here is an example :

          <Table fixedLayout=”false”  growing=”true”  growingThreshold=”300″ mode=”None” growingScrollToLoad=”true”>

            <columns>

            <Column>

            <customData>

            <core:CustomData key=”p13nData”

            value=’\{“columnKey”: “Fonds”,”leadingProperty”: [“Fonds”],”sortProperty”: “Fonds”,”filterProperty”: “Fonds”}’/>

            </customData>

            <Label text=”Fonds”/>

            </Column>

            </columns>

            <ColumnListItem press=”onListNavigate” type=”Navigation”>

            <cells>

            <ObjectStatus  icon=”{path: ‘Status’, formatter: ‘.formatFondIcon’}” state=”{path: ‘Status’, formatter: ‘.formatFondStatus’}” text=”{Fonds}”/>

            </cells>

            </ColumnListItem>

          </Table>

          (0) 
  4. Shubham Kumar

    can anybody help I m getting this error

    “z_demo/Component-changes.json could not be loaded from ./Component-changes.json. Check for ‘file not found’ or parse errors”

    (0) 

Leave a Reply