Values

The content of the data structure is fixed, not editable by the user.
This visual area also has a header section made up of a title (textarea) and a subtitle (HTML editor).

{
      "title" : "Estás en:",
      "subTitle" : "<p>Sendero de migas recorrido<p>",
      "breadcrumbs" : [ {
        "level" : 1,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_1'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_1'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_1'-->"
      }, {
        "level" : 2,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_2'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_2'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_2'-->"
      }, {
        "level" : 3,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_3'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_3'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_3'-->"
      }, {
        "level" : 4,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_4'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_4'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_4'-->"
      }, {
        "level" : 5,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_5'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_5'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_5'-->"
      }, {
        "level" : 6,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_6'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_6'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_6'-->"
      }, {
        "level" : 7,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_7'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_7'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_7'-->"
      }, {
        "level" : 8,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_8'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_8'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_8'-->"
      }, {
        "level" : 9,
        "text" : "<!--#echo encoding='none' var='r01_breadcrumb_text_9'-->",
        "title" : "<!--#echo encoding='none' var='r01_breadcrumb_title_9'-->",
        "link" : "<!--#echo encoding='none' var='r01_breadcrumb_link_9'-->"
      } ]
}

Description of the items

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

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

• breadcrumbs: Global object. It contains a collection of objects, each representing one of the nine levels of navigation.

• level: Page level.

• text: Link text.

• title: Page title.

• link: Link to the page.

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}">
    <div>
        <ol>
            {{#each breadcrumbs}}

                {{#linked-breadcrumb}}
                <a href="{{this.link}}">{{this.title}}</a>
                {{/linked-breadcrumb}}

                {{#last-breadcrumb}}
                <li class="r01gNavigatorLast">{{this.title}}</li>
                {{/last-breadcrumb}}

            {{/each}}
       </ol>
   </div>
</div>

Definition of expressions

• {{#each breadcrumbs}} {{/each}}: Expression to iterate the "breadcrumbs" collection. Inside the expression it allows us to access the values of the object.

• {{#linked-breadcrumb}} {{/linked-breadcrumb}}: The content of this expression will only be visible as long as it is not the last crumb of bread.

• {{#last-breadcrumb}} {{/last-breadcrumb}}: The content of this expression will only be visible when it is the last breadcrumb.