Touch UI Dialog - Collapsible Layout

With the understanding of the basic structure of Touch UI dialog, it is evident that with layouts and proper use of containers we can bring out the dialog look and feel we desire. In this post, l have tried a collapsible layout.

On Click of the text, it is as per the screenshot below.


Dialog structure to be created to bring out the above look and feel :


Must follow about collapsible:

• layout node with resourceType - granite/ui/components/foundation/layouts/collapsible has to be created under the content node(highlighted in red above)with
• resourceType - granite/ui/components/foundation/container
• jcr:title to be added to this content node(container) - .
• In this case, jcr:title -> Click here to fill dialog inputs
• Note: content node(in red) immediately holding the layout should not be of resourceType -granite/ui/components/coral/foundation/container. If we do, dialog fields will be displayed as if it is included without a layout.

Reasons for introducing coral/foundation/container before adding collapsible:

• margin property can be introduced only via coral/foundation/container -> space between dialog header and collapsible layout.
• Also, this coral container will hold the complete contents under it as a whole with the surrounding div. (per the container behavior discussed in the base dialog structure)
• Note: container can be of type(../component/foundation/container) as well in which case we can prevent the collapsible from covering the entire dialog content, but will be in touch with the dialog header without space/margin properties.
• Below is the screenshot (A) if we use the collapsible layout directly (Look and feel + dialog structure)

Screenshot A:

Dialog structure for the above.


Other screens:
Below is the case if we are not adding jcr:title property to the container node immediately holding the collapsible layout


Conclusion:
Based on the look and feel desired, we can use containers accordingly which will group/include resources considering the layout type.