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.

To startFor 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 Index template (index.html), is the project’s home web of the project. From there, using a visualization and a configurable menu system (which we will see later in more detail in the frontend front-end libraries section of the application), you can access all Frontend front-end management elements.

...

Each of these screens or visualizations are encapsulated in dashboards (as explained in point 1.6má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
Image Modified It contains the basic files for the

frontend

front-end part and its configuration.

Image Removed

Image Added

The css folder has the style files. The js folder has the basic JavaScript files for the

frontend

front-end, which initializes basic

and

, boostrap

functionalities

, and configuration and operation functionalities for the index and login templates. The media folder has images, logos and backgrounds for the

frontend

front-end application.

Image Modified Contains the third-party library and plugin files used for the

frontend

front-end part and the dashboard configuration

Image Modified

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 frontend front-end application, and the second one, to configure the visual aspect of the index and login template.

All the information that the frontend 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 one the other for the access configuration and frontend front-end aspect. We will next see the format and use of the object that describes the frontend 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.

...

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 . In the case of a simple menu, simply leave it is simply left 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 appliesapply, 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:

Con todas estas opciones se construye la navegación de la aplicación como podemos ver a continuación:

...

With all these options the navigation of the application is built as we can see below:

Image Added

In this image

we

, you can see all the types of elements that

we

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.

...

• General parameters (title, description.)

• Access: base url and API url to connect the frontend front-end with the Onesait platform. It also specifies the path to the images used in the frontend 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 or 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 logadologging.

• 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 how we do , 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 supportSupport.

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

...