Component Configuration Options
- Anastasia Cheetham
This page is still being drafted.
Infusion components are configured using options that are defined by the component developer and customized by the integrator. While component developers are free to define whatever options are appropriate for their component, the Infusion Framework supports a number of predefined options. This page briefly describes these predefined options and provides links more information about the related Framework functionality.
Some predefined options should not be overridden by integrators: They are strictly for the use of the component developer. This is noted in the descriptions below.
Options Supported By All Components Grades
The following options are supported by all component grades:
gradeNames
Description |
An array of string grade names. |
|---|---|
Notes |
In addition to the grade names, the array can include the special |
Example Definition |
fluid.defaults("component.name", {
gradeNames: ["fluid.modelComponent", "fluid.eventedComponent", "autoInit"],
...
});
|
Example Override |
N/A |
See also |
initFunction
Description |
The string name of the component initialization function. |
|---|---|
Notes |
If specified, this option overrides the default initialization function associated with the desired component grade. Do not use this option unless you know what you're doing. |
Example Definition |
fluid.defaults("component.name", {
initFunction: "component.componentInitFunc",
...
});
|
Example Override |
N/A |
See also |
nickName
Description |
Specifies a custom nickname for the component. The nickname is used by the Framework to reference the component type. By default, the nickname is derived from the component name. |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("component.name", {
nickName: "myComponentName",
...
});
|
Example Override |
var myComp = component.name(container, {
nickName: "myCoolComponent",
...
});
|
See also |
preInitFunction
Description |
Specifies an event listener (or array of listeners) that will be triggered at the pre-initialization phase of the component lifecycle. |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("component.name", {
preInitFunction: "component.name.preInit",
...
});
|
Example Override |
N/A |
See also |
postInitFunction
Description |
Specifies an event listener (or array of listeners) that will be triggered at the post-initialization phase of the component lifecycle. |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("component.name", {
postInitFunction: "component.name.postInit",
...
});
|
Example Override |
N/A |
See also |
finalInitFunction
Description |
Specifies an event listener (or array of listeners) that will be triggered at the end component lifecycle. |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("component.name", {
finalInitFunction: "component.name.finalInit",
...
});
|
Example Override |
N/A |
See also |
components
Description |
An object containing named definitions of the component's subcomponents. |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("component.name", {
components: {
subcomponent1: {
type: "component.subcomp1",
options: {...}
},
...
},
...
});
|
Example Override |
var myComp = component.name(container, {
components: {
subcomponent1: {
options: {...}
}
},
...
});
|
See also |
mergePolicy
Description |
An object providing instructions for how particular options should be merged when integrator options are merged with default values. |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("component.name", {
mergePolicy: {
option1: "preserve",
option2: "replace",
....
},
...
});
|
Example Override |
N/A |
See also |
invokers
Description |
An object defining methods on the component whose arguments are resolved from the environment at invocation time. |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("component.name", {
invokers: {
inv1: {...},
inv2: {...},
},
...
});
|
Example Override |
N/A |
See also |
returnedPath
Description |
... |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("component.name", {
< >,
...
});
|
Example Override |
N/A |
See also |
|
Little Components
Components defined with a grade of littleComponent support all of the common options described above, and no others. Component developers are free to define their own additional options.
See also: Component Grades
Model Components
Components defined with a grade of modelComponent support all of the common options described above, as well as those defined below. Component developers are free to define their own additional options.
See also: Component Grades
The following options are supported by model components:
model
Description |
An object containing the data model to be used by the component. |
|---|---|
Notes |
If a ChangeApplier is not provided using the |
Example Definition |
fluid.defaults("fluid.pager", {
model: {
pageIndex: undefined,
pageSize: 10,
totalRange: undefined
},
...
});
|
Example Override |
var myPager = fluid.pager(container, {
model: {
pageIndex: 1
},
...
});
|
See also |
Model Objects |
applier
Description |
A ChangeApplier object for the model provided with the |
|---|---|
Notes |
It is not necessary to provide an applier: By default, an applier will be created with |
Example Definition |
fluid.defaults("component.name", {
applier: "{parentComponent.applier}",
...
});
|
Example Override |
N/A |
See also |
ChangeApplier API |
changeApplierOptions
Description |
Options that will be passed on to |
|---|---|
Notes |
If a ChangeApplier is provided using the |
Example Definition |
fluid.defaults("component.name", {
model: {...},
changeApplierOptions: {
cullUnchanged: true
},
...
});
|
Example Override |
var myComp = component.name(container, {
model: {...},
changeApplierOptions: {
cullUnchanged: true
},
...
});
|
See also |
Evented Components
Components defined with a grade of eventedComponent support all of the common options described above, as well as those defined below. Component developers are free to define their own additional options.
See also: Component Grades
The following options are supported by evented components:
events
Description |
An object containing key/value pairs that define the events the component will fire: the keys are the event names, the values define the type of the event (see Infusion Event System for information on the different event types). |
|---|---|
Notes |
The Framework will create event firers for the listed events. It is the responsibility of the component to fire the events at the appropriate times. |
Example Definition |
fluid.defaults("component.name", {
events: {
onSave: "preventable",
onReady: null
},
...
});
|
Example Override |
N/A |
See also |
listeners
Description |
An object defining listener functions for the events supported by a component. |
|---|---|
Notes |
Both component developers and integrators can define listeners for events. |
Example Definition |
fluid.defaults("component.name", {
events: {
onSave: "preventable",
onReady: null
},
listeners: {
onSave: component.name.saveValidatorFn
},
...
});
|
Example Override |
var myComp = component.name(container, {
listeners: {
onReady: myReadyNotificationFn,
},
...
});
|
See also |
View Components
Components defined with a grade of viewComponent support all of the common options described above, as well as those defined below. Component developers are free to define their own additional options.
See also: Component Grades
The following options are supported by view components:
model
Description |
An object containing the data model to be used by the component. |
|---|---|
Notes |
If a ChangeApplier is not provided using the |
Example Definition |
fluid.defaults("fluid.pager", {
model: {
pageIndex: undefined,
pageSize: 10,
totalRange: undefined
},
...
});
|
Example Override |
var myPager = fluid.pager(container, {
model: {
pageIndex: 1
},
...
});
|
See also |
Model Objects |
applier
Description |
A ChangeApplier object for the model provided with the |
|---|---|
Notes |
It is not necessary to provide an applier: By default, an applier will be created with |
Example Definition |
fluid.defaults("component.name", {
applier: "{parentComponent.applier}",
...
});
|
Example Override |
N/A |
See also |
ChangeApplier API |
changeApplierOptions
Description |
Options that will be passed on to |
|---|---|
Notes |
If a ChangeApplier is provided using the |
Example Definition |
fluid.defaults("component.name", {
model: {...},
changeApplierOptions: {
cullUnchanged: true
},
...
});
|
Example Override |
var myComp = component.name(container, {
model: {...},
changeApplierOptions: {
cullUnchanged: true
},
...
});
|
See also |
events
Description |
An object containing key/value pairs that define the events the component will fire: the keys are the event names, the values define the type of the event (see Infusion Event System for information on the different event types). |
|---|---|
Notes |
The Framework will create event firers for the listed events. It is the responsibility of the component to fire the events at the appropriate times. |
Example Definition |
fluid.defaults("component.name", {
events: {
onSave: "preventable",
onReady: null
},
...
});
|
Example Override |
N/A |
See also |
listeners
Description |
An object defining listener functions for the events supported by a component. |
|---|---|
Notes |
Both component developers and integrators can define listeners for events. |
Example Definition |
fluid.defaults("component.name", {
events: {
onSave: "preventable",
onReady: null
},
listeners: {
onSave: component.name.saveValidatorFn
},
...
});
|
Example Override |
var myComp = component.name(container, {
listeners: {
onReady: myReadyNotificationFn,
},
...
});
|
See also |
selectors
Description |
An object containing names CSS-based selectors identifying where in the DOM different elements can be found. |
|---|---|
Notes |
The Framework will create a DOM Binder that should be used to access the elements identified by selectors. The DOM Binder attaches a function to the component object called |
Example Definition |
fluid.defaults("fluid.progress", {
selectors: {
displayElement: ".flc-progress",
progressBar: ".flc-progress-bar",
indicator: ".flc-progress-indicator",
label: ".flc-progress-label",
ariaElement: ".flc-progress-bar"
},
...
});
|
Example Override |
var myEdit = fluid.progress(container, {
selectors: {
indicator: "div.progress-indicator",
label: "span.progress-label"
},
...
});
|
See also |
Renderer Components
Components defined with a grade of rendererComponent support all of the common options described above, as well as those defined below. Component developers are free to define their own additional options.
See also: Component Grades
The following options are supported by renderer components:
model
Description |
An object containing the data model to be used by the component. |
|---|---|
Notes |
If a ChangeApplier is not provided using the |
Example Definition |
fluid.defaults("fluid.pager", {
model: {
pageIndex: undefined,
pageSize: 10,
totalRange: undefined
},
...
});
|
Example Override |
var myPager = fluid.pager(container, {
model: {
pageIndex: 1
},
...
});
|
See also |
Model Objects |
applier
Description |
A ChangeApplier object for the model provided with the |
|---|---|
Notes |
It is not necessary to provide an applier: By default, an applier will be created with |
Example Definition |
fluid.defaults("component.name", {
applier: "{parentComponent.applier}",
...
});
|
Example Override |
N/A |
See also |
ChangeApplier API |
changeApplierOptions
Description |
Options that will be passed on to |
|---|---|
Notes |
If a ChangeApplier is provided using the |
Example Definition |
fluid.defaults("component.name", {
model: {...},
changeApplierOptions: {
cullUnchanged: true
},
...
});
|
Example Override |
var myComp = component.name(container, {
model: {...},
changeApplierOptions: {
cullUnchanged: true
},
...
});
|
See also |
events
Description |
An object containing key/value pairs that define the events the component will fire: the keys are the event names, the values define the type of the event (see Infusion Event System for information on the different event types). |
|---|---|
Notes |
The Framework will create event firers for the listed events. It is the responsibility of the component to fire the events at the appropriate times. |
Example Definition |
fluid.defaults("component.name", {
events: {
onSave: "preventable",
onReady: null
},
...
});
|
Example Override |
N/A |
See also |
listeners
Description |
An object defining listener functions for the events supported by a component. |
|---|---|
Notes |
Both component developers and integrators can define listeners for events. |
Example Definition |
fluid.defaults("component.name", {
events: {
onSave: "preventable",
onReady: null
},
listeners: {
onSave: component.name.saveValidatorFn
},
...
});
|
Example Override |
var myComp = component.name(container, {
listeners: {
onReady: myReadyNotificationFn,
},
...
});
|
See also |
selectors
Description |
An object containing names CSS-based selectors identifying where in the DOM different elements can be found. |
|---|---|
Notes |
The Framework will create a DOM Binder that should be used to access the elements identified by selectors. The DOM Binder attaches a function to the component object called |
Example Definition |
fluid.defaults("fluid.progress", {
selectors: {
displayElement: ".flc-progress",
progressBar: ".flc-progress-bar",
indicator: ".flc-progress-indicator",
label: ".flc-progress-label",
ariaElement: ".flc-progress-bar"
},
...
});
|
Example Override |
var myEdit = fluid.progress(container, {
selectors: {
indicator: "div.progress-indicator",
label: "span.progress-label"
},
...
});
|
See also |
repeatingSelectors
Description |
An array of selector names identifying elements that will be repeated by the Renderer based on the data being rendered. For example, the selector for a table row that will be replicated many times should appear in the list of repeating selectors. |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("cspace.header", {
selectors: {
menuItem: ".csc-header-menu-item",
label: ".csc-header-link",
searchBox: ".csc-header-searchBox",
logout: ".csc-header-logout",
user: ".csc-header-user",
userName: ".csc-header-userName"
},
repeatingSelectors: ["menuItem"],
...
});
|
Example Override |
var myComp = cspace.header(container, {
selectors: {
menuItem: "li.menu-item",
},
repeatingSelectors: ["menuItem"],
...
});
|
See also |
|
produceTree
Description |
A function that will return a Renderer Component Tree for the component. |
|---|---|
Notes |
The referenced function must accept the component object as its only parameter and return a Renderer component tree. It can use any method to create tree. |
Example Definition |
cspace.confirmationDialog.produceTree = function (that) {
var tree = {
...
};
return tree;
};
fluid.defaults("cspace.confirmationDialog", {
produceTree: cspace.confirmationDialog.produceTree,
...
});
|
Example Override |
var myDialog = cspace.confirmationDialog(container, {
produceTree: mySite.produceCustomConfirmationDialogTree,
...
});
|
See also |
protoTree
Description |
A tree of Renderer protocomponents. |
|---|---|
Notes |
NOTE that if both |
Example Definition |
fluid.defaults("cspace.searchTips", {
protoTree: {
searchTips: {decorators: {"addClass": "{styles}.searchTips"}},
title: {
decorators: {"addClass": "{styles}.title"},
messagekey: "searchTips-title"
},
expander: {
repeatID: "instructions",
type: "fluid.renderer.repeat",
pathAs: "row",
controlledBy: "messagekeys",
tree: {
messagekey: "${{row}}"
}
}
},
...
});
|
Example Override |
var searchTips = cspace.searchTips(container, {
protoTree: {
searchTips: {decorators: {"addClass": "{styles}.searchTips"}},
title: {
decorators: {"addClass": "{styles}.title"},
messagekey: "searchTips-title"
},
expander: {
repeatID: "instructions",
type: "fluid.renderer.repeat",
pathAs: "row",
controlledBy: "messagekeys",
tree: {
messagekey: "${{row}}"
}
}
},
...
});
|
See also |
resources
Description |
An object that lists resources (such as HTML files, CSS files, data files) required by the component. |
|---|---|
Notes |
The specified resources will be loaded automatically and the file content will be stored within the resources object itself. |
Example Definition |
fluid.defaults("component.name", {
resources: {
headerTemplate: {
href: "../templates/Header.html"
},
footerTemplate: {
href: "../templates/Footer.html"
}
},
...
});
|
Example Override |
var myComp = component.name(container, {
resources: {
footerTemplate: {
href: "../templates/FrontPageFooter.html"
}
},
...
});
|
See also |
strings
Description |
An object containing named strings or string templates. The strings will be used by the Renderer. |
|---|---|
Notes |
The Framework will create a Message Resolver and add it to the component object if the |
Example Definition |
fluid.defaults("cspace.searchToRelateDialog", {
gradeNames: "fluid.rendererComponent",
strings: {
createNewButton: "Create",
title: "Add Related %recordType Record",
closeAlt: "close button",
relationshipType: "Select relationship type:",
createNew: "Create new record:",
addButton: "Add to current record"
},
...
});
|
Example Override |
var myDialog = cspace.searchToRelateDialog(container, {
strings: {
relationshipType: "Select a relationship type from the list below:",
createNew: "Create a new record:",
addButton: "Add this record to the current record"
},
...
});
|
See also |
rendererFnOptions
Description |
Options that will be passed directly to the renderer creation function, |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("fluid.tableOfContents.levels", {
rendererFnOptions: {
noexpand: true
},
...
});
|
Example Override |
var recEditor = cspace.recordEditor(container, {
rendererFnOptions: {
rendererTargetSelector: "dialog"
},
...
});
|
See also |
Renderer-bearing Components |
rendererOptions
Description |
Options that will be included in the |
|---|---|
Notes |
|
Example Definition |
fluid.defaults("cspace.searchBox", {
rendererOptions: {
autoBind: false
},
...
});
|
Example Override |
var search = cspace.searchBox(container, {
rendererOptions: {
autoBind: true
},
...
});
|
See also |
renderOnInit
Description |
A boolean flag indicating whether or not the component should render itself automatically once initialization has completed. By default, renderer components do not render themselves automatically. |
|---|---|
Notes |
This option is valid both for |
Example Definition |
fluid.defaults("cspace.login", {
gradeNames: ["fluid.rendererComponent", "autoInit"],
renderOnInit: true,
...
});
|
Example Override |
var login = cspace.login(container, {
renderOnInit: false,
...
});
|
See also |
|