Sections

Different facets have been defined to display important information in the sections of the content area.

Sections are built using the com.sap.vocabularies.UI.v1.Facets annotations.

Note All facets are displayed on the same page, the navigation from the facet only navigates to the related section. The label of the facet annotation is used twice; once for the facet in the header area and once for the title of the section.

Each section can also have several subsections. If a UI.CollectionFacet contains several UI.CollectionFacet's each of these becomes a subsection, as in the following example:

Sample Code

<Annotation Term="UI.Facets">

   <Collection>

      <!-- This facet is displayed as before in a section -->

      <Record Type="UI.ReferenceFacet">

         <PropertyValue Property="Label" String="{@i18n>@GeneralInfoFacetLabel}"/>

         <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#GeneralInformation" />

      </Record>

      <Record Type="UI.CollectionFacet">

         <PropertyValue Property="ID" String="FurtherData"/>

         <PropertyValue Property="Label" String="{@i18n>@FurtherData}"/>

         <PropertyValue Property="Facets">

            <Collection>

               <!-- This CollectionFacet becomes a subsection with a form with groups -->

               <Record Type="UI.CollectionFacet">

To render a smart table, the section must comprise a list (indicated by com.sap.vocabularies.UI.v1.LineItem).

To render a toolbar for the table, com.sap.smartapp.UI.Action must be defined as the entity type. In this case, the com.sap.smartapp.UI.Action list is processed and a button is generated based on the label and function import information.

An Add Entry button is rendered if Org.OData.Capabilities.V1.InsertRestrictions/Insertable/Bool is set to true for the entity set.

The fields are rendered using the smart field control so the associated annotations are also used.

A facet comprises collection facets as well as reference facets. A hierarchy level is also supported; instead of a UI.ReferenceFacet, you can add a UI.CollectionFacet which consists of several UI.ReferenceFacets. The contents of these reference facets will then be arranged underneath. Reference facets represent a reference to a line item annotation (list on the object page). Collection facets are made up of a list of records that each represent a reference facet to a field group annotation.

In the figure below, the collection facet for Product Information combines three reference facets. Each reference facet refers to a field group, or to an identification annotation.

Figure 1: Object Page: CollectionFacet

Further reference facets refer to identification sections, field group, contact or line items' annotations. For line items, a list is rendered.

Figure 2: Object Page: ReferenceFacets

Contact Facet

To render a contacts list and contact facet, you add a UI.ReferenceFacet which points to contact annotation (type). It shows the label of the UI.ReferenceFacet and below the fn property of the contact annotation. If you click on the name, a quickview with the contact details is rendered as shown below.

Figure 3: Object Page: Contacts

The Facet annotation looks as follows:

Sample Code

<Record Type="UI.ReferenceFacet">
   <PropertyValue Property="Label" String="Supplier"/>
   <PropertyValue AnnotationPath="to_Supplier/@Communication.Contact" Property="Target"/>
</Record>

The Contact annotation looks as follows:

Sample Code

<Annotations Target="SEPMRA_PROD_MAN.SEPMRA_I_EmployeeType">
	<Annotation Term="Communication.Contact">
		<Record>
			<PropertyValue Property="fn" Path="FormattedName"/>
			<PropertyValue Property="title" Path="JobTitle"/>
			<PropertyValue Property="org" Path="CompanyName"/>
			<PropertyValue Property="role" Path="OrganizationRole"/>
			<PropertyValue Property="n">
				<Record>
					<PropertyValue Property="given" Path="FirstName"/>
					<PropertyValue Property="additional" Path="MiddleName"/>
					<PropertyValue Property="surname" Path="LastName"/>
				</Record>
										
			</PropertyValue>
			<PropertyValue Property="photo" Path="EmployeePictureURL"/>
			<PropertyValue Property="tel">
				<Collection>
					<Record>
						<PropertyValue Property="type" EnumMember="Communication.PhoneType/fax"/>
						<PropertyValue Property="uri" Path="FaxNumber"/>
					</Record>
					<Record>
						<PropertyValue Property="type" EnumMember="Communication.PhoneType/cell"/>
						<PropertyValue Property="uri" Path="MobilePhoneNumber"/>
					</Record>
					<Record>
						<PropertyValue Property="type" EnumMember="Communication.PhoneType/work"/>
						<PropertyValue Property="uri" Path="PhoneNumber"/>
					</Record>
					<Record>
						<PropertyValue Property="type" EnumMember=""/>
						<PropertyValue Property="address" Path="FaxNumber"/>
					</Record>
				</Collection>
			</PropertyValue>
			<PropertyValue Property="email">
				<Collection>
					<Record>
						<PropertyValue Property="type" EnumMember="Communication.ContactInformationType/work"/>
						<PropertyValue Property="address" Path="EmailAddress"/>
					</Record>
				</Collection> 
			</PropertyValue>
		</Record>
	</Annotation>
</Annotations>

Address Facet

If you add a UI.ReferenceFacet which points to an address annotation you get an address facet. It shows the label of the UI.ReferenceFacet and the property of the address annotation. The label property should contain the whole formatted address with \n for new lines. The other properties are not interpreted due to the lack of a control or reuse component which can format an address according to country specifics.

Sample Code

<Record Type="UI.ReferenceFacet">
    <PropertyValue Property="Label" String="Shipping Address"/>
    <PropertyValue AnnotationPath="@Communication.Address" Property="Target"/>
</Record>

IDs for Collection Facets

To enable, for example, breakouts, personalization, automated testing, you need to have stable IDs for views and controls. In most cases, you can derive them automatically from existing annotations. In case of collection facets, a new annotation was introduced with which you can set a stable ID. The ID should be meaningful and must be unique within the entity type. You should only use characters in camel case without spaces.

If you define your facets in an annotation file in your project, you can add the ID there directly, as in the following example:

Sample Code

<Annotation Term="UI.Facets">
	<Collection>
		<Record Type="UI.CollectionFacet">
			<PropertyValue Property="ID" String="GeneralInformation"/>

If you define the UI annotations in the MPC_EXT, you can add the ID by searching for create_record( iv_record_type = 'UI.CollectionFacet') and then, as in the following example, add the lines 3 and 4 with a meaningful ID in the data provider class of the backend:

Sample Code

lo_collection1 = lo_annotation->create_collection( ).
lo_record2 = lo_collection1->create_record( iv_record_type = 'UI.CollectionFacet')   ##NO_TEXT.
lo_property_value3 = lo_record2->create_property( 'ID' )    ##NO_TEXT.
lo_property_value3->create_simple_value( )->set_string( 'GeneralInformation' )   ##NO_TEXT.

The annotation generator of the fact sheets automatically adds an ID to the GeneralInformation collection facet.