Show TOC

Smart Chart FacetLocate this document in the navigation structure

You can add a smart chart facet to a content section within the object page.

A smart chart facet contains a SmartChart control and is suitable to use if you wish to present data graphically for analysis.

To add a smart chart facet, use the UI.HeaderFacet term and include the UI.ReferenceFacet complex type, and then reference the UI.Chart annotation. This is displayed as shown below within a content section of the object page:

Figure 1: Smart Chart in Object Page
Code Samples

The following code samples show an example of how to create your annotations for the smart chart facet:

UI.ReferenceFacet
<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductType">
   <Annotation Term="UI.Facets">
      <Record Type="UI.ReferenceFacet">
         <PropertyValue Property="Label" String="{@i18n>@SalesData}"/>
         <PropertyValue Property="Target" AnnotationPath="to_ProductSalesData/@UI.Chart"/>
      </Record>
   </Annotation>
</Annotations>
UI.Chart
<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductSalesDataType">
   <Annotation Term="UI.Chart">
      <Record>
         <PropertyValue Property="Title" String="Test Smart Chart"/>
         <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
         <PropertyValue Property="Dimensions">
            <Collection>
               <PropertyPath>DeliveryMonth</PropertyPath>
            </Collection>
         </PropertyValue> 
         <PropertyValue Property="Measures">
            <Collection>
               <PropertyPath>Revenue</PropertyPath>
            </Collection>
         </PropertyValue>
      </Record>
   </Annotation>
</Annotations>

CDS Annotations

If desired, you can set this up using a CDS annotation, as shown below:

CDS Annotation Definition

//@Scope: [#ENTITY, #VIEW]

chart: array of {

    qualifier: String default null;

    title: String;

    description: String;

    chartType: String enum { COLUMN, COLUMN_STACKED, COLUMN_STACKED_100, 

                             BAR, BAR_STACKED, BAR_STACKED_100,

                             AREA, AREA_STACKED, AREA_100,

                             HORIZONTAL_AREA, HORIZONTAL_AREA_STACKED, HORIZONTAL_AREA_100,

                             LINE, PIE, DONUT, SCATTER, BUBBLE, RADAR, HEAT_MAP, TREE_MAP, WATERFALL };

    dimensions: array of elementRef;

    measures: array of elementRef;

};

CDS Annotation Source
@UI.chart:[{
   chartType: #COLUMN, 
   measures: ['Revenue'], 
   dimensions: ['DeliveryMonth']
}]
More Information