Dynamic Container

Status

General

• The dynamic container can receive a list of records from another actor.

  • The actor type can be data-model so that it is not visible but can query data from the backend and pass the data to a dynamic container

    "generalHandlers": {
      "loaded": {
        "assignments": [{
          "field": "$state(AccountContainer);",
          "value": "$this;"      
        }]
        
      }
      
    }

  • Reloading the "source" actor will re-render the dynamic container.

• The dynamic container must have "dynamic": true in "appearance"

• Dynamic container only has a single child division with its title. But each record displays a section.

  "appearance": {
    "titles": [{
      "title": "$this.attr(Name); — $this.attr(Industry);"    
    }],
    "dynamic": true
    
  }

• $this.attr() uses the data from the specific record.

  

• Inside the child division, actors can be added, which will be repeated in the section of each record.

  • For example, if ContactList is added to the child division, it repeats in each dynamic section, as shown in the next slide. Note that the actor bar displays "ContactList" in each section. Clicking any actor bar opens the same configuration panel/dialog for ContactList.

  • However, the ContactList in each section has its unique name by appending the record data ID after the common name, for example, ContactList:001f400000wBREzAAO. The unique actor name is not displayed in the actor bar but can be used in the configuration, for example, reloading ContactList in a specific section.

    "updates": [{
      "name": "$nav.reloads.add;",
      "value": [ "ContactList:$global.attr(selectedAccountId);" ]
    }]

• Actors in the child division can refer to the record data using $parent.attr().

{
  "structureName": "ContactList",
  "tableName": "contact",
  "whereClause": {
    "freeForm": "account.id = ':accountId'"    
  },
  "sections": [...]
}

"property": {
  "structureName": "ContactList",
  "whereClause": {
    "accountId": "$parent.attr(id);"    
  }
}
"componentActions": [{
  "name": "addContact",
  "handler": {
    "assignments": [{
      "field": "$global.attr(selectedAccountId);",
      "value": "$parent.attr(id);"      
    }],
    "updates": [{
      "name": "$nav.overlay.add;",
      "value": "addContactOverlay"      
    }]
    
  }
}]

• Each dynamic section can have recordActions specified in the dynamic container.

"recordActions": [{
  "name": "editAccount",
  "handler": {
    "assignments": [{
      "field": "$global.attr(selectedAccountId);",
      "value": "$this.attr(id);"      
    }],
    "updates": [{
      "name": "$nav.overlay.add;",
      "value": "editAccountOverlay"      
    }]
    
  }
  
}]

• Dynamic sections can be expanded and collapsed independently.

  Note:

  In MUI only one accordion can be expanded at once (which is the MUI accordion default behavior), whereas in Mint's Dynamic Container all the accordions can be expanded and collapsed independently.

{
  "titles": [
    {
      "title": "$this.attr(Name); — $this.attr(Industry);"    }
  ],
  "dynamic": true,
  "entryCollapse": {
    "collapsed": false,
    "collapsibleIcons": {
      "expanded": "<span class=\"fa fa-chevron-down\"/>",
      "collapsed": "<span class=\"fa fa-chevron-right\"/>"    }
  }
}