Class graphomate.ui.tables.RowFormatConfiguration

extends sap.ui.core.Element

Quick Start

Creates a RowFormatConfugation object that defines detailed styling of cells depending on data value conditions. Can be applied to row titles and to cells of columns which are instances of graphomate.ui.tables.DataColumn. Deviation columns are currently not affected by RowFormatConfigurations.

Usage Example

jQuery.sap.require("graphomate/ui/tables/Table");
jQuery.sap.require("graphomate/ui/tables/RowFormatConfiguration");
jQuery.sap.require("graphomate/ui/tables/enums/RowFormatConfigType");
jQuery.sap.require("graphomate/ui/tables/enums/ExceptionShape");
jQuery.sap.require("graphomate/ui/tables/enums/Operator");

var table = new graphomate.ui.tables.Table({
  width: "400px",
  rows: [
    new graphomate.ui.tables.Row({
      title: "Monitors",
      hierarchyLevel: 0,
      dataPerColumn: [74800000, 65400000]
    }),
    new graphomate.ui.tables.Row({
      title: "North",
      hierarchyLevel: 1,
      dataPerColumn: [15400000, 15000000]
    }),
    new graphomate.ui.tables.Row({
      title: "South",
      hierarchyLevel: 1,
      dataPerColumn: [59400000, 50400000]
    }),
    new graphomate.ui.tables.Row({
      title: "Tablets",
      hierarchyLevel: 0,
      dataPerColumn: [117900000, 108400000]
    }),
    new graphomate.ui.tables.Row({
      title: "North",
      hierarchyLevel: 1,
      dataPerColumn: [70100000, 53900000]
    }),
    new graphomate.ui.tables.Row({
      title: "South",
      hierarchyLevel: 1,
      dataPerColumn: [47800000, 54500000]
    })
  ],
  columns: [
    new graphomate.ui.tables.DataColumn("column-act",{title: "ACT"}),
    new graphomate.ui.tables.DataColumn("column-bud",{title: "BUD"})
  ],
  rowFormatConfigurations:[
    new graphomate.ui.tables.RowFormatConfiguration({
      type: graphomate.ui.tables.enums.RowFormatConfigType.Exception,
      exceptionShape: graphomate.ui.tables.enums.ExceptionShape.Rhomb,
      sourceColumnId: "column-act",
      operator: graphomate.ui.tables.enums.Operator.GreaterOrEqual,
      operand1: 100000000
    })
  ]
});

Constructor Details

new graphomate.ui.tables.RowFormatConfiguration(id?:string, settings?:object)

Accepts an id and a settings object or one or none of them. The settings object defines initial property values as well as aggregated and associated objects. Every setting can also be set using the related setter method. The supported settings are:

Properties:

General

visible : boolean (default: true)
type : graphomate.ui.tables.enums.RowFormatConfigType (default: Exception),

Condition

sourceColumnId : string (default: "")
targetColumnId : string (default: "")
operator : graphomate.ui.tables.enums.Operator (default: Greater)
operand1 : float (default: 0)
operand2 : float (default: 1)

Exception

exceptionColor : graphomate.ui.types.HexColor (default: "#8cb400")
exceptionFillType : graphomate.ui.enums.FillType (default: Filled)
exceptionShape : graphomate.ui.tables.enums.ExceptionShape (default: Circle)

NumberFormat

labelFormatMode : graphomate.ui.enums.LabelFormatMode (default: Basic)
basicNumberFormat : string (default: "0.0a")

Datatype

datatype : string (default: "")

EditableContent

editableContentBackgroundColor : graphomate.ui.types.HexColor (default: "#eeeeee")

CssClass

cssClassName : string (default: "rowFormatConfig")

CssStatement

cssStatement : string (default: "")

Aggregations:

extendedNumberFormat : graphomate.ui.ExtendedNumberFormat (default: null)

Property Details

Each property "sampleProperty" can be set using the related setter "setSampleProperty". Each setter expects a valid value for the related property as input parameter and throws an exception for invalid values. It returns the "this context" for method chaining. Each property "sampleProperty" can also be gotten using the related getter method "getSampleProperty". It expects no input parameters and returns the current value of the related property. Each property that represents or partially contains indices excepts a 0 based index.

setSampleProperty(value) - Sets the property to the passed value if valid and returns this for method chaining.
getSampleProperty() - Returns the current value of the property.

The Following Properties are available:

Property Name	Type	Description
visible	boolean	Sets whether the RowFormatConfiguration will be applied or disabled.
rowFormatConfigType	graphomate.ui.tables.enums.RowFormatConfigType	Sets the RowFormatConfiguration's type that applies to cells which meet the defined condition. You can select from a range of types which then can be further adjusted by the RowFormatConfiguration's properties. The type NumberFormat, for example, will apply a number format that can be defined using the property basicNumberFormat.
sourceColumnId	string	This property is part of the condition and defines the ID of the DataColumn that will be used as source for the calculation. The condition will be checked for each value of that column.
targetColumnId	string	This property is part of the condition and defines the ID of the DataColumn the RowFormatConfiguration gets applied to. The default value (empty string) will apply the RowFormatConfiguration to the RowTitles.
operator	graphomate.ui.tables.enums.Operator	The operator is part of the condition and defines the operation that compares each value of the source column with operand1 (for binary operands like source<operand1) and operand2 (for ternary operands like operand1<source<operand2). The calculation's result for each value of the source column determines whether the RowFormatConfiguration will be applied to the target cell.
operand1	float	The operand1 is part of the condition. The result of a calculation based on the source column's value, the operator and operand1 will determine the appliance of the RowFormatConfiguration.
operand2	float	The operand2 is part of the condition and will only be used with ternary operators. The result of a calculation based on operand1, the source column's value and operand2 will determine the appliance of the RowFormatConfiguration.
exceptionColor	graphomate.ui.types.HexColor	This property is part of the exception configuration and defines the color of the exception symbols for rowFormatConfigType "Exception".
exceptionFillType	graphomate.ui.enums.FillType	This property is part of the exception configuration and defines the fill of the exception symbols for rowFormatConfigType "Exception".
exceptionShape	graphomate.ui.tables.enums.ExceptionShape	This property is part of the exception configuration and defines the shape of the exception symbols for rowFormatConfigType "Exception".
labelFormatMode	graphomate.ui.enums.LabelFormatMode	This property is part of the number format configuration and defines the number format mode (Basic or Extended) for rowFormatConfigType "NumberFormat".
basicNumberFormat	string	This property is part of the number format configuration and defines the basic number format for rowFormatConfigType "NumberFormat" and labelFormatMode "Basic".
datatype	string	This property defines the name of a datatype that will be applied to cells when type is set to "Datatype".
editableContentBackgroundColor	graphomate.ui.types.HexColor	Sets the color that will be applied to the background of cells when type is set to "EditableContent".
cssClassName	string	Defines a CSS class name that will be assigned to cells when row FormatConfigType is set to "CssClass".
cssStatement	string	Defines a CSS statement that will be applied to cells when type is set to "CssStatement". A valid value would be "color: red", for example.

IDs in XML

When using the tables in XML views, the view may manipulate the internal Ids of the graphomate objects by prefixing it with something like 'xmlview1–'. Therefore you can't rely on the local Ids you gave the column objects when referencing them in sourceColumnId and targetColumnId. In this case you should use global Ids. You can get them by using the .byId method from the view or the core. Here is a slightly unconvenient but working example of getting the correct global Id from a local one in the controller file to use it with the property sourceColumnId of a RowFormatConfiguration.

new graphomate.ui.tables.RowFormatConfiguration({
	sourceColumnId: this.getView().byId("myLocalDataColumnId").getId(),
	...
})

Aggregation Details

We decided to use aggregation over association for all managed items of the graphomate table because they can be bound to a model and associations can't. The disadvantage of using an aggregation is that a managed item can only be part of one aggregation. So the instance of an extendedNumberFormat for example can be part of an aggregation of table 1 but can't be part of an aggregation of table 2 while it is still part of table 1.

The Item of an aggregation named "sampleThing" that has a cardinality of 0...1 (and a multiplicity of 1:1) can be accessed by using one of the following methods:

getSampleThing() - Returns the current aggregated object or null.
setSampleThing(object) - Sets the provided object as the new aggregated object. Returns this for method chaining.
destroySampleThing() - Destroys the current aggregated object and clears the aggregation. Returns this for method chaining.

The following aggregations are available:

Aggregation Name	Aggregated Object Type	Cardinality	Description
extendedNumberFormat	graphomate.ui.ExtendedNumberFormat	0...1	The item of this aggregation allows you to configure the formatting of values. It gets applied to all cells that meet the defined condition when property labelFormatMode is set to Extended and type is set to "NumberFormat".

Browser not supported