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

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

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

---

ActionBar

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

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

Background

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, HorizontalIcons
ObjectCard	Title, Subhead, Footnote, Description, StatusText, DetailImage, BackgroundColor
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
CalendarSection	Calendar, InnerMonthLabel, WeekDayLabel, WeekDayLabelToday, Header, Dates

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.

For ObjectCell, it consists of sub-controls, namely AvatarStack and AvatarGrid. The Avatars that are configured in these sub-controls can be styled individually and examples can be found here.