Overview

Composite panels allow you to combine several small panels – subpanels – into one larger panel. Subpanels are defined normally in an auxiliary schema; Composite panels define a list of subpanels that should be included in the composite panel.

Grades

Composite panels must be defined with the fluid.prefs.compositePanel grade, as shown on line 2 in the following code block:

fluid.defaults("my.panels.composite", {
    gradeNames: ["fluid.prefs.compositePanel", "autoInit"],
    ...
});

It is expected that composite panels will be quite simple in most cases, functioning strictly as a container for subpanels. It may contain some labels that All they need is any selectors and prototrees needed for a label, or heading, or anything general to the entire composite panel.

Subpanels are defined with the regular fluid.prefs.panel grade.

Composite Panel Definition

A composite panel is defined in the auxiliary schema, in a special block called groups, which has the following general format:

groups: {
    <composite panel name>: {
        "container": <selector of element in preferences editor where panel should be rendered>,
        "template": <path and filename of composite panel template>,
        "message": <path and filename of composite panel message file>,
        "type": <grade name of composite panel>,
        "panels": [<list of subpanels to include in this composite panel>]
    },
    <composite panel name>: {...},
    ...
}

In the code block above, the panels list on line 7 is an array of string subpanel names used as keys in the auxiliary schema to define the subpanels.

Templates

A composite panel and its subpanels each have their own HTML template. The composite panel template must contain elements that will serve as a container for the subpanels.

Auxiliary Schema Declarations

The subpanel declarations in the auxiliary schema will reference the selectors for these elements.

Message Bundles

A composite panel and its subpanels can each have their own JSON message file.

Examples

<div class="my-composite-panel">
    <div class="subpanel-1-container"></div>
    <div class="subpanel-1-container"></div>
</div>

preference1: {...},
preference2: {...},
groups: {
    composite1: {
        "container": ".my-composite-1",
        "template": "%prefix/composite1.html",
        "message": "%prefix/composite1.json",
        "type": "fluid.prefs.panel.composite1",
        "panels": ["preference1", "preference2"]
    }
}