There are four configurable Fragment types available to implement:
checkbox
colorPalette
select
text
For more information on how to make a Fragment configurable, see Making a Fragment Configurable.
In this article, you’ll explore JSON examples of each Fragment type.
Checkbox Configuration
The following JSON configuration creates a checkbox you can implement for cases where a boolean value selection is necessary:
{
"fieldSets": [
{
"fields": [
{
"name": "hideBody",
"label": "Hide Body",
"description": "hide-body",
"type": "checkbox",
"defaultValue": false
}
...
]
}
]
}
Figure 1: The checkbox configuration is useful when a boolean selection is necessary.
Color Palette Configuration
The following JSON configuration creates a color selector you can implement for cases where you must select a color:
{
"fieldSets": [
{
"fields": [
{
"name": "textColor",
"label": "Text color",
"type": "colorPalette",
"dataType": "object",
"defaultValue": {
"cssClass": "white",
"rgbValue": "rgb(255,255,255)"
}
}
...
]
}
]
}
The colorPalette
type stores an object with two values: cssClass
and
rgbValue
.
For example, if you implement the snippet above, you can use it in the FreeMarker context like this:
<h3 class="text-${configuration.textColor.cssClass}">Example</h3>
If you were to choose the color white, the h3
tag heading would have the class
text-white'
.
Figure 2: The `colorPalette` configuration is useful when a color selection is necessary.
Select Configuration
The following JSON configuration creates a selector you can implement for cases where you must select a predefined option:
{
"fieldSets": [
{
"fields": [
{
"name": "numberOfFeatures",
"label": "Number Of Features",
"description": "number-of-features",
"type": "select",
"dataType": "int",
"typeOptions": {
"validValues": [
{"value": "1"},
{"value": "2"},
{"value": "3"}
]
},
"defaultValue": "3"
}
...
]
}
]
}
Configuration values inserted into the FreeMarker context honor the defined
datatype
value specified in the JSON file.
Figure 3: The `select` configuration is useful when an option choice is necessary.
Text Configuration
The following JSON configuration creates an input text field you can implement for cases where you must manually input a text option:
{
"fieldSets": [
{
"fields": [
{
"name": "buttonText",
"label": "Button Text",
"description": "button-text",
"type": "text",
"typeOptions": {
"placeholder": "Placeholder"
},
"dataType": "string",
"defaultValue": "Go Somewhere"
}
...
]
}
]
}
Configuration values inserted into the FreeMarker context honor the defined
datatype
value specified in the JSON file.
Figure 4: The `text` configuration is useful when an input text option is necessary.