Data Points

Data Points

A data point represents a single point of data. It is typically a number but can also be textual, for example, a status value.

The image below shows the data points Price and Availability in the object page header.

Hidden

Object Page: DataPoints

This video shows the step-by-step procedure for adding a data point header to an object page:

Open this video in a new window

Code Samples

UI.Reference Facet

If you add a UI.ReferenceFacet that points to UI.DataPoint, the title and value of the UI.DataPoint will be rendered.

Sample Code

XML Annotation

Sample Code
Hidden
<Annotation Term="UI.HeaderFacets">
    <Collection>
        ...
        <Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Price" />
        </Record>
        ...
        <Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Target" AnnotationPath="to_StockAvailability/@UI.DataPoint#StockAvailability" />
        </Record>
        ...
    </Collection>
</Annotation>

Sample Code

ABAP CDS Annotation

Sample Code
Hidden
@UI.Facet: [
  {
    label: '{@i18n>@TechnicalData}',
    targetQualifier: 'TechnicalData',
    type: #FIELDGROUP_REFERENCE,
    purpose: #HEADER
  },
  {
    targetQualifier: 'Price',
    type: #DATAPOINT_REFERENCE,
    purpose: #HEADER
  },
  {
    targetQualifier: 'ProductCategory',
    type: #DATAPOINT_REFERENCE,
    purpose: #HEADER
  },
  {
    label: 'Employee',
    targetElement: 'TO_SUPPLIER',
    type: #CONTACT_REFERENCE,
    purpose: #HEADER
  }
]
product;

Sample Code

CAP CDS Annotation

Sample Code
Hidden
UI.HeaderFacets : [
    {
        $Type : 'UI.ReferenceFacet',
        Label : '{@i18n>@TechnicalData}',
        Target : '@UI.FieldGroup#TechnicalData'
    },
    {
        $Type : 'UI.ReferenceFacet',
        Target : '@UI.DataPoint#Price'
    },
    {
        $Type : 'UI.ReferenceFacet',
        Target : '@UI.DataPoint#ProductCategory'
    },
    {
        $Type : 'UI.ReferenceFacet',
        Label : 'Employee',
        Target : 'to_Supplier/@Communication.Contact'
    }
]

UI.DataPoint

Each UI.DataPoint annotation term must point to a qualifier, as shown below:

Sample Code

XML Annotation

Sample Code
Hidden
<Annotation Term="UI.DataPoint" Qualifier="Price">
    <Record>
        <PropertyValue Property="Value" Path="Price" />
        <PropertyValue Property="Title" String="Price" />
    </Record>
</Annotation>

<Annotations Target="STTA_PROD_MAN.STTA_C_MP_StockAvailabilityType">
    <Annotation Term="UI.DataPoint" Qualifier="StockAvailability">
        <Record>
            <PropertyValue Property="Value" Path="StockAvailability" />
            <PropertyValue Property="Title" String="Availability" />
            <PropertyValue Property="Criticality" Path="StockAvailability" />
        </Record>
    </Annotation>
</Annotations>

Sample Code

ABAP CDS Annotation

Sample Code
Hidden
@UI.dataPoint: {
  title: 'Price'
}
Price;

@UI.dataPoint: {
  title: 'Category'
}
ProductCategory;

Sample Code

CAP CDS Annotation

Sample Code
Hidden
UI.DataPoint #Price : {
    Value : Price,
    Title : 'Price'
},
UI.DataPoint #ProductCategory : {
    Value : ProductCategory,
    Title : 'Category'
}

Numerical Data Points

For numerical data points, you can override the scale and precision defined in the metadata to display the decimal formatted value on the UI using the property NumberOfFractionalDigits of annotation NumberFormat.

Numerical Data Points Values

Scale metadata Precision metadata Value of NumberOfFractionalDigits Decimal places displayed on the UI
3 15 undefined 3
3 15 5 5
3 15 1 1
3 15 20 14
3 15 0 3

You can define the property NumberOfFractionalDigits of annotation NumberFormat to set the decimal places to be displayed on the UI.

Sample Code

XML Annotation

Sample Code
Hidden
<Annotation Term="UI.DataPoint" Qualifier="Weight">
    <Record Type="com.sap.vocabularies.UI.v1.DataPointType">
        <PropertyValue Property="Value" Path="Weight" />
        <PropertyValue Property="Title" String="Weight" />
        <PropertyValue Property="ValueFormat">
            <Record Type="com.sap.vocabularies.UI.v1.NumberFormat">
                <PropertyValue Property="NumberOfFractionalDigits" Int="5"/>
            </Record>
        </PropertyValue>
    </Record>
</Annotation>

Sample Code

ABAP CDS Annotation

Sample Code
Hidden
@UI.dataPoint: {
  title: 'Weight',
  valueFormat: {
    numberOfFractionalDigits: 5
  }
}
Weight;

Sample Code

CAP CDS Annotation

Sample Code
Hidden
UI.DataPoint #Weight : {
    $Type : 'UI.DataPointType',
    Value : Weight,
    Title : 'Weight',
    ValueFormat : {
        $Type : 'UI.NumberFormat',
        NumberOfFractionalDigits : 5
    }
}

In this section: