| Table of Contents | ||||
|---|---|---|---|---|
|
Introduction
The Web Template is a base template that allows you to easily create deployable web applications such as platform Web projects simply by configuring a set of endpoints in the JS configuration files.
...
HTML templates.
Javascript and CSS libraries of the application (assets).
HTML Templates
When cloning the project, you will see 2 templates: index and login. Both are configurable templates to fit the needs of the project.
...
Each of these screens or visualizations are encapsulated in dashboards (as explained más adelante). These dashboards are dynamic display elements made up of gadgets/widgets that interact with each other and load data optimally.
JavaScript and CSS style libraries
In the project, in addition to the basic style libraries and the basic JavaScript libraries that are used in the dashboards for their generic gadgets, a series of additional open-source libraries is mandatory for some of the functionalities. All of the functionalities are described below.
...
We see below the structure and content of the folders.
1st Level | 2nd Level | Folder Description |
|
 | The css folder has the style files. The js folder has the basic JavaScript files for the front-end, which initializes basic, boostrap, and configuration and operation functionalities for the index and login templates. The media folder has images, logos and backgrounds for the front-end application. | |
|  | The base folder has the used icon font files, in addition to grouped files of several styles and several JavaScript plugins that are used for fields of type: date, datepicker, datetimepickers, select2, boostrap-select, input mask, jquery-validation, range, sliders, colorpickers, etc. datatables is the folder that contains styles and JavaScript used by the data tables used in different dashboards. x-editable contains an open source plugin for online data editing. |
Configuration system
The template configuration system has two main objectives, the first one being to configure access and the navigation menu of the front-end application, and the second one, to configure the visual aspect of the index and login template.
...
Within the application-config.js, two JSON configuration objects are declared: One for the menu and the other for the access configuration and front-end aspect. We will next see the format and use of the object that describes the front-end navigation system menus:
...
Configuration of the menuJson menu object in application-config.js:
...
Simple menu (without submenus):
{title:{EN:"…",ES:"…"},icon:"",url:"",submenu:[], dashboard:{}} |
The main condition for making a simple menu is to place the submenu property in an empty array. The following fields allow:
title: specifies the title or label that will be displayed. It can be indicated in several languages: EN, ES,…
icon: specifies the icon that will be used for this menu. You can use any icon available in the following libraries and with this format:
fontAwesome, with "fa fa-ICON" format (e.j "fa fa-calendar", for calendar).
lineAwesome, with "la la-ICONO" format.
flaticon with "flaticon-ICON" format.
https://fontawesome.com/icons?d=gallery&m=free, https://icons8.com/line-awesome
...
Let's see below two examples, one for page and one for dashboard:
Simple Menu to page::
{title:{EN:"Page",ES:"Página"},icon:"fa fa-file",url:"http://www.google.es",submenu:[], dashboard:{}} |
Simple Menu to Dashboard:
{title:{EN:"Dashboard",ES:"Dashboard"},icon:"la la-dashboard",url:"",submenu:[], dashboard:{title: "myDashboard", src: "https://development.onesaitplatform.com/controlpanel/dashboards/view/MASTER-Dashboard-2/", background: "#FFCC00", height: "1000px", mode: "INSERT"}} |
The other option that allows a simple menu is a separation element, which only acts as a separator between groups of menus. To create a separator, add a simple menu without url and without dashboard:
Simple separator menu:
{title:{EN:"Separator",ES:"…"},icon:"fa fa-line",url:"",submenu:[], dashboard:{}} |
The other option of the Navigation System is the complex menus or menus with submenus. They work exactly like the simple ones, only they are located within the submenu[ ] field of the main menu. Let's see an example below:
{title:{EN:"menu1",ES:"menu1"},icon:"flaticon-cart",url:"", |
With all these options the navigation of the application is built as we can see below:
 | In this image, you can see all the types of elements that you can build in the navigation of the application: The home menu, by default not shown; several menus with submenus; the menu of Complaints with two submenus: Dashboard and Report; and another menu with submenus called Objectives. |
The next configuration object is mainJson. This JSON object configures the behavior and visual style of the login and index templates. To do this, the configuration is divided into blocks that describe each of the areas of the pages or general elements thereof.
...
We will now an example of this template configuration object below:
// FRONTEND MAIN CONFIGURATION |
Deployment
Once you have configured my template, you can open the login.html file from your computer and check that everything works.
...