Using Template Web for WebProjects (Onesait Platform Web Template)

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.

For starters, you must download the repository from https://github.com/onesaitplatform/onesaitplatform-webproject-template 

Once downloaded, you will find a structure like this:

Within the repository, you can distinguish 2 parts:

• 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.

The login template (login.html) is used to login users against the application by performing an authentication process to access the Index template.

The Index template (index.html), is the project’s home web. From there, using a visualization and a configurable menu system (which we will see later in more detail in the front-end libraries section of the application), you can access all front-end management elements.

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 are going to divide them into "app," application files; and third-party files, "vendors", that are open-source plugins or libraries used to generate livehtml gadgets or specific functionalities in some of them.

We see below the structure and content of the folders.

1st Level	2nd Level	Folder Description
It contains the basic files for the front-end part and its configuration.		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.
Contains the third-party library and plugin files used for the front-end part and the dashboard configuration		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.

All the information that the front-end needs to auto-configure is stored in the application-config.js file that is in /assets/app/js and is controlled for the menu configuration by menu.js and for aspect control by frontend.js, both in this same location too.

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:

The menuJson Object configures the 1st and 2nd level menus (submenus) of the application and consists of the following properties:

• Menu: name of the menu or platform (informative).

• Rol: role of the user who loads the menu, for loads of different menus according to the role (this functionality is not yet available, foreseen for next version 1.2).

• Home: (Boolean) indicates whether or not you want to have a default Home menu in the menu that will go to index.html by default.

• noSession: in case the session is lost, to which template (at the same index level) you want to redirect the navigation.

• Navigation: Array of navigation objects, that is to say, the menus and submenus themselves.

Within the navigation array (navigation), you can load two types of elements: simple menus and menus with submenus. In both cases, these items can load both HTML pages (to which navigation will be redirected) and application dashboards, which will be loaded via iframe in the index. Let's look at the properties of each one:

Simple menu (without submenus):

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

• url: used if you want to load a page. If you want to load a dashboard, it must be left empty.

• submenu: it will contain the submenus if it is a menu with submenus. In the case of a simple menu, simply leave it empty to indicate that.

• Dashboard: specifies that the menu will load a dashboard. If you want to load a page, leave this object empty; otherwise, configure the following fields:

  • Src: the complete url with https of the dashboard to load. The dashboard link that the console gives.

  • Title: the dashboard's title.

  • Background: if you want to load a background color in the iframe dashboard container.

  • Height: the height in pixels of the dashboard. If it does not apply, it is loaded by default in 650px.

  • Mode: INSERT, indicates the dashboard mode. It is a future functionality, which now does not apply in this version.

Let's see below two examples, one for page and one for dashboard:

Simple Menu to page::

Simple Menu to Dashboard:

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:

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:

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.

Let's see these blocks or configuration sections and their missions:

• General parameters (title, description.)

• Access: base url and API url to connect the front-end with the Onesait platform. It also specifies the path to the images used in the front-end pages and the type of access to the index (PUBLIC, PRIVATE), which are the two modes of access:

  • PUBLIC: when accessing the index, you are not requested to log in and there is no logging process.

  • PRIVATE: when accessing the index, if you have not previously logged in (login), then the application redirects you to the login screen where you can log in against the onesait platform, using the urlbase and api that were previously configured for the processes of oAuth and logging.

• App (application): logo and index settings. Also specifies whether you want to have the footer visible, or a welcome pop-up message, …

• Login: configuration of the login, including logo, background etc., and also if you want to add the singUp services (adding the programming), forgotpassword and rememberMe.

• User: user elements and menu, in the header if the user information is visible. It has a drop-down menu with a number of items and links that can be created and customized. To do this, the administrator chooses what she wants to see and configures that.

• Header: configuration of visible elements within the index heading. From here, you can easily configure if you have some elements (static and other dynamic) are visible/hidden in the header (header) of the application:

  • Dashboards (static configurable menu).

  • Reports (static configurable menu).

  • Search (configurable search engine).

  • Notifications (configurable notification drop-down).

  • Quick actions (configurable quick actions).

  • User profile (drop-down with user profile options).

  • Sidebar menu (additional configurable configuration menu).

  • Template configuration (configuration menu that allows all these configurations).

• Content: configuration of the first dashboard to load in the index after loading.

  • It allows to specify, like in the menu, the information of a dashboard, so that it is loaded successfully in the index after loading.

• Footer: configuration of elements in the footer of the index. It allows you to configure the elements that are visible in the footer and its links to pages (which you can create and add to the web project). You can add the following pages: About, Privacy, Terms, Company and Support.

• Themes: menu color selection and visual theme (in development).

We will now an example of this template configuration object below:

Deployment

Once you have configured my template, you can open the login.html file from your computer and check that everything works.

To deploy it as a web platform project, simply package the project as a ZIP file

and deploy it in a platform instance following the steps described in this guide: Publishing your web site on the Platform with the WebApps Manager.