Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
maxLevel2
minLevel2

...

En el proyecto además de las librerías de estilos básicas y de las librerías de JavaScript básicas que se usan en los dashboards para sus gadgets genéricos, es necesario para algunas de las funcionalidades desarrolladas una serie de librerías open-source adicionales, a continuación, se describen todas ellas.
Las vamos a dividir en archivos de aplicación "app" y archivos de terceros, "vendors" que son plugins o librerías open-source que se utilizan para generar gadgets livehtml o funcionalidades específicas en algunos de ellos.
Vemos a continuación la estructura y contenido de las carpetas.

1º Nivel

2º Nivel

Descripción de la carpeta

Image Modified
Contiene los archivos básicos para la parte de frontend y su configuración.

Image Removed
Image Added

En la carpeta css están los archivos de estilo.
En la carpeta js están los archivos básicos JavaScript para el frontend, que inicializa funcionalidades básicas y de boostrap y de configuración y funcionamiento de las plantillas index y login.
En la carpeta media tenemos imágenes, logotipos y fondos de la aplicación frontend.

Image Modified
Contiene los archivos de librerías y plugins de terceros que se usan para la parte de frontend y la configuración de dashboards

Image Modified

En la carpeta base están los archivos de fuentes de iconos usados, además de unos archivos agrupados de varios estilos y varios plugins JavaScript que se usan para campos tipo date, datepicker, datetimepickers, select2, boostrap-select, input mask, jquery-validation, range, sliders, colorpickers, etc.
datatables es la carpeta que contiene estilos y JavaScript usados por las tablas de datos usadas en varios dashboards.
x-editable contiene un plugin open source para la edición en línea de datos.

Sistema de configuración

El sistema de configuración de templates tiene 2 objetivos principales: el primero, configurar el acceso y el menú de navegación de la aplicación frontend, y el segundo, configurar el aspecto visual de la plantilla index y login.
Toda la información que necesita el frontend para auto-configurarse se almacena en el archivo application-config.js que está en /assets/app/js y es controlado para la configuración de menú por menu.js y para el control del aspecto por frontend.js, ambos también en la misma ubicación.
Dentro del application-config.js se declaran dos objetos de configuración JSON, uno para el menú y otro para la configuración de acceso y aspecto del frontend, a continuación, vamos a ver el formato y uso del objeto que describe los menús del sistema de navegación del frontend:

Image Removed
Image Added

Configuración del objeto menú menuJson en application-config.js
El Objeto menuJson configura los menús de 1º y 2º nivel (submenús) de la aplicación y se compone de las siguientes propiedades:

...



Dentro del array de navegación (navigation) se pueden cargar dos tipos de elementos, menús sencillos y menús con submenús, en ambos casos, estos ítems pueden cargar tanto páginas HTML (a las cuales será redirigida la navegación) como dashboards de la aplicación, que se cargarán vía iframe en la index. Veamos las propiedades de cada uno:
Menú sencillo (sin submenús):

{title:{EN:"…",ES:"…"},icon:"",url:"",submenu:[], dashboard:{}}

La condición principal para hacer un menú sencillo es colocar la propiedad submenú a un array vacío, los siguientes campos permiten:

  • title, indica el titulo o label que se mostrará se pueden indicar en varios idiomas EN,ES,…

  • icon: indica el icono que se usará para este menú, se pueden usar cualquier icono de los disponibles en las siguientes librerías y con este formato:

...


Veamos a continuación dos ejemplos uno para página y otro para dashboard:


Menú Sencillo a página:

{title:{EN:"Page",ES:"Página"},icon:"fa fa-file",url:"http://www.google.es",submenu:[], dashboard:{}}

Menú sencillo a 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"}}


La otra opción que permite un menú sencillo es un elemento de separación, que sólo hace de separador entre grupos de menús, para crear un separador se agrega un menú sencillo sin url y sin dashboard:
Menú sencillo separador:

{title:{EN:"Separator",ES:"…"},icon:"fa fa-line",url:"",submenu:[], dashboard:{}}


La otra opción del Sistema de navegación son los menús complejos o menús con submenús, funcionan exactamente igual que los sencillos, solo que se ubican dentro del campo submenu[ ] del menú principal, veamos a continuación un ejemplo:

{title:{EN:"menu1",ES:"menu1"},icon:"flaticon-cart",url:"",
submenu:[
{title:{EN:"submenu1",ES:"submenu1"},icon:"flaticon-laptop",url:"index.html", dashboard:{}},
{title:{EN:"submenu2",ES:"submenu2"},icon:"flaticon-comment",url:"index.html", dashboard:{}},
{title:{EN:"Dashboard 1",ES:"Dashboard"},icon:"flaticon-calendar-1",url:"",
dashboard:{
src:"https://development.onesaitplatform.com/controlpanel/dashboards/view/MASTER-Dashboard-2/",
title: "Dashboard Example",
background: '',
height: '850px',
mode: 'INSERT'
}
}
]
}

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

Image Removed
Image Added

En esta imagen podemos ver todos los tipos de elementos que podemos construir en la navegación de la aplicación:
El menú home, por defecto no mostrado, varios menús con submenús, el de Complaints con dos submenús: Dashboard y Report, y otro menú con submenús que se llama Objectives.


El siguiente objeto de configuración es mainJson. Este objeto JSON configura el comportamiento y el estilo visual de las plantillas login e index. Para ello dentro se divide la configuración en bloques que describen cada una de zona de las páginas o elementos generales de las mismas.
Vamos a ver estos bloques o secciones de configuración y su cometido:

...


A continuación, vemos un ejemplo de este objeto de configuración del template:

// FRONTEND MAIN CONFIGURATION
var mainJson = {
title: "onesait Platform | BI Datalake Dashboards",
description: "onesait Platform PoC",
currentSkin: 'skin-light',
access:{
urlBasePath: "",
imgBasePath: "assets/app/media/img/",
entry: "PRIVATE",
urlBase:"https://dev-datalake.onesaitplatform.com/",
urlApi: "https://dev-datalake.onesaitplatform.com/api-manager/server/api"
},
app: {
appLogo: '',
appLogoCss: 'width: auto; max-height: 60px;',
appLogoBackground: 'background-color: rgb(14, 102, 139) !important',
appHome: 'onesait BI Datalake',
appLoading: '',
appFooter: true,
appStickymenu: false,
appWelcome: false,
},
login:{
loginLogo: './assets/app/media/img/logos/Minsait-logo-invert.png',
loginLogoStyle: 'width: auto; height: 230px;',
loginBackground: './assets/app/media/img/bg/bg-4.jpg',
loginDescription:'wellcome to onesait BI Datalake',
signInTitle: 'onesait BI Datalake, please sign In:',
signInBtnColor: '', // NEW-ELEMENT.
signUp: false,
forgotPassword: false,
rememberMe: false
},
user:{
showAvatar: true,
avatar: 'assets/app/media/img/logos/database.png',
profile: {link:"profile.html",text:"ROL",visible: false},
support: {link:"support.html",text:"Support",visible: false},
activity: {link:"activity.html",text:"Activity",visible: false},
messages: {link:"messages.html",text:"Messages",visible: false},
faq:{link:"faq.html",text:"FAQ",visible: false},
logout: {link:"login.html",text:"Exit",visible: true}
},
header: {
headerDashboads: false,
headerReports: false,
headerSearch: false,
headerNotifications: false,
headerQuickactions: false,
headerUser: true,
headerSidebarToggle: false,
headerSessionConfiguration: false // NEW-ELEMENT.
},
content: {
contentHead: true,
contentTools: true,
contentTitle: 'BI DataLake Complaints',
contentHeadCss: '',
contentTitleCss: '',
contentDashboard: {
enabled: true,
dashboardName: 'BI DataLake Complaints',
changeTitle: true,
notification: false,
src: "https://dev-datalake.onesaitplatform.com/controlpanel/dashboards/viewiframe/632334ea-fea9-4f91-b146-dd2a3ddb1598",
background: '#FFF',
height: '850px',
mode: 'INSERT'
}
},
footer: {
footerCopyright: "2019 © IndraCompany BI Datalake by Minsait",
footerLinks: true,
footerLinkAbout: {link:"about.html",text:"About",visible: true},
footerLinkPrivacy:{link:"privacy.html",text:"Privacy",visible: true},
footerLinkTerms: {link:"terms.html",text:"Terms",visible: true},
footerLinkCompany:{link:"company.html",text:"Mindsait",visible: true},
footerLinkSupport:{link:"support.html",text:"onesait Support Center",visible: true}
},
themes:{
availableSkin: ['skin-light','skin-dark'],
changeSkin: 'skin-light',
contentBackground : 'ghostwhite',
contentPadding: '0px 0px', // 30px 30px;
menu: ''
}
};


Despliegue

Una vez he configurado mi template puedo abrir desde mi equipo el fichero login.html y comprobar que todo funciona. 

...