Versions Compared

Key

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

...

1st Level

2nd Level

Folder Description


It contains the basic files for the front-end part and its configuration.

Image RemovedImage Added

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.

...

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:

Image RemovedImage Added

Configuration of the menuJson menu object in application-config.js:

...

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

...

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

// 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: ''
}
};

Deployment

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

...