SmartTable Example

[htammen]

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

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

  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.