Skip to content

data-points-c2a389a.md

Latest commit

 

History

History
384 lines (287 loc) · 6.25 KB

data-points-c2a389a.md

File metadata and controls

384 lines (287 loc) · 6.25 KB

Data Points

You can use the Field building block to render 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: Data Points

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

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

Note:

For information about SAP Fiori elements for OData V2, see Data Points.

Related Information

Header Facets