How to add Unit Annotations in SAP UI5 Table

The unit of measure for a quantity can be displayed using the Unit Annotations. The Unit annotations in the metadata are represented as below.

                        <EntityType Name="CustomerType"
                            sap:label="Customers"
                            sap:content-version="1">
                            <Key>
                                <PropertyRef Name="Id" />
                            </Key>

                            <Property Name="Id"
                                Type="Edm.String"
                                Nullable="false"
                                MaxLength="10"
                                sap:visible="true"
                                sap:label="Customer ID"
                                sap:creatable="false"
                                sap:text="Name" />
                            <Property Name="FC"
                                Type="Edm.Byte"
                                sap:label="Field control" />
                            <Property Name="Name"
                                Type="Edm.String"
                                MaxLength="70"
                                sap:field-control="FC"
                                sap:creatable="false"
                                sap:updatable="true"
                                sap:label="Customer Name" />
                            <Property Name="Weight"
                                    Type="Edm.Double"
                                    sap:label="Weight"
                                    sap:unit="Unit" />
                            <Property Name="Unit"
                                  Type="Edm.String"
                                  MaxLength="512"
                                  sap:semantics="unit-of-measure" />
                        </EntityType>

The http Response will look like below

            {"d": {
                            "__count": "3",
                            "results": [
                                {
                                    "__metadata": {
                                        "id": "Customer_Odata_Service.CustomerSet/CustomerSet('1000')",
                                        "uri": "Customer_Odata_Service.CustomerSet/CustomerSet('1000')",
                                        "type": "CustomerNamespace.CustomerType"
                                    },
                                    "Id": "1000",
                                    "Name": "Mani",
                                    "FC": 1,
                                    "Weight": "70",
                                    "Unit": "Kg"
                                },
                                {
                                    "__metadata": {
                                        "id": "Customer_Odata_Service.CustomerSet/CustomerSet('1001')",
                                        "uri": "Customer_Odata_Service.CustomerSet/CustomerSet('1001')",
                                        "type": "CustomerNamespace.CustomerType"
                                    },
                                    "Id": "1001",
                                    "Name": "Raju",
                                    "FC": 1,
                                    "Weight": "70",
                                    "Unit": "Kg"                                    
                                },
                                {
                                    "__metadata": {
                                        "id": "Customer_Odata_Service.CustomerSet/CustomerSet('1002')",
                                        "uri": "Customer_Odata_Service.CustomerSet/CustomerSet('1002')",
                                        "type": "CustomerNamespace.CustomerType"
                                    },
                                    "Id": "1002",
                                    "Name": "Jack",
                                    "FC": 3,
                                    "Weight": "70",
                                    "Unit": "Kg"                                    
                                }                                 
                            ]
                }
            }

With the Metadata unit annotations and the corresponding http response will result in rendering a SAP UI5 Smart Table with values (Weight along with the unit) like below

Unit Annotations in SAP UI5 Table

How to select the default columns for Smart table in SAP UI5

‘initiallyVisibleFields’ property of the SAP UI5 Smart table is used to select the default columns for the smart table.

initiallyVisibleFields=”Id,Name”

As you see above, the fields(columns) of the smart table are separated by Comma. The columns will be visible in the same order as mentioned above with customer Id as first column and Customer Name as second column.

Important points to keep in mind while using this Property

  • The ‘initiallyVisibleFields’ Property must be used only if the CDS view is created without the Line Item Annotations. So there should not be any Line Item Annotations in the metadata generated.
  • Only during the initialization, the ‘initiallyVisibleFields’ Property of Smart Table can be used. It cannot be modified after the Smart table control is initialized.
  • The Property is not Validated. So if the fields are not mentioned properly, then it will not work. Like if spaces exists additionally or if there is any special symbols, then the columns will not be displayed properly.

            <core:View xmlns:core="sap.ui.core" controllerName="initialView.controller"
                xmlns="sap.m"
                xmlns:smart="sap.ui.comp.smarttable"
                xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
                height="100%">
                <Page id="page1" title="Customers1">
                   <VBox fitContainer="true">
                       <smart:SmartTable id="smartTable1" entitySet="CustomerSet"
                           tableType="ResponsiveTable"
                           showFullScreenButton="true" header="Customers" showRowCount="true"
                           editTogglable="true"
                           customData:useSmartField="true"
                           useTablePersonalisation="true"
                           initiallyVisibleFields="Id,Name"
                           enableAutoBinding="true">
                       </smart:SmartTable>
                   </VBox>
                </Page>
            </core:View>

The priority in which the columns are displayed in the following

  1. Initially if the XML View contains some fields, then these fields are displayed first. This takes the highest priority.
  2. If the LineItem Annotations are present in the metadata, then these fields are displayed second.
  3. Atlast, the initiallyVisibleFields are taken in to consideration. It appears at the end in the display.

How to add TextArrangement annotation in SAP UI5

The TextArrangement annotation is used to render the ID and the Corresponding Text in a particular format. The following CDS View UI Annotation is used to create the TextArrangement Annotation

@UI.textArrangement: #TEXT_FIRST
@ObjectModel.text.element: ['Name']
Id

The above CDS View TextArrangement annotation will generate the below annotations in the metadata file. TextArrangement annotation works only together with the Text annotation. As you can see below, the Property ‘Id’ and the Property ‘Name’ are interlinked together with the sap:text Inline annotations. The TextArrangement annotations are mentioned separately under the <Annotations> Tag.

                    <EntityType Name="CustomerType"
                        sap:label="Customers"
                        sap:content-version="1">
                        <Key>
                            <PropertyRef Name="Id" />
                        </Key>

                        <Property Name="Id"
                            Type="Edm.String"
                            Nullable="false"
                            MaxLength="10"
                            sap:visible="true"
                            sap:label="Customer ID"
                            sap:creatable="false"
                            sap:text="Name" />
                        <Property Name="FC"
                            Type="Edm.Byte"
                            sap:label="Field control" />
                        <Property Name="Name"
                            Type="Edm.String"
                            MaxLength="70"
                            sap:field-control="FC"
                            sap:creatable="false"
                            sap:updatable="true"
                            sap:label="Customer Name" />
                    </EntityType>

                        <Annotations Target="CustomerNamespace.CustomerType/Id"
                            xmlns="http://docs.oasis-open.org/odata/ns/edm">                              
                                  <Annotation Term="com.sap.vocabularies.UI.v1.TextArrangement"
                                      EnumMember="com.sap.vocabularies.UI.v1.TextArrangementType/TextFirst" />
                        </Annotations>

TextArrangment annotation is used mainly on the Primary Key Property or the sub entity (Primary key) to show the human readable text. The below picture is an example of TextFirst type.

There are totally four different types of TextArrangementType which are TextFirst, TextOnly, TextLast, TextSeparate. Let us see the other types with an example

TextOnly

                    <Annotations Target="CustomerNamespace.CustomerType/Id"
                        xmlns="http://docs.oasis-open.org/odata/ns/edm">                              
                              <Annotation Term="com.sap.vocabularies.UI.v1.TextArrangement"
                                  EnumMember="com.sap.vocabularies.UI.v1.TextArrangementType/TextOnly" />
                    </Annotations>

TextLast

                    <Annotations Target="CustomerNamespace.CustomerType/Id"
                        xmlns="http://docs.oasis-open.org/odata/ns/edm">                              
                              <Annotation Term="com.sap.vocabularies.UI.v1.TextArrangement"
                                  EnumMember="com.sap.vocabularies.UI.v1.TextArrangementType/TextLast" />
                    </Annotations>

TextSeparate

                    <Annotations Target="CustomerNamespace.CustomerType/Id"
                        xmlns="http://docs.oasis-open.org/odata/ns/edm">                              
                              <Annotation Term="com.sap.vocabularies.UI.v1.TextArrangement"
                                  EnumMember="com.sap.vocabularies.UI.v1.TextArrangementType/TextSeparate" />
                    </Annotations>

How to add cssDefault.width Annotation in SAP UI5

cssDefault.width annotation is used to define the width of the Column in SAP UI5 Table. The CDS View annotation for width looks like below. It is part of the lineItem Annotation as seen below.

@UI.lineItem:[{position:1,  importance:#MEDIUM,  cssDefault.width:  '10rem'}]
Name as CustomerName,
@UI.lineItem:[{position:2,  importance:#MEDIUM,  cssDefault.width:  '7rem'}]
Id as CustomerId,

The above CDS View UI Annotation will generate the below annotations in the Metadata

                    <Annotations Target="CustomerNamespace.CustomerType"
                       xmlns="http://docs.oasis-open.org/odata/ns/edm">
                        <Annotation Term="com.sap.vocabularies.UI.v1.LineItem">
                            <Collection>
                                <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                    <PropertyValue Property="Value" Path="Name" />      
                                    <Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults">
                                        <Record>
                                            <PropertyValue Property="width" String="10rem" />
                                        </Record>
                                    </Annotation>
                                </Record>                                 
                                <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                    <PropertyValue Property="Value" Path="Id" /> 
                                   <Annotation Term="com.sap.vocabularies.HTML5.v1.CssDefaults">
                                        <Record>
                                            <PropertyValue Property="width" String="7rem" />
                                        </Record>
                                    </Annotation>                                        
                                </Record>                                 
                            </Collection>
                        </Annotation> 
                    </Annotations>    

The above annotations in the metadata will generate and render the below SAP UI5 Smart table with speficied column width dimentions for the column Name and Id

Important: tableType Property of the Smart Table must be Grid Table/Tree/Analytical in order to see the effect of the Width Annotation. If the tableType is set to Responsive, then the effect of the Width Annotation will not be visualized. As seen in below picture, the tableType is Grid Table, therefore the width Annotations are easily realized.

        <core:View xmlns:core="sap.ui.core" controllerName="initialView.controller"
            xmlns="sap.m"
            xmlns:table="sap.ui.table"
            xmlns:smart="sap.ui.comp.smarttable"
            xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
            height="100%">
            <Page id="page1" title="Customers1">
               <VBox fitContainer="true">
                   <smart:SmartTable id="smartTable1" entitySet="CustomerSet" 
                       tableType="Table"
                       showFullScreenButton="true" header="Customers" showRowCount="true"
                       editTogglable="true"
                       customData:useSmartField="true"
                       useTablePersonalisation="true"
                       enableAutoBinding="true">
                   </smart:SmartTable>
               </VBox>
            </Page>
        </core:View>

For example, if the tableType=”ResponsiveTable” is set in the Smart Table properties, then the Width Annotations will have no effect on the Smart Table like below. As the Responsive Table are Row based selection, it will not have any influence. But the Grid Table are based on cell based selection. Therefore the width Annotation will have influence on the Grid Table.

How to add UI.Hidden annotations in SAP UI5

@UI.Hidden annotation is used in CDS View to hide a particular column from the SAP UI5 Table. The CDS view annotation line looks like below

@UI.Hidden: true

The above CDS UI.Hidden Annotation will generate the following Annotations in the Metadata

                    <Annotations Target="CustomerNamespace.CustomerType/Id"
                       xmlns="http://docs.oasis-open.org/odata/ns/edm">
                        <Annotation Term="com.sap.vocabularies.UI.v1.Hidden" />
                    </Annotations>

As you can see from the above XML Code, the Property specified here is ‘Id’. so this will hide the Column from the SAP UI5 table.

Namespace used is com.sap.vocabularies.UI.v1.Hidden

                        <Annotations Target="CustomerNamespace.CustomerType"
                           xmlns="http://docs.oasis-open.org/odata/ns/edm">
                            <Annotation Term="com.sap.vocabularies.UI.v1.LineItem">
                                <Collection>
                                    <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                        <PropertyValue Property="Value" Path="Name" />                                   
                                    </Record>                                 
                                    <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                        <PropertyValue Property="Value" Path="Id" />                                        
                                    </Record>                                 
                                </Collection>
                            </Annotation> 
                        </Annotations>                 
                        
                        <Annotations Target="CustomerNamespace.CustomerType/Id"
                           xmlns="http://docs.oasis-open.org/odata/ns/edm">
                            <Annotation Term="com.sap.vocabularies.UI.v1.Hidden" />
                        </Annotations>

Please do not use the initiallyVisibleFields property of the Smart table in combination with the LineItem/Hidden Annotation. As this will result in unexpected results. The Smart Table may add additional fields which is not mentioned in the LineItem Annotation.

How to add UI.lineItem Annotations in SAP UI5

In the CDS View , the UI.lineItem annotations are set like below. The below line introduces the column and the corresponding records in the SAP UI5 Table

@UI.lineItem:[{position:1, importance:#MEDIUM}]

The above CDS View line of code will generate the below Annotations XML Code. com.sap.vocabularies.UI.v1.LineItem is used to define the line items of a table

                    <Annotations Target="CustomerNamespace.CustomerType"
                       xmlns="http://docs.oasis-open.org/odata/ns/edm">
                        <Annotation Term="com.sap.vocabularies.UI.v1.LineItem">
                            <Collection>
                                <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                    <PropertyValue Property="Value" Path="Id" />                                        
                                </Record>
                                <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                    <PropertyValue Property="Value" Path="Name" />                                   
                                </Record>
                            </Collection>
                        </Annotation>
                    </Annotations> 

The above Annotations in the metadata file will create the SAP UI5 Smart Table with the following line items.

Important: initialVisibleFields property of the Smart table will not be considered if the the line item annotation is used. If a field is mentioned in the property of smart table, but the field is ignored in the line item annotation, then it will also be ignored in the display of SAP UI5 Smart table . So the UI5 Developer has to ensure that both the ‘LineItem Annotation’ and ‘initiallyVisibleFields’ must not be used. Please see below Smart table xml code with initialVisibleFields property set in the Smart Table.

            <core:View xmlns:core="sap.ui.core" controllerName="initialView.controller"
                xmlns="sap.m"
                xmlns:smart="sap.ui.comp.smarttable"
                xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
                height="100%">
                <Page id="page1" title="Customers1">
                   <VBox fitContainer="true">
                       <smart:SmartTable id="smartTable1" entitySet="CustomerSet"
                           tableType="ResponsiveTable"
                           showFullScreenButton="true" header="Customers" showRowCount="true"
                           editTogglable="true"
                           customData:useSmartField="true"
                           useTablePersonalisation="true"
                           initialVisibleFields="Name,FC,Id"
                           enableAutoBinding="true">
                       </smart:SmartTable>
                   </VBox>
                </Page>
            </core:View>

As seen in the above XML Code, the initialVisibleFields property is ignored and it will display only the fields Id and Name. The Order in which the columns are displayed will also be like how it is in the annotations speficied. In this case it will be Id and then the Name.

How the change the sequence of the Columns displayed in SAP UI5 smart table using Line Item Annotation

The Order in which the columns are displayed can also be changed using the line item annotation as seen below.

                        <Annotations Target="CustomerNamespace.CustomerType"
                           xmlns="http://docs.oasis-open.org/odata/ns/edm">
                            <Annotation Term="com.sap.vocabularies.UI.v1.LineItem">
                                <Collection>
                                    <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                        <PropertyValue Property="Value" Path="Name" />                                   
                                    </Record>                                 
                                    <Record Type="com.sap.vocabularies.UI.v1.DataField">
                                        <PropertyValue Property="Value" Path="Id" />                                        
                                    </Record>                                 
                                </Collection>
                            </Annotation>
                        </Annotations> 

As seen in the above Annotations XML Code, the first Record’s Property Value refers to the Column Path ‘Name’. The second Record’s Property Value refers to the Column Path ‘Id’. The output of the SAP UI5 Smart table will look like below with the Customer Name as first column and Customer ID as second column.

How to use dynamic field control annotations in SAP UI5

Sap dynamic field-control annotation is used to dynamically change the behaviour of the UI.  The metadata generated is used to interpret and change the state of the UI control to visible,editable etc.

The following needs to be defined in order to use field control annotations

  • Usage of smartfield must be mentioned in Smart Table
  • Field control annotations must be present in the metadata file
  • Appropriate field control values must be sent in the http response.

Smartfield in Smart Table

<core:View xmlns:core="sap.ui.core" controllerName="initialView.controller"
      xmlns="sap.m"
      xmlns:smart="sap.ui.comp.smarttable"
      xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
      height="100%">
      <Page id="page1" title="Customers1">
            <VBox fitContainer="true">
                 <smart:SmartTable id="smartTable1" 
                        entitySet="CustomerSet"
                        tableType="ResponsiveTable"
                        showFullScreenButton="true" 
                        header="Customers" 
                        showRowCount="true"
                        editTogglable="true"
                        customData:useSmartField="true"
                        useTablePersonalisation="true" 
                        initiallyVisibleFields="FC,Name"
                        enableAutoBinding="true">
                  </smart:SmartTable>
            </VBox>
      </Page>
</core:View>

Field control annotations in Metadata file

                        <EntityType Name="CustomerType"
                            sap:label="Customers"
                            sap:content-version="1">
                            <Key>
                                <PropertyRef Name="Id" />
                            </Key>

                            <Property Name="Id"
                                Type="Edm.String"
                                Nullable="false"
                                MaxLength="10"
                                sap:visible="false"
                                sap:label="Customer ID"
                                sap:creatable="false" />
                            <Property Name="FC"
                                Type="Edm.Byte"
                                sap:label="Field control" />
                            <Property Name="Name"
                                Type="Edm.String"
                                MaxLength="70"
                                sap:field-control="FC"
                                sap:creatable="false"
                                sap:updatable="true"
                                sap:label="Customer Name" />
                        </EntityType>


                        <EntityContainer Name="CustomerNamespace_Entities"
                            m:IsDefaultEntityContainer="true"
                            sap:supported-formats="atom json xlsx">
                            <EntitySet Name="CustomerSet"
                                EntityType="CustomerNamespace.CustomerType"
                                sap:creatable="false"
                                sap:updatable="true"
                                sap:deletable="true"
                                sap:content-version="1" />
                        </EntityContainer>

As seen in the above metadata, the following conditions must be met.

  • The Entityset must have annotation sap:updatable=”true” set at the global Entityset level
  • The main property ( as in above example “Name”) must have the annotation sap:field-control=”FC” and sap:updatable=”true”
  • The field control property must also be present ( Property Name=”FC” )

The backend must send the appropriate Field control values in the http Response.

{“d”: {
“__count”: “2”,
“results”: [
{
“__metadata”: {
“id”: “Customer_Odata_Service.CustomerSet/CustomerSet(‘1000’)”,
“uri”: “Customer_Odata_Service.CustomerSet/CustomerSet(‘1000’)”,
“type”: “CustomerNamespace.CustomerType”
},
“Id”: “1000”,
“Name”: “Mani”,
“FC”: 0
},
{
“__metadata”: {
“id”: “Customer_Odata_Service.CustomerSet/CustomerSet(‘1001’)”,
“uri”: “Customer_Odata_Service.CustomerSet/CustomerSet(‘1001’)”,
“type”: “CustomerNamespace.CustomerType”
},
“Id”: “1001”,
“Name”: “Raju”,
“FC”: 1
},
{
“__metadata”: {
“id”: “Customer_Odata_Service.CustomerSet/CustomerSet(‘1002’)”,
“uri”: “Customer_Odata_Service.CustomerSet/CustomerSet(‘1002’)”,
“type”: “CustomerNamespace.CustomerType”
},
“Id”: “1002”,
“Name”: “Jack”,
“FC”: 3
}
]
}
}

As seen in the above http response, the field control contains values such as 0 for hidden, 1 for read only, 3 for editable. This is also seen in the Smart table output picture shown in this post beginning.