Values

The content of the data structure is dynamic: it is entered by the user.
In the "Settings" section of the "Edit" area, you can configure it to enter a single element or a collection.
This visual area also has a header section made up of a title (textarea) and a subtitle (HTML editor).

{
   "title" : "Enlaces de interés",
   "subTitle" : "<p>En esta sección se muestra la relación de enlaces de interés de cara a ...</p>",
   "links" : [ {
      "url" : {
        "url" : "",
        "texts" : {
            "text" : "Trámites",
            "description" : "Texto descriptivo del enlace"
        },
        "presentation" : {
           "openTarget" : "_blank"
        },
        "useCanonicalUrl" : false
     },
   "links" : [ {
      "url" : {
        "url" : "/pagina-externa-denuncias",
        "texts" : {
            "text" : "Denuncias",
            "description" : "Texto descriptivo del enlace"
        },
        "presentation" : {
           "openTarget" : "_blank"
        },
        "useCanonicalUrl" : false
     }
   },
   [...]
}

Description of the items

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

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

• links: Global object containing a list of link objects

• url: Url object

  • url: URL of the link

  • texts: Link text object

    • text: Link text

    • description: Link description

  • presentation: Object with information on how to open the link

    • openTarget: How the link is opened

  • useCanonicalUrl: Canonical url usage

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.

<!-- Single menu -->
<div class="va{OID}">
    <ul>
    {{#each links}}
        <li>
            <a href="{{this.url.url}}">{{{this.url.texts.text}}}</a>
        </li>
    {{/each}}
    </ul>
</div>

<!-- 2-level menu -->
<ul class="menu-web"> 
{{#each links}}
    <li> 
        {{#if this.links}}
        <div class="dropdown">
            <a class="dropbtn" href="javascript:void(0);"> {{{this.url.texts.text}}} <i class="fas fa-angle-down"></i></a>
            <div id="myDropdown" class="dropdown-content ">
                <div class="arrow_box container">
                <ul>
                {{#each this.links}}
                    <li><a href="{{this.url.url}}">{{{this.url.texts.text}}}</a></li>
                {{/each}}
                </ul>
                </div>
            </div>
        </div>
        {{else}}
        <a href="{{this.url.url}}">{{{this.url.texts.text}}}</a>
        {{/if}}
    </li>
{{/each}}
</ul>

Definition of expressions

{{#each links}} {{/each}}: Expression to iterate through the collection of objects. Inside the expression it allows us to access the values of the object. To nest menus of more than one level, you must nest another structure.

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

• {{this.url.url}

• {{{this.url.texts.text}}}

• {{{this.url.texts.description}}}

• {{this.url.presentation.opentarget}}

• {{this.url.useCanonicalUrl}}