Configuring Infusion Components

Overview

All Infusion Components allow integrators to configure the component to suit their particular implementation. This is accomplished through an options object that is filled in by the implementor and passed to the component's creator function.

Naturally, each component will have options that are specific to itself, but there are some consistencies across all components, and the general process is always the same:

The options object is a collection key/value pairs
Values may be:
- a boolean
- a string
- a number
- a function
- another JavaScript object
- an array of any of the above
The options object is always the last paramater to a creator function
The options parameter is optional
Any options not provided by the implementor revert to a default value

On this Page

So, the general idea is this:

var myOptions = {
    option1: "foo",
    option2: function () {
        ...
    },
    option3: {
        optA: "bar",
        optB: "bat"
    }
};

var myComponent = fluid.component(container, myOptions);

Example

In the case of the Inline Edit, for example, you might see this:

var ieOptions = {
    tooltipText: "You can click on this to edit it!",
    tooltipDelay: 3000
};
var myInlineEdit = fluid.inlineEdit(myContainer, ieOptions);

In this example, the implementor is overriding the default tooltip text (which is normally "Click here to edit") and the default delay before the tooltip appears (which is normally 2000ms, or 2 seconds). The rest of the configuration of this implementor's Inline Edit will conform to the default implementation.

How Options are Merged with Defaults

The way in which options are combined with default values depends on the specific options, as well as on the component. In some cases, a user-supplied value should completely override the default (for example, the delay on the Inline Edit tooltip). In other cases, the implementor may wish that the value they supply be added to the defaults (for example, in the definition of the keys that can be used to operate a component).

One of the options that all components accept is called the mergePolicy. This object provides instructions to the component regarding how to process user-supplied values, and each component has its own default merge policy. For detailed information about this option, see Options Merging for Infusion Components.

General Options

All of the components will accept the following options:

Name	Description
`selectors`	a set of CSS-based selectors identifying various parts of the component. NOTE: These selectors must be relative to the container of the element.
`styles`	a set of CSS class names that will be applied to various parts of the component. These names should correspond to styles defined by the implementor.

The default values for these options differ based on the component.