Container types

  • Updated

  • steps: wizard, indicating where the user is in a flow. But the steps are not clickable.

  • tabs: tabs are clickable to switch

  • Accordion: Accordions are useful when you want to toggle between hiding and showing a large amount of content. The configuration is MUI-specific.

Container Property

The container has no property.

Features

Container-Level Validation

General

  • When an accordion/tabs/steps include several editable views/panels, it can be configured to indicate validation errors at the title when the corresponding panel that has the problematic view is collapsed.

    • The accordion must be sticky in order to keep the validation errors in those collapsed panels.

    • User can specify suffix icon or prefix icon (using validationErrorPrefixIcon). The icon name must be a valid Material UI Icon name

Example 140. Code JSON

"appearance": {
  "validationErrorSuffixIcon": "warning",
  "showValidationError": true,
  "sticky": true,
  "titles": [...]
}

Container-Level Validation.png
Status

Release Available

Status

Framework Name

2.9

Current

MUI

Mui Badge

General

The badge can be added to the titles of tabs/steps and the actions

Mui Badge1.png
Mui Badge2.png
"appearance": {
  "titles": [
    {
      "title": "Foo Foo",
      "badge": {
        "content": "$global.attr(badgeNumber);",
        "render": true
      }
    }, {...}
  ]
}
Mui Badge3.png
"componentActions": [
  {
    "name": "FooFooButton1",
    "actionType": "normal",
    "appearance": {
      "label": "Button One",
      "style": "primary",
      "position": "top-right",
      "badge": {
        "content": 40,
        "render": true
      }
    }
  }, …
]

  • Mui badge supports the following configuration attributes from material-ui badge (https://material-ui.com/components/badges/)

    • max

    • showZero

    • variant: can be "dot" or "standard"

    • overlap: can be "circle" or "rectangle"

    • anchorOrigin

    • color:"secondary" (default), "primary", or "error"

"badge": {
  "content": "$global.attr(largeNumber);",
  "max": 99
}
"global": {
  "largeNumber": 170
}
Mui Badge4.png
"badge": {
  "variant": "dot",
  "color": "primary",
  "anchorOrigin": {
    "vertical": "bottom",
    "horizontal": "left"  }
}
Mui Badge5.png
Status

Release Available

Status

Framework Name

3.6

Current

Mui

Search

Status

Release Available

Status

Framework Name

4.1

Current

Both MUI and MINT
General

  • For the containers (Tabs, Steps, and Accordions), afterimportingNested Actor, Widget, and Nested Widget, a portal admin can search through all the actors and widgets available in the portal.

  • When searching for an actor, the actor's name is case insensitive and if you do not specify a name to search, all the available actors are listed.

Done.png

In This Article