Density Templates

Search…
Density Templates
C3 AI Component Library has two density templates available the "Classic" style or Dense" style.  The default theme is the "Classic" theme. This guide shows how to change the density templates.
Example of "Dense" theme: 
"Dense" style example
The dense style improves ease of viewing and navigating large amounts of content by making more content available on-screen by using decreased padding and margins, and smaller typography and headers.
The density templates are defined as C3 Types. These Types describe the properties and their values for each respective style.
The UiSdlDensityTemplate Type is used to implement the available density templates for your application, with each template configuration provided as seed data in JSON format. By creating your own seed data, you can define additional density templates.
Default C3 AI Style Templates
We provide the implementation of the default C3 AI Classic and Dense styles:
UiSdlDensityCategory.c3typ
C3DefaultClassicDensity.json
C3DefaultDenseDensity.json
1
/**
2
 * Enum type to contain values for density categories - pertaining to UI components and layouts
3
 */
4
@beta
5
@typeScript
6
enum type UiSdlDensityCategory {
7
  /**
8
   * 'Light' density means a standard padding and margins.
9
   */
10
  LIGHT = 'Light'
11
​
12
  /**
13
   * 'Dense' density means greater compression of content; less padding and margins
14
   */
15
  DENSE = 'Dense'
16
}
Copied!
1
{
2
  "breadcrumbsHeight": "42px",
3
  "breadcrumbsPadding": "6px 8px 6px 8px",
4
  "cardButtonTopMargin": "16px",
5
  "cardTitleHeight": "64px",
6
  "chartTooltipWidth": "268px",
7
  "componentMargin": "24px",
8
  "componentPadding": "24px",
9
  "densityCategory": "Classic",
10
  "dropdownDescriptionPadding": "2px 5px",
11
  "elementWhiteSpace": "unset",
12
  "extraSmallSizeMargin": "4px",
13
  "extraSmallSizePadding": "4px",
14
  "filterFieldTopMargin": "24px",
15
  "flexMaxWidth": "unset",
16
  "flexMinWidth": "257px",
17
  "fontSizeBody": "14px",
18
  "fontSizeH1": "1.714em",
19
  "fontSizeH2": "1.286em",
20
  "fontSizeMassive": "18px",
21
  "formFieldSidePadding": "12px",
22
  "formOuterPadding": "40px",
23
  "id": "C3DefaultClassicDensity",
24
  "largeSizeMargin": "16px",
25
  "largeSizePadding": "16px",
26
  "layoutMargin": "24px",
27
  "mainMenuFontSize": "10px",
28
  "mainMenuWidth": "56px",
29
  "margin": "16px",
30
  "mediumSizeMargin": "12px",
31
  "mediumSizePadding": "12px",
32
  "modalPadding": "40px",
33
  "padding": "16px",
34
  "smallSizeMargin": "8px",
35
  "smallSizePadding": "8px",
36
  "tabBarHeight": "60px",
37
  "tableRowHeight": "50px",
38
  "tabPanelDetailPadding": "10px",
39
  "tabPanelSubTitleMargin": "14px",
40
  "tabPanelTitleWidth": "330px",
41
  "textOverflow": "unset",
42
  "tileHeaderIconFontSize": "1.75em",
43
  "tileValueFontSize": "2.571rem"
44
}
Copied!
1
{
2
  "breadcrumbsHeight": "32px",
3
  "breadcrumbsPadding": "3px 4px 3px 4px",
4
  "cardButtonTopMargin": "8px",
5
  "cardTitleHeight": "51px",
6
  "chartTooltipWidth": "auto",
7
  "componentMargin": "16px",
8
  "componentPadding": "16px",
9
  "densityCategory": "Dense",
10
  "dropdownDescriptionPadding": "0px 0px",
11
  "elementWhiteSpace": "nowrap",
12
  "extraSmallSizeMargin": "2px",
13
  "extraSmallSizePadding": "2px",
14
  "filterFieldTopMargin": "16px",
15
  "flexMaxWidth": "242px",
16
  "flexMinWidth": "156px",
17
  "fontSizeBody": "12px",
18
  "fontSizeH1": "1.167em",
19
  "fontSizeH2": "1.334em",
20
  "fontSizeMassive": "16px",
21
  "formFieldSidePadding": "8px",
22
  "formOuterPadding": "16px",
23
  "id": "C3DefaultDenseDensity",
24
  "largeSizeMargin": "12px",
25
  "largeSizePadding": "12px",
26
  "layoutMargin": "16px",
27
  "mainMenuFontSize": "9px",
28
  "mainMenuWidth": "48px",
29
  "margin": "8px",
30
  "mediumSizeMargin": "8px",
31
  "mediumSizePadding": "8px",
32
  "modalPadding": "16px",
33
  "padding": "8px",
34
  "smallSizeMargin": "4px",
35
  "smallSizePadding": "4px",
36
  "tabBarHeight": "30px",
37
  "tableRowHeight": "32px",
38
  "tabPanelDetailPadding": "0px",
39
  "tabPanelSubTitleMargin": "12px",
40
  "tabPanelTitleWidth": "296px",
41
  "textOverflow": "ellipsis",
42
  "tileHeaderIconFontSize": "1.25em",
43
  "tileValueFontSize": "1.333em"
44
}
Copied!
Set your application theme
To set a new theme for your application, the UiSdlConfig Type is used. You can set seed data for  UiSdlConfig in your application package. The UiSdlStyleConfig is deprecated starting from 7.28.
To set seed data for UiSdlConfig
For example, to set your application to use C3-provided C3DefaultDark and C3DefaultDenseDensity:
1
exampleRepository
2
├── exampleUI
3
|   └── config
4
│   |   └── UiSdlConfig
5
│   |   |   └── UiSdlConfig.json
6
|   ...
7
│   └── package.json
8
└── repository.json
Copied!
Set seed data
The id of the density is set to C3DefaultDenseDensity. To have the default classic style, place C3DefaultClassicDensity.
UiSdlConfig.json
1
{
2
 "style": {
3
    "theme": {
4
        "id": "C3DefaultDark"
5
      },
6
    "density": {
7
        "id": "C3DefaultDenseDensity"
8
    }
9
 }
10
}
Copied!
Set style through the static console
1
UiSdlConfig.make().setConfigValue("style.density.id","C3DefaultDenseDensity")
Copied!
Last modified 2mo ago
Export as PDF
Copy link
Contents
Default C3 AI Style Templates
Set your application theme
To set seed data for UiSdlConfig