Values

The content of the data structure is dynamic: it is entered by the user.
This visual area also has a header section made up of a title (textarea) and a subtitle (HTML editor).

{
  "title" : "Idiomas",
  "subTitle" : "<p>Idiomas disponibles en el portal</p>",
  "items" : [ {
     "lang" : "SPANISH",
     "selected" : true,
     "text" : "es",
     "title" : "Español",
     "link" : "/<!--#echo var='r01_lang_redirect_es' -->"
   }, {
     "lang" : "BASQUE",
     "selected" : false,
     "text" : "eu",
     "title" : "Euskara",
     "link" : "/<!--#echo var='r01_lang_redirect_eu' -->"
   } ]
}

Description of the items

• title: Title of the header section of the visual area

• subTitle: Subtitle of the header section of the visual area

• items: Global object. Contains a collection of objects that represent the links to select / change the language in which the page is displayed

• lang: Language

• selected: true / false. Indicates if this is the currently selected language

• text: Language text

• title: Language title

• link: Link that points to the equivalent Url, but in the language indicated in the "lang" item

Editable by the web designer

The html is editable by the user. Through "expressions" we can model how to insert the data structure on the page.

<div class="va{OID}">
    {{#each items}}
    
        {{#unless this.selected}}
    
            <a href="{{{this.link}}}">
                <span>
                    {{{this.text}}}
                </span>
            </a>
    
        {{else}}
    
           <span class="selected">
               {{{this.text}}}
           </span>
    
        {{/unless}}
    
    {{/each}}
</div>

Definition of expressions

• {{#each items}}: Expression to iterate through the collection of objects. Inside the expression it allows us to access the values of the object.

• {{#unless this.selected}} {{else}} {{/unless}}: Expression that is an "if / else" type control structure that allows evaluating whether the object is the selected language or not, in order to assign different html for each case.

  To access the values of the object we do it using the properties:

  • {{this.lang}}: Access the value of the "lang" field

  • {{this.selected}}: Access the value of the "selected" field. It can be used as a control structure like this: {{#unless this.selected}}

  • {{{this.text}}}: Returns the value of the "text" field

  • {{{this.title}}}: Returns the value of the "title" field

  • {{{this.link}}}: Returns the url to use as a link. It is IMPORTANT that you have the triple key "{{{" to escape the content