Plantillas

En un plugin puede existir varias plantillas según funcionalidad.

Una plantilla se forma con contenido HTML y se puede hacer uso de variables que se envían desde el compilador de plantillas mediante Handlebars.

Ejemplo de plantilla:

<div>
   <h2 style="text-align: center; color: #fff; background-color: #364b5f; padding: 8px 10px;">HELP <img style="vertical-align: bottom; filter: invert(100%);" src="../facade/assets/images/icon.svg" width="30" height="30"></h2>
   <div>
      <p>{{translations.help1}}</p>
      <p>{{translations.help2}}</p>
      <img src="{{urlImages}}help1.png" style="max-width:70%; margin: 0 auto; display: block">
   </div>
</div>

Para compilar la plantilla para mostrar el contenido en el visualizador se hace uso del método M.template.compileSync:

const html = M.template.compileSync(plantilla, {
  vars: {
    urlImages: `${M.config.MAPEA_URL}plugins/help/images/`,
    translations: {
      help1: getValue('textHelp.help1'),
      help2: getValue('textHelp.help2'),
    },
  },
});