Renderer Component Tree Expanders

The Renderer offers some utility functions for simplifying the tree-creation process. These functions are called expanders because they expand information you provide into a full component tree. These expanders are specified in the prototree itself by name and and are provided options to control the expansion process. For example:

Using Expanders

Expanders are specified as wrappers around a component specification in the component tree: Instead of the usual componentID: {specification} form, the keyword expander is used, as shown below:

var tree = {
    expander: {
        type: "fluid.renderer.repeat",
        repeatID: "tab:",
        ....
    }
};

You can also specify multiple expanders within a prototree by providing an array of expander specification in the expander field, as shown below:

var tree = {
    expander: [
        {
            type: "fluid.renderer.repeat",
            repeatID: "tab:",
            ....
        },
        {
            type: "fluid.renderer.selection.inputs",
            selectID: "language",
            ....
        },
        ....
    ]
};

Available Expanders

Repetition Expander

The repetition expander takes care of replicating part of the prototree as many times as are required based on the data in the the model.

The following fields are supported by the fluid.renderer.repeat expander (required fields are bolded):

Field	Description	Values	Default

Field	Description	Values	Default
`type`	The type of the expander	"fluid.renderer.repeat"	N/A
`repeatId`	the id to use	String
`controlledBy`	EL path of repeated data in model	String
`tree`	A prototree snippet to use for the repeated data	Object
`pathAs`	The string that will be used in the `tree` to represent an instance of the repeated data in the data model.	String	none
`valueAs`		String	none
`ifEmpty`		boolean	false

Example

Selection To Inputs Expander

The simple "Select" protocomponent format shown on the ProtoComponent Types page is sufficient for a <select> element, but radio buttons and check boxes must also have entries for each button or box. The "selection to inputs" expander will automatically generate these entries based on the options available in the select.

The following fields are supported by the fluid.renderer.selection.inputs expander (required fields are bolded):

Field	Description	Values	Default

Field	Description	Values	Default
`type`	The type of the expander	"fluid.renderer.selection.inputs"	N/A
`selectId`	The ID of the selection itself.	String	none
`inputId`	The ID of the input element associated with the select.	String	none
`rowId`	The ID of the template for the row that is to be repeated for each possible selection.	String	none
`labelId`	The ID of the label for the input element.	String	none
`tree`	The prototree snippet containing the selection that is to be expanded	Object	none

Example

var tree = {
    expander: {
        type: "fluid.renderer.selection.inputs",
        rowID: "layout",
        labelID: "layoutLabel",
        inputID: "layoutChoice",
        selectID: "layout-checkbox",
        tree: {
            selection: "${layouts.selection}",
            optionlist: "${layouts.choices}",
            optionnames: "${layouts.names}"
        }
    }
};

Condition Expander

The condition expander provides a mechanism for selecting between two alternative renderer component sub-trees based on the outcome of a condition e.g. the boolean evaluation of a value, or the return value of a function call.

The following fields are supported by the fluid.renderer.condition expander (required fields are bolded):

Field	Description	Values	Default

Field	Description	Values	Default
`type`	The type of the expander	"fluid.renderer.condition"	N/A
`condition`	An object that can be evaluated as `true` or `false`, or a function that returns a boolean.	Object or Function	none
`trueTree`	(optional) A component sub-tree to be used in the case that the `condition` evaluates to `true`.	Object	none
`falseTree`	(optional) A component sub-tree to be used in the case that the `condition` evaluates to `false`.	Object	none

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

Renderer Component Tree Expanders

Using Expanders

Available Expanders

Repetition Expander

Example

Selection To Inputs Expander

Example

Condition Expander

Examples