Mantra how-to guide

Add global vars for UI

How to add new global vars that are Mustache variables available for all views in the project

15-Mar-2022
A  A  A 

The configuration file of a project (mantraconfig.json), has a number of properties.

As you know, that file describes many important features of the project and you can have different versions of it according to the working environment (testing, development, pre-production, production, etc.).

Among those properties, there's an optional and special section called "GlobalTemplateVars".

That section is just an object with keys and values that Mantra treats specially for each request.

Mantra uses by default Mustache rendering engine to build the final HTML code to send to any view request.

All values inside "GlobalTemplateVars" are automatically included by Mantra en each view request.

This is a real example extracted from the current status of Mantra site:

"GlobalTemplateVars": {
   "global-contactsupportlink": "/contact/support",
   "global-loginurl": "/users/login",
   "global-mantradownloadurl": "/mantradoc/download",
   "global-mantragiturl": "https://github.com/mantrajsframework/mantrad",
   "global-redentitiesgiturl": "https://github.com/mantrajsframework/redentities",
   "global-mantralinkedinurl": "https://www.linkedin.com/in/mantrajs",
   "global-privacyandtermslink": "/content/termsandconditions",
   "global-redentitiesurl": "https://github.com/gomezbl/redentities",
   "global-registerurl": "/users/register",
   "global-sitecompany": "Mantra",
   "global-sitename": "Mantra Framework",
   "global-sitetermsandconditionslink": "/content/termsandconditions",
   "global-supportmail": "support@mantrajs.com",
    "global-whitepaperdownloadurl": "/mantradoc/whitepaper"
}

With this, any view can include any of those Mustache variables without the need to add them for each view, as you can see in this HTML snippet extracted from the current footer of Mantra site:

<div class="row mt-4 mb-4">
  <div class="col-12">
      <div class="text-center">
         <small> 2019-{{{currentyearblock}}} Mantra<br> {{{allrightsreserved}}}</small></br>
         <small>Powered by Mantra - # {{{current-version}}} #</small>
         <div class="social social-bordered mt-4">
            <a class="social-git" href="{{{global-mantragiturl}}}"><i class="fa fa-git"></i></a>
            <a class="social-linkedin" href="{{{global-mantralinkedinurl}}}"><i class="fa fa-linkedin"></i></a>
         </div>
      </div>
   </div>
</div>

You can add any variable name to GlobalTemplateVars section, but the recommendation is to inlude names starting with "global-", to identify that those variables al global template vars located at the project configuration file.