Skip to content

Unified Styling

MDK support styling with Less (which stands for Leaner Style Sheets) to support multi-platforms styling capability. General styling designs and methods can be referenced to doc

Below are styling references for specific UI elements.


Page styling is by Type-selector. Only 'background-color' and 'color' properties can be styled. Example:

MDKPage {
  color: white; 
  background-color: blue;


Actionbar styling is by Type-selector. Only 'background-color' and 'color' properties can be styled. Example:

ActionBar {
  color: white; 
  background-color: blue;

ActionBarTitle styling is by Type-selector. This is to set custom style on ActionBar title. Example:

ActionBarTitle {
  color: white; 
  font-size: 17;
  font-family: "system";
  font-weight: 600;
  font-style: normal;


Toolbar styling is by Type-selector. Only 'background-color' and 'color' properties can be styled. On iOS platform to customize the ToolBar background color use the property, bartintcolor. Example:

ToolBar {
  color: white; 
  background-color: blue;  /* Android */
  bartintcolor: blue;      /* iOS */

Sub-control Styling

Many controls are constructed by a few sub-controls. To style these controls, it needs to apply style class on sub-controls.

Form Cell Sub-controls

Form Cell Control Available Sub-controls
AttachmentFormCell Background
ButtonFormCell Background, Value
DatePickerFormCell Background, Caption, Value
DurationPickerFormCell Background, Caption, Value
FilterFormCell Background, Caption
InlineSignatureCaptureFormCell Background, Caption, SignatureCapture, SignatureCaptureUnderline
ListPickerFormCell Background, Caption, Value
NoteFormCell Background, Value
SegmentedFormCell Background, Caption
SignatureCaptureFormCell Background, Caption, Value, SignatureCapture, SignatureCaptureUnderline
SimplePropertyFormCell Background, Caption, Value
SwitchFormCell Background, Switch, Caption
TitleFormCell Background, Value

All the form cells controls allow you to style its specific sub-controls. To utilize this styling from a rule, you should add something like:

switchFormcell.setStyle("FormCellSwitchNormal", "Switch");
switchFormcell.setStyle("FormCellSwitchCritical", "Caption");

into the code.

The styles might contain e.g. the following settings:

.FormCellSwitchNormal {
  background-color: @green1;

.FormCellCaptionCritical {
  background-color: @green1;
  color: @purple1;
  font-typeface:: italic;
  font-size: 12;

This will set the 'Switch' sub-control of the SwitchFormcell to use 'FormCellSwitchNormal' style and the 'Caption' sub-control to use 'FormCellCaptionCritical' style


All form cell controls has a special base sub-control called: Background. If you set the style of this sub-control, all of the sub-controls inside the cell receive the same style. In order to utilize this styling from a rule you should add something like:

switchFormcell.setStyle("FormCellBackgroundCritical", "Background");

into the code.

The style 'FormCellBackgroundCritical' might contain e.g. the following settings:

.FormCellBackgroundCritical {
  background-color: @green1;
  color: @purple1;
  font-typeface:: italic;
  font-size: 12;

This will set the style of all sub-controls (both Switch and Caption) to use 'FormCellBackgroundCritical' in the SwitchFormcell.

Sub-controls of Section Control

Section Control Available Sub-controls
ChartCard Title, Subtitle, StatusText, SeriesTitle, TrendTitle, NoDataText, TrendImage
ChartContent Title, Subtitle, StatusText, CategoryTitles, NoDataText
ContactCellItem Headline, Subheadline, Description, DetailImage
ImageCell Image
KPIHeader TintColor, BackgroundColor, Icon
KPISection TintColor, BackgroundColor, Icon
ObjectCell Title, Subhead, Footnote, Description, StatusText, SubstatusText, DetailImageText, DetailImage, StatusImage, SubstatusImage, BackgroundColor, Icons, AccessoryButtonIcon
ObjectHeader BodyText, Description, Footnote, HeadlineText, StatusText, Subhead, SubstatusText, ChartTitle, ChartSubTitle, ChartTrendTitle, ChartKPIUnit, ChartKPIValue, ChartKPIIcon, NoDataText, KPITintColor, KPICaption, DetailImage, StatusImage, SubstatusImage, ObjectHeader, ChartTrendImage, ChartKPIIcon, KPIIcon
ProfileHeader Description, Headline, Subheadline, DetailImage, BackgroundColor
SimplePropertyCell KeyName, Value
ImageSection ImageBackgroundColor, BackgroundColor, Image

For ObjectHeader, the available sub-controls includes all possible sub-controls when its AnalyticView is configured as Chart or KPI. You may style on sub-controls of section controls from a rule as well. The method is the same as Form Cells, as examples above.