Skip to Content
Author's profile photo Helmut Tammen

SmartTable Example

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.




Assigned tags

      21 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dominik Espitalier
      Dominik Espitalier

      Hey Helmut,

      nice Blog! Can you tell me, which version of UI5 you used in this example? Is it allready 1.30 or even 1.32?

      Best Regards,

      Domae

      Author's profile photo Helmut Tammen
      Helmut Tammen
      Blog Post Author

      Hi Domae,

      hcp trial currently uses 1.30.6

      Regards

      Helmut

      Author's profile photo Joseph BERTHE
      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,

      Author's profile photo Tejas S. Gargeya Sastry
      Tejas S. Gargeya Sastry

      Hi Joseph,

      Have you found out the answer to this question? If yes please respond with the answer. Thank you.

      Regards,

      Tejas

      Author's profile photo Joseph BERTHE
      Joseph BERTHE

      No sorry

      Author's profile photo Péter Catano
      Péter Catano

      Hi, check out this blog post about adding sap:display-format="Date", in the same way any sap:<annotation>="<value>"  can be added

      Author's profile photo Margot Wollny
      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

      Author's profile photo Helmut Tammen
      Helmut Tammen
      Blog 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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Helmut Tammen
      Helmut Tammen
      Blog 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

      Author's profile photo Tejas S. Gargeya Sastry
      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.

      Author's profile photo Helmut Tammen
      Helmut Tammen
      Blog 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

      Author's profile photo Tejas S. Gargeya Sastry
      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 🙂

      Author's profile photo Helmut Tammen
      Helmut Tammen
      Blog 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.

      Author's profile photo Helmut Tammen
      Helmut Tammen
      Blog 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.

      Author's profile photo Tejas S. Gargeya Sastry
      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

      Author's profile photo Joseph BERTHE
      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>

      Author's profile photo Shubham Kumar
      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"

      Author's profile photo Helmut Tammen
      Helmut Tammen
      Blog Post Author
      Author's profile photo Pradeep V
      Pradeep V
       Hi Helmut Tammen,
      Great Post, really help full,
      I have a similar requirement like, i want to display only few columns in Group option in the smart control setting button,
      i am doing it right now by removing sortProperty attribute from the customdata , but when i do so, 
      it is getting hidden from both the Sort and Group option in the smart control,
      Could you anyone tell me is there any way to hide some columns only from Group and retain all other columns in filter, 
      column, and Sort tab?
      custom data column in the smart table :
      <code><Column hAlign="Left">
      <customData>
      <core:CustomData key="p13nData" value='\{"columnKey": "EVT_DATE","leadingProperty": "EVT_DATE","filterProperty": "EVT_DATE"}'/>
      </customData>
      <Text text="{i18n>table_Date}"/>
      </Column>
      
      
      Thanks in advance,
      Pradeep
      Author's profile photo Former Member
      Former Member

      Does smarttable could run on 1.28?