Type | Description | Format | Example |
---|
Bound | A control which holds a single value, such as headers, labels, etc. | Code Block |
---|
|
componentID: { fieldName: valueOrBinding }
|
| Code Block |
---|
|
var protoTree = {
mainHeader: "Carving Woods",
sectionHeader1: "Sassafras",
sectionHeader1: "Butternut",
sectionHeader1: "Basswood"
};
|
|
---|
Array of Bound | repeated Bound fields | Code Block |
---|
|
componentID: { fieldName: [valueOrBinding1,
valueOrBinding2,
...] }
|
| Code Block |
---|
|
var protoTree = {
mainHeader: "Carving Woods",
sectionHeaders: ["Sassafras",
"Butternut",
"Basswood"]
};
|
|
---|
Selection | A selection control where a user chooses either one or many options from a set of alternatives, such as a drop-down, radio buttons or checkboxes | Code Block |
---|
|
componentID: {
selection: valueOrBinding,
optionlist: [array of internal values],
optionnames: [array of display strings]
}
|
For information on how to create trees for radio buttons and checkboxes, see Renderer Component Tree Expanders. | Code Block |
---|
|
var protoTree = {
contact-addressType1: {
selection": "${fields.addressType1}",
optionlist": ["Home", "Work"],
optionnames": ["home", "work"]
}
};
|
|
---|
Link | A reference to a URL, such as a hyperlink | Code Block |
---|
|
componentID: {
selectiontarget: mySelectionValuedestinationUrl,
optionlistlinktext: [array of internal values],
optionnames: [array of display strings]
stringToDisplay
}
|
| Code Block |
---|
|
var protoTree = {
contact-addressType1: {
selection"target: "http://company.com/help/${fieldstopic.addressType1url}",
optionlist"linktext: ["Home", "Work"],
optionnames": ["home", "work"]"${topic.name}"
}
};
|
|
---|
Container | A component that contains other components in a free-form way | Code Block |
---|
|
componentID: {
children: [array of other protocomponents]
}
|
| |
---|
Message | A component that encapsulates the data needed to resolve a localised message. Similar to a Bound, but the value is a key into a string bundle | Code Block |
---|
|
componentID: {
messageKey: key,
args: [array of arguments to
be interpolated into
the message format]
}
|
See fluid.formatMessage for more information about message formatting. | Code Block |
---|
|
var protoTree = {
instructions: {
messageKey: "instructionKey",
args: ["thing", 3, "%path1"]
}
};
|
|
---|