Helmut Tammen

September 16, 2015 8 minute read

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

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“>

<Key>

</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“>

</Record>

</Record>

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

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

</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}”>

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

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

21 Comments

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

Dominik Espitalier

September 17, 2015 at 8:03 am

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

Helmut Tammen

Blog Post Author

September 17, 2015 at 8:10 am

Hi Domae,

hcp trial currently uses 1.30.6

Regards

Helmut

Joseph BERTHE

October 9, 2015 at 12:38 pm

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,

Tejas S. Gargeya Sastry

December 30, 2015 at 9:35 am

Hi Joseph,

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

Regards,

Tejas

Joseph BERTHE

January 7, 2016 at 8:02 am

No sorry

Péter Catano

January 15, 2018 at 3:04 pm

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

Margot Wollny

October 21, 2015 at 9:08 am

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

Helmut Tammen

Blog Post Author

October 21, 2015 at 3:12 pm

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

Former Member

February 17, 2016 at 4:16 pm

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

Helmut Tammen

Blog Post Author

February 17, 2016 at 4:31 pm

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

Tejas S. Gargeya Sastry

January 6, 2016 at 9:09 am

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.

Helmut Tammen

Blog Post Author

January 6, 2016 at 10:01 am

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

Tejas S. Gargeya Sastry

January 6, 2016 at 10:07 am

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 🙂

Helmut Tammen

Blog Post Author

January 6, 2016 at 10:22 am

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.

Helmut Tammen

Blog Post Author

January 6, 2016 at 10:26 am

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.

Tejas S. Gargeya Sastry

January 6, 2016 at 10:33 am

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

Joseph BERTHE

January 7, 2016 at 8:13 am

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>

Shubham Kumar

August 24, 2016 at 6:44 am

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"

Helmut Tammen

Blog Post Author

August 24, 2016 at 11:04 am

Google is your best friend 🙂

javascript - How to convert OData model to entityset in sap ui5 - Stack Overflow

Pradeep V

August 8, 2017 at 3:51 am

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

Former Member

February 7, 2018 at 4:27 am

Does smarttable could run on 1.28?

SmartTable Example

The metadata file

The view

Generating the metadata file on Gateway server

The source

Assigned Tags

Hi Helmut Tammen,

custom data column in the smart table :