JSON: METADATA - BEST PRACTICES

Brought to you by @exZerry

ALERT: Metadata does not fully work on each component type. There are a lot of them. So, if you need metadata's functionality on 1 of them - request BST team1 to add support for your component.

Metadata is used to add special fields for custom variables of text, checkboxes, images and other amazing stuff. This allows us to create flexible responsive templates with minimum amount of effort and easy-access for Operations teams.

Latest features of metadata as of Boost v70 (http://boost.naturalint.com/version to see current version)

All available types of metadata fields

Type Description
text Creates a field with a behaviour similar to <input> in HTML
textarea Creates a field with a behaviour similar to <textarea> in HTML
wysiwyg Can be used to create a full featured editable block of text for some complicated or frequent needs of Operations team for example adding custom images of partners to the footer or add some special effects to the template without FE flow.
checkbox Adds a simple variable which will return 0/1 in requested case. Can be parsed by parseInt() and Boolean() functions.
dropdown Used to create a custom dropdown lists for example language switcher or layout selector for advanced templates.
image Returns simple URL of the uploaded image from CDN servers
json /* needs to be investigated */
font-awesome A set of preuploaded custom icons in SVG format for special needs. Usage: rare

Additional field properties

Property Value(s) Description
elementType item Adds a footer link list's field for an item

To start developing custom fields, do the following:

{
    "elements": [
        {
            /* actual element */
            "position": 0
        },
        {
            /* next element */
            "position": 1
        }
    ]
}

Main type of configuration for a field

{
    "label": /* text which OPS will see in Boost UI */,
    "type": /* relative type */,
    "default/value": /* actual value for a selected type */,
    "position": /* relative number */,
    "key": /* the text you'll refer to in the component {yourCustomVarName} */
}

The {yourCustomVarName} is to be used in the components HTML files like this:

<div class="{yourCustomVarName}">
    {yourCustomVarName} will work as a text    
    <img src="{yourCustomVarName}">    
</div>

Carefully use parameters "value" and "default", they are a bit buggy if you'll want to change them.

Text

Text field is pretty simple to use and apply.

  • "default" parameter doesn't work for this one
{
    "label": "...",
    "type": "text",
    "value": /* sets default value for the variable */,
    "position": /* relative number */,
    "key": {...}
}

Usage example:

<div class="yourClass"> {yourTextFieldKey} </div>

<div attr="{yourTextFieldKey}"></div>

<!-- for some reason you are making this -->
<{yourTextFieldKey} class="customTag"></{yourTextFieldKey}>

Textarea

Textarea

  • you can use "<br>" HTML's tag to draw new line for this component
  • "default" parameter doesn't work for this one
{
    "label": "...",
    "type": "textarea",
    "value": /* sets default value for the variable */,
    "position": /* relative number */,
    "key": {...}
}

Usage example:

<div class="copyrightText">
    {yourTextAreaKey}
</div>

Wysiwyg

Can be used to create a full featured editable block of text for some complicated or frequent needs of Operations team for example adding custom images of partners to the footer or add some special effects to the template without FE flow.

  • "default" parameter doesn't work for this one
{
    "label": "...",
    "type": "wysiwyg",
    "value": /* sets default value for the variable */,
    "position": /* relative number */,
    "key": {...}
}

Usage example:

<div class="customHtml">
    {yourWysiwygKey} 
    <!-- you can insert CSS styles, HTML text and custom JS code -->
</div>
1. Boost development team. Most contacted developer: David Ron ↩

results matching ""

    No results matching ""