Data modeling for themes
With Styleguide you can add fields to individual templates so that the fields appear in the associated content edit forms. This feature helps expedite the development process by allowing front-end developers to do data modeling without involving back-end developers.
themeFields
configuration key. For details, see Theme fields.Use the following general steps to add a field to a Model for a specific theme.
- Change to the theme's Styleguide directory:
cd brightspot-themes-frost/.
- Start the theme's Styleguide server:
yarn styleguide
. - Open the theme's configuration file
styleguide/_config.json
. - Add members to the
styles
key and save the file. The Styleguide server recompiles and packages the updated theme in a file/themes/<theme-directory>/target/brightspot-theme-<identifier>-SNAPSHOT.zip
. - Upload the updated theme's .zip file to the Brightspot server; for details, see Uploading a theme.
- Reload Brightspot in the browser. Upon reload, Brightspot detects the updated theme and loads it as well.
The following sections describe how to add various field types through a theme's configuration file.
Boolean fields appear as checkboxes. Open the theme's configuration file _config.json
, and add a boolean
entry under the template's styles
key.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"publicDomain": {
"type": "boolean"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![Adding booleans.png](https://brightspot.brightspotcdn.com/dims4/default/10d52a3/2147483647/strip/true/crop/1068x265+0+0/resize/1068x265!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fd2%2F61%2Fd82e00fc448ba916d4f38b2e2644%2Fadding-booleans.png)
![Adding booleans.png](https://brightspot.brightspotcdn.com/dims4/default/f35ee2a/2147483647/strip/true/crop/1068x265+0+0/resize/800x199!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fd2%2F61%2Fd82e00fc448ba916d4f38b2e2644%2Fadding-booleans.png)
![Boolean field toggled on.png](https://brightspot.brightspotcdn.com/dims4/default/efa31d6/2147483647/strip/true/crop/666x164+0+0/resize/666x164!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F76%2F4a%2F21382dcc4d26b02f25d9a35ba0f4%2Fboolean-field-toggled-on.png)
![Boolean field toggled on.png](https://brightspot.brightspotcdn.com/dims4/default/efa31d6/2147483647/strip/true/crop/666x164+0+0/resize/666x164!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F76%2F4a%2F21382dcc4d26b02f25d9a35ba0f4%2Fboolean-field-toggled-on.png)
Color fields appear as a color picker. Open the theme's configuration file _config.json
, and add a color
entry under the template's styles
key.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"textColor": {
"type": "color"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![New color field added.png](https://brightspot.brightspotcdn.com/dims4/default/469dccf/2147483647/strip/true/crop/660x145+0+0/resize/660x145!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F3c%2F8f%2Fa53d71d24fde84dda6cb9895829b%2Fnew-color-field-added.png)
![New color field added.png](https://brightspot.brightspotcdn.com/dims4/default/469dccf/2147483647/strip/true/crop/660x145+0+0/resize/660x145!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F3c%2F8f%2Fa53d71d24fde84dda6cb9895829b%2Fnew-color-field-added.png)
Date fields appear as a date picker. Open the theme's configuration file _config.json
, and add a date
entry under the template's styles
key.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"dateOfBirth": {
"type": "date"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![New date field.png](https://brightspot.brightspotcdn.com/dims4/default/b8eadd3/2147483647/strip/true/crop/982x263+0+0/resize/982x263!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F72%2Fc0%2Fa080ef6f4d8fb047df674cb52ce8%2Fnew-date-field.png)
![New date field.png](https://brightspot.brightspotcdn.com/dims4/default/b5c0c8f/2147483647/strip/true/crop/982x263+0+0/resize/800x214!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F72%2Fc0%2Fa080ef6f4d8fb047df674cb52ce8%2Fnew-date-field.png)
A location field appears as a map of a user's location. Open the theme's configuration file _config.json
, and add a location
entry under the template's styles
key.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"targetLocation": {
"type": "location"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![New location added.png](https://brightspot.brightspotcdn.com/dims4/default/d2b444f/2147483647/strip/true/crop/1247x1217+0+0/resize/1247x1217!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F97%2F9f%2Ffa9e0890493286124bddc4ec8f7c%2Fnew-location-added.png)
![New location added.png](https://brightspot.brightspotcdn.com/dims4/default/6668e2d/2147483647/strip/true/crop/1247x1217+0+0/resize/800x781!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F97%2F9f%2Ffa9e0890493286124bddc4ec8f7c%2Fnew-location-added.png)
Number fields appear as text boxes. Open the theme's configuration file _config.json
, and add a number
entry under the template's styles
key.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"quantity": {
"type": "number"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![New number field added.png](https://brightspot.brightspotcdn.com/dims4/default/7b841f9/2147483647/strip/true/crop/977x227+0+0/resize/977x227!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Ff3%2F5e%2Fbae290db4f3bbdb7eb725dd69259%2Fnew-number-field-added.png)
![New number field added.png](https://brightspot.brightspotcdn.com/dims4/default/66c3af9/2147483647/strip/true/crop/977x227+0+0/resize/800x186!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Ff3%2F5e%2Fbae290db4f3bbdb7eb725dd69259%2Fnew-number-field-added.png)
Record fields appear as a selection field. Open the theme's configuration file _config.json, and add a record entry under the template's styles key. As a best practice, add a groups entry to limit the type of record the user can select.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"relatedArticle": {
"type": "record",
"groups": "brightspot.core.article.Article"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![New records field added.png](https://brightspot.brightspotcdn.com/dims4/default/5b17d6b/2147483647/strip/true/crop/982x279+0+0/resize/982x279!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F53%2Fde%2F7a5a88e14c61922dba840c1ba1f9%2Fnew-records-field-added.png)
![New records field added.png](https://brightspot.brightspotcdn.com/dims4/default/77792f2/2147483647/strip/true/crop/982x279+0+0/resize/800x227!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F53%2Fde%2F7a5a88e14c61922dba840c1ba1f9%2Fnew-records-field-added.png)
A region field appears as a map in which users can draw circles and polygons. Open the theme's configuration file _config.json
, and add a region
entry under the template's styles
key.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"targetRegion": {
"type": "region"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![New region added.png](https://brightspot.brightspotcdn.com/dims4/default/728da5b/2147483647/strip/true/crop/968x513+0+0/resize/968x513!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F6c%2Fda%2F8b65dc0b4f5d8bcd303685cc57cf%2Fnew-region-added.png)
![New region added.png](https://brightspot.brightspotcdn.com/dims4/default/5e4680b/2147483647/strip/true/crop/968x513+0+0/resize/800x424!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F6c%2Fda%2F8b65dc0b4f5d8bcd303685cc57cf%2Fnew-region-added.png)
Storage items appear as file selection controls. Open the theme's configuration file _config.json
, and add a file
entry under the template's styles
key.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"authorImage": {
"type": "file"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![New storage items field.png](https://brightspot.brightspotcdn.com/dims4/default/d13b3c7/2147483647/strip/true/crop/1080x484+0+0/resize/1080x484!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fd7%2F95%2F35e472f94f9dbc5b9a41a9dc8368%2Fnew-storage-items-field.png)
![New storage items field.png](https://brightspot.brightspotcdn.com/dims4/default/cc04358/2147483647/strip/true/crop/1080x484+0+0/resize/800x359!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fd7%2F95%2F35e472f94f9dbc5b9a41a9dc8368%2Fnew-storage-items-field.png)
String fields can appear as text boxes or a list of strings. For a text box, open the theme's configuration file _config.json
, and add a text
entry under the template's styles
key.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"attribution": {
"type": "text"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![New single string field added.png](https://brightspot.brightspotcdn.com/dims4/default/84317c4/2147483647/strip/true/crop/660x134+0+0/resize/660x134!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fb9%2F73%2F696a63364fafba15933557bde550%2Fnew-single-string-field-added.png)
![New single string field added.png](https://brightspot.brightspotcdn.com/dims4/default/84317c4/2147483647/strip/true/crop/660x134+0+0/resize/660x134!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fb9%2F73%2F696a63364fafba15933557bde550%2Fnew-single-string-field-added.png)
For a list of strings, open the theme's configuration file _config.json
, and add a list/text
entry under the template's styles
key.
{
"styles": {
"pathToTemplateFile.hbs": {
"fields": {
"attribution": {
"type": "list/text"
}
}
}
}
}
The new field appears by default under the Overrides tab.
![New list of strings added.png](https://brightspot.brightspotcdn.com/dims4/default/a01964c/2147483647/strip/true/crop/660x185+0+0/resize/660x185!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F45%2Fc1%2Ffb9782de4986afe53e9383c5c9d2%2Fnew-list-of-strings-added.png)
![New list of strings added.png](https://brightspot.brightspotcdn.com/dims4/default/a01964c/2147483647/strip/true/crop/660x185+0+0/resize/660x185!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F45%2Fc1%2Ffb9782de4986afe53e9383c5c9d2%2Fnew-list-of-strings-added.png)
You can use options to customize fields you add through Styleguide. The options modify a field’s appearance or behavior. The following sections list the available options and how to implement them.
Overview of adding field options
Use the following general steps to add a field option to a Model for a specific theme.
- Start an instance of Brightspot.
- Change to the theme's Styleguide directory:
cd themes/<theme-directory>/
. - Start the theme's Styleguide server:
gulp styleguide
. - Open the theme's configuration file
styleguide/_config.json
. - Add members to the styles key and save the file. The Styleguide server recompiles and packages the updated theme in a file themes
//target/brightspot-theme--SNAPSHOT.zip
. - Upload the updated theme's .zip file to the Brightspot server; for details, see Uploading a theme.
- Reload Brightspot in the browser. Upon reload, Brightspot detects the updated theme and loads it as well.
The following sections describe how to add various field options through a theme's configuration file.
cms.ui.cluster
Displays a heading above the field. Useful for grouping fields under a heading.
{
"primaryContributor": {
"type": "record",
"cms.ui.cluster": "Freelance author information"
},
"contributorBio": {
"type": "text"
},
}
For additional information, see @ToolUi.Cluster.
cms.ui.cssClass
Renders the field using the provided CSS class.
{
"approvedBy": {
"type": "text",
"cms.ui.cssClass": "text-green-bold"
}
}
You can define the CSS class in the Brightspot settings for the global site. Under Debug, set the Extra CSS field for example:
![Extra CSS.png](https://brightspot.brightspotcdn.com/dims4/default/22d5ae3/2147483647/strip/true/crop/876x114+0+0/resize/876x114!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fe7%2Fa6%2F0bb39ed1431ea08db0815b7e8b28%2Fextra-css.png)
![Extra CSS.png](https://brightspot.brightspotcdn.com/dims4/default/3dff1f1/2147483647/strip/true/crop/876x114+0+0/resize/800x104!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fe7%2Fa6%2F0bb39ed1431ea08db0815b7e8b28%2Fextra-css.png)
The rendered result appears as follows:
![cms.ui.cssClass example.png](https://brightspot.brightspotcdn.com/dims4/default/24c0d3e/2147483647/strip/true/crop/1044x130+0+0/resize/1044x130!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Ffd%2Ffa%2F65fa0e9a4aa79d8e212f519d5e18%2Fcms.ui.cssClass%20example.png)
![cms.ui.cssClass example.png](https://brightspot.brightspotcdn.com/dims4/default/8b54f1f/2147483647/strip/true/crop/1044x130+0+0/resize/800x100!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Ffd%2Ffa%2F65fa0e9a4aa79d8e212f519d5e18%2Fcms.ui.cssClass%20example.png)
For additional information, see @ToolUi.CssClass.
cms.ui.dropDown
Displays a list with specified values.
{
"Alignment": {
"type": "text",
"cms.ui.dropDown": true,
"values": [
{
"label": "Left Alignment",
"value": "alignleft"
},
{
"label": "Center Alignment",
"value": "aligncenter"
},
{
"label": "Right Alignment",
"value": "alignright"
}
]
}
}
![Dropdown added to UI.png](https://brightspot.brightspotcdn.com/dims4/default/8a31872/2147483647/strip/true/crop/504x414+0+0/resize/504x414!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F4e%2F7a%2F0820dd8245d68985247232680c08%2Fdropdown-added-to-ui.png)
![Dropdown added to UI.png](https://brightspot.brightspotcdn.com/dims4/default/8a31872/2147483647/strip/true/crop/504x414+0+0/resize/504x414!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F4e%2F7a%2F0820dd8245d68985247232680c08%2Fdropdown-added-to-ui.png)
For additional information, see @ToolUi.DropDown.
cms.ui.note
Displays explanatory note below the field.
{
"articleBody": {
"type": "text",
"cms.ui.richText": true,
"cms.ui.note": "Please, no more than 200 words."
}
}
![Article body.png](https://brightspot.brightspotcdn.com/dims4/default/de69b2d/2147483647/strip/true/crop/1370x326+0+0/resize/1370x326!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F25%2F26%2F903ef5cf4a68bce8de5cc4d71772%2Farticle-body.png)
![Article body.png](https://brightspot.brightspotcdn.com/dims4/default/0839102/2147483647/strip/true/crop/1370x326+0+0/resize/800x190!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F25%2F26%2F903ef5cf4a68bce8de5cc4d71772%2Farticle-body.png)
cms.ui.placeholder
Displays default placeholder text inside a text field.
{
"breakingHeadline": {
"type": "text",
"cms.ui.placeholder": "Breaking news: "
}
}
For additional information, see @ToolUi.Placeholder.
cms.ui.richText
Renders a text field as a rich-text editor.
{
"freelancerBio": {
"type": "text",
"cms.ui.richText": true
}
}
![Freelancer Bio.png](https://brightspot.brightspotcdn.com/dims4/default/876ecd0/2147483647/strip/true/crop/1824x288+0+0/resize/1824x288!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F69%2F0c%2F81a8c39e4e77aac65bc0331ce654%2Ffreelancer-bio.png)
![Freelancer Bio.png](https://brightspot.brightspotcdn.com/dims4/default/2531644/2147483647/strip/true/crop/1824x288+0+0/resize/800x126!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F69%2F0c%2F81a8c39e4e77aac65bc0331ce654%2Ffreelancer-bio.png)
For additional information, see @ToolUi.RichText.
cms.ui.secret
Hides the text field's value; a Show Secret/Hide Secret control toggles the field's value in cleartext.
{
"accountPassword": {
"type": "text",
"cms.ui.secret": true
}
}
![Hidden password.png](https://brightspot.brightspotcdn.com/dims4/default/051d5b9/2147483647/strip/true/crop/956x128+0+0/resize/956x128!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F88%2Fd3%2Fffedf3364623ab89a3bef522cbc7%2Fhidden-password.png)
![Hidden password.png](https://brightspot.brightspotcdn.com/dims4/default/69f802f/2147483647/strip/true/crop/956x128+0+0/resize/800x107!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F88%2Fd3%2Fffedf3364623ab89a3bef522cbc7%2Fhidden-password.png)
For additional information, see @ToolUi.Secret.
cms.ui.suggestedMaximum
Suggested maximal number of characters in a text field. Brightspot retains the entire string even if longer than the suggested maximum.
{
"headlineLong": {
"type": "text",
"cms.ui.suggestedMaximum": 30
}
}
![Suggested maximum warning.png](https://brightspot.brightspotcdn.com/dims4/default/add0dec/2147483647/strip/true/crop/494x41+0+0/resize/494x41!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F35%2F16%2F96ffa3db47518fd1295f966fca50%2Fsuggested-maximum-warning.png)
![Suggested maximum warning.png](https://brightspot.brightspotcdn.com/dims4/default/add0dec/2147483647/strip/true/crop/494x41+0+0/resize/494x41!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2F35%2F16%2F96ffa3db47518fd1295f966fca50%2Fsuggested-maximum-warning.png)
For additional information, see @ToolUi.SuggestedMaximum.
cms.ui.suggestedMinimum
Suggested minimal number of characters in a text field. Brightspot retains the string even if shorter than the suggested minimum.
{
"headlineShort": {
"type": "text",
"cms.ui.suggestedMinimum": 10
}
}
![Suggested minimum warning.png](https://brightspot.brightspotcdn.com/dims4/default/741e322/2147483647/strip/true/crop/354x41+0+0/resize/354x41!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fc1%2Faa%2Fef988a55427cb05c7d2c7327820d%2Fsuggested-minimum-warning.png)
![Suggested minimum warning.png](https://brightspot.brightspotcdn.com/dims4/default/741e322/2147483647/strip/true/crop/354x41+0+0/resize/354x41!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fc1%2Faa%2Fef988a55427cb05c7d2c7327820d%2Fsuggested-minimum-warning.png)
For additional information, see @ToolUi.SuggestedMinimum.
cms.ui.tab
Indicates in which widget the field appears in the content edit form. If the widget does not exist, Brightspot creates it. Fields without this annotation appear in the Overrides widget.
{
"wikipedia": {
"type": "text",
"cms.ui.tab": "Fact Checking"
},
"ciaFactBook": {
"type": "text",
"cms.ui.tab": "Fact Checking"
}
}
For additional information, see @ToolUi.Tab.
hidden
Suppresses display of the field.
{
"ghostWriter": {
"type": "text",
"hidden": true
}
}
For additional information, see @ToolUi.Hidden.
isRequired
Indicates user must provide a value for the field.
{
"howManyBagsAreYouChecking": {
"type": "number",
"isRequired": true
}
}
![isRequired exampled.png](https://brightspot.brightspotcdn.com/dims4/default/66f9ae0/2147483647/strip/true/crop/838x122+0+0/resize/838x122!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fe4%2Fdd%2F3863498b473b8f865aa3904d0df8%2Fisrequired-exampled.png)
![isRequired exampled.png](https://brightspot.brightspotcdn.com/dims4/default/fc05536/2147483647/strip/true/crop/838x122+0+0/resize/800x116!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fe4%2Fdd%2F3863498b473b8f865aa3904d0df8%2Fisrequired-exampled.png)
For additional information, see @Recordable.Required.
By default, new fields appear under the Overrides widget. With the inline
key you can specify that new fields are placed in the Main widget. If used in conjunction with the cms.ui.tab key, the inline
key allows you to place new fields in specified widgets.
In the following example, the inline
key is set to true
, forcing the darkTheme
field to appear on the Main widget. If the inline
key is set to false
, or omitted, then the field appears in the Overrides widget.
{
"styles": {
"/core/list/List.hbs": {
"example": "/list/List.json",
"width": 1200,
"height": 600,
"scale": 0.25,
"inline": true,
"fields": {
"darkTheme": {
"type": "boolean"
}
}
}
}
}
In the next example, the inline
key is used in conjunction with the cms.ui.tab
key. Two fields, wikipedia
and ciaFactBook
, are placed under the custom tab Fact Checking. A third field, sources
, is placed under the Main tab given the absence of the cms.ui.tab
key for that field.
{
"styles": {
"/core/article/ArticlePage.hbs": {
"width": 850,
"height": 1000,
"scale": 0.2,
"example": "/core/article/ArticlePage.json",
"templates": "/article/*.json",
"inline": true,
"fields": {
"wikipedia": {
"type": "text",
"cms.ui.tab": "Fact Checking"
},
"ciaFactBook": {
"type": "text",
"cms.ui.tab": "Fact Checking"
},
"sources": {
"type": "list/text"
}
}
}
}
}
Displaying theme-specific fields in views
When you add fields to a model through _config.json
, you need to add them to the view.
See also:
Displaying theme-specific fields in views
When you add fields to a model through _config.json
, you need to add them to the view.
See also:
Displaying record fields
This section provides a full example of adding a record-type field to a theme’s view.
Displaying a record field within a view requires using an Indirect view model overlay value. The following example adds a record for an author to a theme’s content edit form, generates the view, and creates the view model.
Step 1: Add field to theme’s configuration file
In the theme’s _config.json,
add a field of type record
. (For an explanation of adding this type of field, see Adding records.) For example, add the following entry to /themes/<theme-dir>/styleguide/_config.json
.
{
"styles": {
"/core/article/ArticlePage.hbs": {
"fields": {
"primaryContributor": {
"type": "record",
"groups": "brightspot.core.person.Author"
}
}
}
}
}
-
Adds a selector field for authors to the
ArticlePage
template.
After you upload the updated theme, Brightspot displays the field in the content edit form.
![New field displayed.png](https://brightspot.brightspotcdn.com/dims4/default/9086773/2147483647/strip/true/crop/482x116+0+0/resize/482x116!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fcc%2F1f%2F8fc70d8c457d85dbc111cb0996d5%2Fnew-field-displayed.png)
![New field displayed.png](https://brightspot.brightspotcdn.com/dims4/default/9086773/2147483647/strip/true/crop/482x116+0+0/resize/482x116!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fcc%2F1f%2F8fc70d8c457d85dbc111cb0996d5%2Fnew-field-displayed.png)
In the theme’s parent template where you want the child view to appear, add the child record’s placeholder. For example, add the following line to /themes/<theme-dir>/styleguide/page/Page.hbs:
<p>{{primaryContributor}} contributed significantly to this article.</p>
In the previous snippet, the placeholder has the same name as the field you added in Step 1.
Step 3: Create child view for child view
- Change to the project’s root
/styleguide/
directory. (This directory is in the same level as/themes/
). - As a best practice, create a new directory for your overlays, such as
overlays/
. - Change to the directory you created in step 2.
- Create a template, such as
PrimaryContributor.hbs
, and enter the fields you want to include in the view.{{primaryContributorName}}
- Create a data file corresponding to the template, such as
PrimaryContributor.json.
{ "_template": "PrimaryContributor.hbs", "primaryContributorName": "{{name}}" }
- In the project’s root directory, run mvn clean install. Brightspot creates a view interface in
/frontend/target/generated-sources/styleguide/brightspot/view/
. In this example, the view interface is/frontend/target/generated-sources/styleguide/brightspot/view/overlays/PrimaryContributorView.java
.
Step 4: Create view model for record field
- Change to the project’s
/core/src/main/java/brightspot/
directory. - As a best practice, create a new directory for your overlay view models, such as
overlays/
. - Change to the directory you created in step 2.
- Create a Java class with name parallel to the view. Continuing the example, create a file
PrimaryContributorViewModel.java
. - Implement the view’s getters.
package brightspot.overlays; import brightspot.core.person.Author; import brightspot.view.overlays.PrimaryContributorView; import com.psddev.cms.view.ViewModel; import com.psddev.cms.view.ViewModelOverlayValueEntryView; public class PrimaryContributorViewModel extends ViewModel<Author> implements PrimaryContributorView, ViewModelOverlayValueEntryView { @Override public CharSequence getPrimaryContributorName() { return model.getFirstName() + " " + model.getLastName(); } }
- In the project’s root directory, again run mvn clean install. Brightspot compiles the new view model and adds it to the WAR file.
Step 5: Install updated theme
The previous step completely rebuilt your Brightspot project, including a new .zip file /themes/<theme-dir>/target/<theme-name-id>.zip
. Install this .zip file as an update to the theme.
Step 6: Display view in browser
When you load the parent view in the browser, the child view also appears.
![Child view displayed.png](https://brightspot.brightspotcdn.com/dims4/default/1ba1be0/2147483647/strip/true/crop/494x51+0+0/resize/494x51!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fc0%2Fad%2F597155bc4637b3ed0411b41f2c8a%2Fchild-view-displayed.png)
![Child view displayed.png](https://brightspot.brightspotcdn.com/dims4/default/1ba1be0/2147483647/strip/true/crop/494x51+0+0/resize/494x51!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fc0%2Fad%2F597155bc4637b3ed0411b41f2c8a%2Fchild-view-displayed.png)
Displaying non-record fields
This section provides a full example of adding a field to a theme’s View. The example applies to all fields modeled in the file _config.json
except those of type record
.
Step 1: Add field to theme’s configuration file
In the theme’s _config.json
, add a field. The previous sections describe how to add a variety of field types.
Adding a field to a theme’s configuration file
{
"styles": {
"/core/article/ArticlePage.hbs": {
"fields": {
"contributorBio": { 1
"type": "text"
}
}
}
}
}
-
Adds a text field for a contributor’s bio.
After you upload the updated theme, Brightspot displays the field in the content edit form.
![Field displayed in content edit form.png](https://brightspot.brightspotcdn.com/dims4/default/e0b86c1/2147483647/strip/true/crop/587x95+0+0/resize/587x95!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fa5%2Fa0%2Fdcf7923442ac9408668f26b89612%2Ffield-displayed-in-content-edit-form.png)
![Field displayed in content edit form.png](https://brightspot.brightspotcdn.com/dims4/default/e0b86c1/2147483647/strip/true/crop/587x95+0+0/resize/587x95!/quality/90/?url=http%3A%2F%2Fbrightspot-brightspot.s3.amazonaws.com%2Fbsp%2Fa5%2Fa0%2Fdcf7923442ac9408668f26b89612%2Ffield-displayed-in-content-edit-form.png)
Step 2: Add field to template
Add the field’s placeholder to one of the templates within the available contexts. For example, in the file <theme-dir>/styleguide/article/ArticlePageFull.hbs,
add the following lines:
<p>Meet your author</p>
<p>{{contributorBio}}</p>
-
Placeholder corresponding to the field name
contributorBio
in the snippet Data modeling for themes.
Step 3: Rebuild theme
- Change to
/themes/<theme-dir>/
. - Run gulp styleguide. Brightspot packages the updated theme in a file
target/<theme-name-id>.zip
. - In Brightspot, upload the .zip file as an update to the theme.
- Display the published page in your browser.Updated theme