Predefined Representation Types
The UI component of APF provides predefined representation types that can be used to display data.
These representation types are predefined in the file sap/apf/core/representationTypes.js. They can be referenced in the analytical content configuration using their IDs.
Each representation type has a constructor assigned. The constructor is used as a parameter in the representation type object of the configuration file and points to the implementation of the representation type. The charts shipped with APF are implemented using the VizFrame charting library (sap.viz.ui5.controls.VizFrame) that is available with SAP UI5.
The following table lists the available representation types:
Chart Name |
ID |
Constructor |
Chart Type in VizFrame Charting Library |
|---|---|---|---|
Column chart |
ColumnChart |
sap.apf.ui.representations.columnChart |
sap.viz.ui5.controls.VizFrame({vizType : column}); |
Line chart |
LineChart |
sap.apf.ui.representations.lineChart |
sap.viz.ui5.controls.VizFrame({vizType : line}); |
Scatter plot |
ScatterPlotChart |
sap.apf.ui.representations.scatterPlotChart |
sap.viz.ui5.controls.VizFrame({vizType : scatter}); |
Pie chart |
PieChart |
sap.apf.ui.representations.pieChart |
sap.viz.ui5.controls.VizFrame({vizType : pie}); |
Stacked column chart |
StackedColumnChart |
sap.apf.ui.representations.stackColumnChart |
sap.viz.ui5.controls.VizFrame({vizType : stacked_column}); |
Percentage stacked column chart |
PercentageStackedColumnChart |
sap.apf.ui.representations.percentageStackedColumn |
sap.viz.ui5.controls.VizFrame({vizType : 100_stacked_column});) |
|
Bubble chart |
BubbleChart |
sap.apf.ui.representations.bubbleChart |
sap.viz.ui5.controls.VizFrame({vizType : bubble}); |
Table representation |
TableRepresentation |
sap.apf.ui.representations.tableRepresentation |
SAP Ui5 Table (sap.ui.table.Table) |
You can use the predefined representation types to define representations in your application. To do so, depending on the chart type you choose, you must define parameters such as the fields used for the x-axis and y-axis, or the field by which a chart is sorted.
To overwrite a predefined representation type, you can create a new representation type object with the same ID. When you include the ID in a representation object, the new representation type is used instead of the predefined one.
You can also create your own representation types. To do so, create a new representation type object with a new ID for each representation type you want to create.