Dynamic Container – Symphonix

Status

Release Available	Status	Framework Name
3.8	Current	Mui
3.5	Current	Mint Only

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().

component structure

{
  "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\"/>"    }
  }
}

Access all the children data of a dynamic container actor and count

Status

Release Available	Status	Framework Name
4.1	Current	Mint and MUI both

General

As a Portal administrator, you can access all the children's data corresponding to a parent dynamic actor and count the number of records. This is helpful to show the number of records available or selected by an end-user.

Note

For nested parsing, the "enableNestedExpParsing": trueneeds to be added under the Global setting.

Example 144. Code JSON

$children(parentActor, contactList).count();

Where,

parentActor: Name of the dynamic container actor.
contactList: Name of the child actor within the dynamic container actor.

You can also get the total counts for the titles.

Example 145. Code JSON

"titles": [
    {
      "title": "$this.attr(Name); — $this.attr(Industry); ($interaction(ContactList123:$this.attr(id);).attr(selectedIds).count(); of $state(ContactList123:$this.attr(id);).count(); Selected)"    }
  ]

Data-model Component to Show Global Loader

Status

Release Available	Status	Framework Name
4.1	Current	Both Mui and Mint

General

When a data-model component is fetching data from the backend, the portal can show the global loading animation. The Messages tab is newly introduced for Builder to support the Data model loader.

To enable the global loader for the data-model component, a portal admin should edit the actor using the JSON view, and then add the following configuration on the Messages tab:

Example 146. Code JSON

{
  "showLoadingAnimation": true
}

Group by in Dynamic Containers

Status

Release Available	Status	Framework Name
4.1	Current	MUI

General

As a Portal Admin, you can group all the parent records based on a key in a dynamic container in the List-view.

Example 147. Code JSON

"groupBy": {
    "field": "Industry",
    "ascending": false,
    "titles": [
      {
        "title": "Industry : $this.attr(Industry); <p>Short description of the industry</p>"      }
    ],
    "collapsed": true,
    "collapsibleIcons": {
      "collapsed": "expand_less",
      "expanded": "expand_more"    }
  }

$interaction Through Assignments

Status

Release Available	Status	Framework Name
4.2	Current	Mui and Mint

General

A portal administrator can update $interaction selected Variables through Assignments.

Example 148. Selecting - Code JSON

"handler": {
            "assignments": [
                {
                    "field": "$interaction(ContactList123:$parent.attr(id);).attr(selectedIds);",
                    "value": [
                        "$this.attr(id);"                    ]
                }
            ]
        }

To remove the selection, pass an empty array for the value.

Example 149. Removing - Code JSON

 "handler": {
            "assignments": [
                {
                    "field": "$interaction(ContactList123:$parent.attr(id);).attr(selectedIds);",
                    "value": []
                }
            ]
        }

Example

In the following image, a Portal user can click Select All to select both Party 1 and Party 2 at once.

Select-all-$-interaction-asssignment.png

Reload a Specific Child of a Dynamic Container

Status

Release Available	Status	Framework Name
4.1	Current	Both MUI and Mint

General

In a dynamic container, n number of child actors get rendered on the page based on the parent actor's record count and have the same actor name. To reload a specific child, use the following configurations:

Note

The following configuration needs to be added under a specific action for the required child actor. When a user clicks on that action, then the required child actor will be reloaded.

Example 150. Code JSON

"updates": [
    {
      "name": "$nav.reloads.add;",
      "value": "selectedContactList:$parent.attr(id);"    }
  ]

Where the "selectedContactList" is the child actor's name but selectedContactList:$parent.attr(id); points to a specific child actor.

Render Dynamic Container Entries as Tiles

Status

Release Available	Status	Framework Name
4.1	Current	Both MUI and Mint

General

A portal admin can configure the dynamic container entries to be rendered as tiles or a list of records. Also, a portal admin can provide a toggle switch for an end user to switch between a list and tiles.

Note

There will be no Expand All or Collapse All option in a tile view as there will be no collapsible entries.
The configuration has to be added under the Parent actor for the Dynamic Container.

Example 151. Code JSON

apperance{
  .....
  "showListOrTileViewToggleBtn": true,
  "currentRenderView": "tiles",
  .....
}

Where,

showListOrTileViewToggleBtn: Accepts a boolean indicating whether a toggle switch should be shown or not. The default value is false. When set to true, a toggle switch is available for an end user to switch between a list and tiles.
currentRenderView: Accepts either "tiles" or "list" string as value. This informs how the entries should render on page load. The default value is "list".

Note

If the config is set to "tiles" then all the data will be displayed as cards.

Actor titles when dynamic container entries are rendered as tiles

In a tile view, the title from the parent actor will not be rendered, so we should have a title in the child actor rendered conditionally.

Example 152. Code JSON

appearance{
  "title": "$parent.attr(Name);",
  "renderText": {
    "title": "$nav(parentActor).appearance(currentRenderView); == \"tiles\""    
  }
}

Validation in Dynamic Container

Status

Release Available	Status	Framework Name
4.3	Current

General

A Portal administrator can configure a dynamic container to handle the validation of its child Actors on performing a normal, save, and submit action at the dynamic container level, and display the error messages to the user.

On user action, all the child actors that are configured are validated, all the error fields and accordions are highlighted, and based on the accordion state, the user is auto-scrolled to one of the following places:

If the accordion is in the expanded state, the user is scrolled to the first error field in the accordion.
If the accordion is in the collapsed state, the user is scrolled to the accordion and can expand the accordion to look for the specific error fields.

Example 153. Code JSON

{"name": "submitData",
  "actionType": "submit",
  "validation": ["contactListAsPicklist"],
  ........
},

"appearance" : {
     "validationErrorSuffixIcon": "warning",
     "showValidationError": true,
      …....
}