Child pages
  • Renderer Component Tree Expanders

Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

This functionality is Sneak Peek status. This means that the APIs may change. We welcome your feedback, ideas, and code, but please use caution if you use this new functionality.

On This Page

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:

var protoTree = {
    expander: {
        type: "fluid.renderer.repeat",
        repeatID: "recordType",
        controlledBy: "recordlist.name",
        pathAs: "elementPath",
        tree: { value: "${{elementPath}}" }
    }
};

This prototree to the left uses the "fluid.renderer.repeat" expander (described in more detail below), which repeats the provided tree based on the data found in data model at the path specified by controlledBy. The expander saves the developer the work of having to create a prototree with an array of Bound components with a ":" at the end of the ID (indicating a repeated element), one for each piece of data in the data model:

var protoTree = {
    recordType: {
        children: [
            { "recordType:": "${recordlist.name.0}" },
            { "recordType:": "${recordlist.name.1}" },
            { "recordType:": "${recordlist.name.2}" },
            { "recordType:": "${recordlist.name.3}" },
            ...
        ]
    }
};

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

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

cspace.tabsList.modelToTree = function (model, options) {
    var tree = {
        expander: {
            type: "fluid.renderer.repeat",
            repeatID: "tab:",
            controlledBy: "tabs",
            pathAs: "tabInfo",
            tree: {
                tabLink: {
                    target: "${{tabInfo}.href}",
                    linktext: {
                        messagekey: "${{tabInfo}.name}"
                    }
                }
            }
        }
    };
    return tree;
};

In this example, the fluid.renderer.repeat expander is being used to declare a tree for a set of tabs. The controlledBy property indicates that the data model field of tabs contains the data to be used.

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

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

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

Examples

expander: {
    type: "fluid.renderer.condition",
    condition: that.options.showDeleteButton,
    trueTree: {
        deleteButton: {
            decorators: [{
                type: "attrs",
                attributes: {
                    value: that.options.strings.deleteButton
                }
            }, {
                type: "jQuery",
                func: "prop",
                args: {
                    disabled: that.checkDeleteDisabling
                }
            }]
        }
    }
}

In this example, the condition is that.options.showDeleteButton. The renderer will evaluate the component's showDeleteButton option and if it is true will use the component tree specified by trueTree. Note that no falseTree is provided. If the option is false or not present, nothing will be rendered.

expander: {
    type: "fluid.renderer.condition",
    condition: that.showMediumImage(),
    trueTree: {
        mediumImage: {
            decorators: [{
                type: "addClass",
                classes: that.options.styles.mediumImage
            }, {
                type: "attrs",
                attributes: {
                    alt: that.options.strings.mediumImage,
                    src: that.options.recordModel.fields
                           && that.options.recordModel.fields.blobs
                             && that.options.recordModel.fields.blobs.length > 0 ? 
                        that.options.recordModel.fields.blobs[0].imgMedium : ""
                }
            }]
        },
        mediaSnapshot: {
            decorators: [{
                type: "addClass",
                classes: that.options.styles.mediaSnapshot
            }]
        }
    },
    falseTree: {
        mediaSnapshot: {}
    }
}

In this example, the condition is the return value of a call to that.showMediumImage(). If the function returns true, the image should be shown, and the trueTree component subtree will be used to render it. If the return value is false, the image should not be shown, and the falseTree subtree will be used to properly render the "empty space" instead of an image.

expander: {
    type: "fluid.renderer.condition",
    condition: {
        funcName: "cspace.header.assertMenuItemDisplay",
        args: "${{itemName}.hide}"
    },
    trueTree: {
        label: {
            target: "${{item}.href}",
            linktext: {
                messagekey: "${{item}.name}"
            }
        }
    }
}

In this example, the condition is a call to the function cspace.header.assertMenuItemDisplay() with a particular argument taken from the "itemName" subcomponent. If the function call returns true, the renderer component subtree specified by trueTree will be used.

  • No labels