data-points-c2a389a.md

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.

Object Page: DataPoints

Note:

We've removed videos showing step-by-step procedures using SAP Web IDE, which SAP no longer actively supports. You can still access the video using an older version of this document.

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

<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

@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

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

<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

@UI.dataPoint: {
  title: 'Price'
}
Price;

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

Sample Code:

CAP CDS Annotation

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

<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

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

Sample Code:

CAP CDS Annotation

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