Tag: UI5 Annotations

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 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 Text Annotation in SAP UI5 Table

The CDS View Text Annotation @ObjectModel.text.element is used to set the sap:text Inline Annotation in the metadata. The CDS View Text Annotation looks like below

@ObjectModel.text.element: ['Name']
Id as CustomerID

The above CDS View Text Annotation will generate the below Inline Annotation in Metadata. It is the human readable text for the value of this Property ‘Id’

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

The above Inline metadata Annotation for the Property Id will render the SAP UI5 Smart Table with Name and Id together for the Column ‘Id’.

As seen in the above picture, the Column ‘Customer ID’ consists of both the Name and Id. The default textArrangement: #TEXT_FIRST will be used, although no TextArrangement is explicitly mentioned.

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