Appearance

  • Updated

Appearance

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

Code JSON
Copy
“appearance”: {
  “label”: “...”,
  “style”: “...”,
  “position”: “...”,
  “tooltip”: “...”,
  “render”: “...”,
  “enable”: “...”
  
}
PropertyDescriptionStatus
columns: 3 three cards in a card view
fieldColumns: 2two-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 AvailableStatusFramework Name
InitialCurrentMUI and Mint

Sub-title

Default Value

subTitle

General

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Text Before

Default Value

textBefore

General

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Text After

Default Value

textAfter

General

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Blank Message

Default Value

blankMessage

General

May include variable expressions and should be rendered as HTML.

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Sorting

General

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Implementation Example

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

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)"    }
  }
}

Sortable Fields

Default Value

sortableFields

General

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Sorted Field

Default Value

sortedField

General

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Sort Text

Default Value

sortText

General

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Group By

Default Value

groupBy

General

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

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Implementation Example

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

Code JSON
Copy
"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);
"  },
...

groupBy with render - Groups with different titles

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

Code JSON
Copy
"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
Copy
"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 AvailableStatusFramework Name
2.9CurrentMUI

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
Copy
"groupBy": {
  "collapsibleIcons": { "collapsed": "expand_less", "expanded": "expand_more" },
  "collapsed": false,
  "field": "Industry",
  "ascending": false,
  "titles": [{ "title": "$this.attr(Industry);" }]
}

Show Section title

Status

Release AvailableStatusFramework Name
InitialCurrentMUI and Mint

Default Value

showSectionTitle

General

Section Style

Status

Release AvailableStatusFramework Name
InitialCurrentMUI 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 AvailableStatusFramework Name
InitialCurrentMUI 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 AvailableStatusFramework Name
InitialCurrentMUI and Mint

Default Value

‘primary’ or ‘secondary’

General

render

Status

Release AvailableStatusFramework Name
InitialCurrentMUI 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
Copy
"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
Copy
"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 AvailableStatusFramework Name
InitialCurrentMUI 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 AvailableStatusFramework Name
2.9CurrentMUI
Note:

This configuration is MUI-specific.

General

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

Implementation Example

Code JSON
Copy
"appearance": { "fieldAlignment": { "AnnualRevenue": "right" } }

Code JSON
Copy
"appearance": { "fieldAlignment": { "amount": "right" }, }

{ "fieldName": "amount",
  "fieldUi": {
    "fieldType": "range", "label": "Amount",
    "rangeOptions": {...},
    "format": {...} } }

Collapsible Hidden Fields

Status

Release AvailableStatusFramework Name
2.9CurrentMUI
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
Copy
"appearance": {
  "entryCollapse": {
    "collapsed": true,
    "collapsibleIcons": {
      "collapsed": "expand_more",
      "expanded": "expand_less"      
    },
    "collapsedHiddenFields": [ "Name", "Industry" ]
    
  },
…
}

stylingClassNames

Status

Release AvailableStatusFramework Name
3.2CurrentTBC

General

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

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

stylingClassNames

Status

Release AvailableStatusFramework Name
3.3CurrentMint 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
Copy
"appearance": {
  ...
  "stylingClassNames": {
    "records": "…"    "actions": {
      "default": …,
      "componentActionsTop": …,
      "componentActionsBottom": …,
      "componentActionsTopLeft": …,
      "componentActionsTopRight": …,
      "componentActionsBottomLeft": …,
      "componentActionsBottomRight": …,
      "recordActionsTop": …,
      "recordActionsBottom": …,
      "recordActionsTopLeft": …,
      "recordActionsTopRight": …,
      "recordActionsBottomLeft": …,
      "recordActionsBottomRight": …,
      "actionName1": …,
      "actionName2": …
      
    }
    
  }
}

In This Article