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>