Appearance

  • Updated

A collection of key-value pairs of all attributes related to the look and feel. The following attributes are grouped under appearance:

Example 1. Code JSON

“appearance”: {
  “label”: “...”,
  “style”: “...”,
  “position”: “...”,
  “tooltip”: “...”,
  “render”: “...”,
  “enable”: “...”
  
}

Property

Description

Status

columns: 3

three cards in a card view

fieldColumns: 2

two-column fields in each card

“sticky”: true

Sticky tabs/steps

 
“lifeCycle”: {
    “loadData”: ...
    “unmount”: {
        “Interaction”: [“groupCollapseStatus”],
        “dynamicPropertyAndAppearance”: true
}

Life-cycle update exceptions - the listed interaction statuses won’t be reset.

not in appearance builder yet

 
{
"backgroundImages": [{
"name": "csblogo_png",
"altText": "Company Logo",
"positionType": "topLeft",
"position": { "top": 0, "left": 0 },
"size": { "width": 155, "height": 40 }
}, {
"name": "logo2_png",
"altText": "Company Logo 2",
"positionType": "topRight",
"position": { "top": 0, "right": 0 },
"size": { "width": 128, "height": 128 }
}]
}

Static content can have images from static resources.

  • name is the static resource name.

  • altText is for accessibility.

not in appearance builder yet

Title

Default Value

title

General
Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint

Sub-title

Default Value

subTitle

General
Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint

Text Before

Default Value

textBefore

General
Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint

Text After

Default Value

textAfter

General
Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint

Blank Message

Default Value

blankMessage

General

May include variable expressions and should be rendered as HTML.

Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint

Sorting

General
Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint
Implementation Example

Sorting list-view, card-view, or queue-view.

Example 2. Code JSON

"ApplicationCardView": {
  "appearance": {
    "columns": 3,
    "sortableFields": ["genesis__Maximum_Financed_Amount__c", "Term_Text__c", "genesis__Interest_Rate__c"],
    "sortedField": {
      "name": "genesis__Maximum_Financed_Amount__c",
      "ascending": false
    },
    "sortText": {
      "sortBy": "Sort By",
      "lowToHigh": "(Low to High)",
      "highToLow": "(High to Low)",
      "aToZ": "(A to Z)",
      "zToA": "(Z to A)"    }
  }
}

Field-appearanace-highlighted.png
drop-down-appearance.png
Apperance-field-columns.png

Sortable Fields

Default Value

sortableFields

General
Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint

Sorted Field

Default Value

sortedField

General
Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint

Sort Text

Default Value

sortText

General
Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint

Group By

Default Value

groupBy

General

Group the records by certain fields. Group title can be configured.

Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint
Implementation Example

groupBy - list-view, card-view, or queue-view.

Code JSON

"BusinessDocumentQueueView": {
  "category": "component",
  "type": "queue-view",
  "property": {"structureName": "..."},
  "appearance": {
        "groupBy": {
          "field": "clcommon__Account__r.Name",
          "title": "$this.attr(clcommon__Account__r.Name); | $this.attr(clcommon__Account__r.Industry);
"  },
...
Apperanace-tabs-with-content.png

groupBy with render - Groups with different titles

Rabo example: only show title for the closed-deal section.

Appearance-side-by-side-images.png

Code JSON

"groupBy": {
  "field": "Is_Closed__c",
  “titles”: [{
    "title": "<div><div>Gesloten leningen</div><div>Hieronder vindt u voorbeelden van leningen welke al eerder via Rabo&Co zijn gefinancieerd. Voor deze leningen is de inschrijifperiode verlopen. U kunt zich niet meer inschrijven voor deze leningen.</div></div>",
    "render": "$this.attr(Is_Closed__c); == true"                    
  }]
},

Another Rabo example

Code JSON

"NotificationQueueView": {
  "property": {
    "structureName": "notificationQueueViewV2"  },
  "appearance": {
    "groupBy": {
      "field": "Required__c",
      "titles": [{
        "title": "Rabo&Co berichten",
        "render": "$this.attr(Required__c); == true"      }, {
        "title": "Wilt u een melding ontvangen als...",
        "render": "$this.attr(Required__c); == false"      }]
    }

Group By in MUI

Status

Release Available

Status

Framework Name

2.9

Current

MUI
General

  • In Material UI, groupBy is supported by queue view and card view.

    • Group can be expanded/collapsed if collapsibleIcons and collapsed are specified.

Code JSON

"groupBy": {
  "collapsibleIcons": { "collapsed": "expand_less", "expanded": "expand_more" },
  "collapsed": false,
  "field": "Industry",
  "ascending": false,
  "titles": [{ "title": "$this.attr(Industry);" }]
}
Group By - 1.png
Group By - 2.png

Show Section title

Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint
Default Value

showSectionTitle

General

Section Style

Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint
Default Value

‘step’ or ‘layout’

General

  • step: one section is visible at a time.

  • layout: all sections are visible.

Style Conversion

[name = “foo”].section -> [data-style-section-name = “foo”]

Style Conversion - Actor

[name = “foo”] -> [data-style-actor-name = “foo”]

.entry -> [data-style-id = “record”]

.entry .content -> [data-style-id = “record”] . record-content

Style Conversion - Field

.field -> [data-style-id = “field”]

[name = “foo”].field -> [data-style-field-name = “foo”]

Style Conversion - Action

[name = “foo”].action-wrapper -> [data-style-action-name = “foo”]

Field Style

Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint
Default Value

‘stack’ or ‘side-by-side’

General

  • For each field, by default the label is about the value (‘stack’ style)

  • ‘side-by-side’: label and value are side by side in a single row.

Style

Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint
Default Value

‘primary’ or ‘secondary’

General
Tab-appearanace-color-changed.png
Tab-appearance.png

render

Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint
Default Value
General

render: string can be assigned to

  • component, content, container (render under appearance)

  • section (renderSections under appearance)

  • field (renderFields under appearance)

  • action (render attribute)

  • disclosure (render attribute)

render string can be evaluated against

  • The data from the current actor

    • Field value: $this.attr(fieldName);

    • Aggregated value: $this.count();, $this.sum(fieldName);

    • Concatenation: $this.attr(fieldName).count();

  • The data from all actors:

    • Field value: $state(actorName).attr(fieldName);

    • Aggregated value: $state(actorName).count();, $state(actorName).sum(fieldName);

    • Concatenation: $state(actorName).attr(fieldName).count();

  • The global data:

    • Field value: $global.attr(fieldName);

render string is based on math.js syntax.

Code JSON

"renderSections": {
"borrower": "$this.attr(Party_Type__r).attr(Name); == \"BORROWER\"",
"guarantor": "$this.attr(Party_Type__r).attr(Name); == \"GUARANTOR\""}

"renderFields": {
        "Guest_Account__c": "false"}

"render": "$this.attr(Company_Name__c); != undefined"
Implementation Example

Code JSON

"renderSections": {
"common": "false",
        "corporation": "$this.attr(Legal_Entity_Type__r.Name); == \"Corporation\" or $this.attr(Legal_Entity_Type__r.Name); == \"Limited Liability Company\" or $this.attr(Legal_Entity_Type__r.Name); == \"Partnership\" or $this.attr(Legal_Entity_Type__r.Name); == \"Trust\" or $this.attr(Legal_Entity_Type__r.Name); == \"Government\" or $this.attr(Legal_Entity_Type__r.Name); == \"Association\"",
        "individual": "$this.attr(Legal_Entity_Type__r.Name); == \"Sole Proprietorship\" or $this.attr(Legal_Entity_Type__r.Name); == \"Individual\""}

"render": "$this.attr(clcommon__DocCat_Attachment_Associations__r).count(); > 0",

enable

Status

Release Available

Status

Framework Name

Initial

Current

MUI and Mint
Default Value
General

enable: string can be assigned to

  • field (enableFields under appearance)

  • action (enable attribute)

  • disclosure (enable attribute)

Field Alignment

Status

Release Available

Status

Framework Name

2.9

Current

MUI

Note

This configuration is MUI-specific.

General

Can be applied to list-view fields and editable (detail-view) fields

Implementation Example

Code JSON

"appearance": { "fieldAlignment": { "AnnualRevenue": "right" } }
Field Alignment - 1.png
Field Alignment - 2.png

Code JSON

"appearance": { "fieldAlignment": { "amount": "right" }, }

{ "fieldName": "amount",
  "fieldUi": {
    "fieldType": "range", "label": "Amount",
    "rangeOptions": {...},
    "format": {...} } }
Field Alignment - 3.png

Collapsible Hidden Fields

Status

Release Available

Status

Framework Name

2.9

Current

MUI

Note

This configuration is MUI-specific.

General

  • In Material UI, entryCollapse is only supported by card view

    • Each record (card) is a card view that can be expanded/collapsed.

    • The expanded/collapsed icon is displayed as the rightmost icon with the record actions.

Code JSON

"appearance": {
  "entryCollapse": {
    "collapsed": true,
    "collapsibleIcons": {
      "collapsed": "expand_more",
      "expanded": "expand_less"      
    },
    "collapsedHiddenFields": [ "Name", "Industry" ]
    
  },
…
}
Collapsible Hidden Fields 1.png
Collapsible Hidden Fields 2.png

stylingClassNames

Status

Release Available

Status

Framework Name

3.2

Current

TBC
General

Third-party class names can be added to different UI widgets through appearance

Code JSON

"appearance": {
  ...
  "stylingClassNames": {
    "actor": …
    "record": …
    "section": …
    "field": …
    "title": …
    "subtitle": …
    "text-before": …
    "text-after": ...
    "blank-message": …
    "label": …
    "actions": {
      "default": …,
      "actionName1": …
      "actionName2": …
      
    }

stylingClassNames

Status

Release Available

Status

Framework Name

3.3

Current

Mint and Ext
General

  • actions specific

  • records

    • The wrapper of all the records

    • Different from record, which add classes to individual record

Note

mint and ext only

Code JSON

"appearance": {
  ...
  "stylingClassNames": {
    "records": "…"    "actions": {
      "default": …,
      "componentActionsTop": …,
      "componentActionsBottom": …,
      "componentActionsTopLeft": …,
      "componentActionsTopRight": …,
      "componentActionsBottomLeft": …,
      "componentActionsBottomRight": …,
      "recordActionsTop": …,
      "recordActionsBottom": …,
      "recordActionsTopLeft": …,
      "recordActionsTopRight": …,
      "recordActionsBottomLeft": …,
      "recordActionsBottomRight": …,
      "actionName1": …,
      "actionName2": …
      
    }
    
  }
}

In This Article