Forums Index > Mewsoft > Documentations > Frontpage Dashboard Widgets Customization
mewsoft First Post Posted on: 12-15-19 03:25 PM
Frontpage Dashboard Widgets Customization

Webawy frontpage has a dashboard widgets. These dashboard widgets consists of a css code js/dashboard.css, jquery code js/dashboard.js, and

html code inside the Frontpage template, and finally jquery js code for initialization and settings in the Frontpage template.

Each widget has a header which contains a title and three icons, these icons for, collapsing the widget, hidding the widget, and ediing the widget

color.

Each widget has the following html code:

<li class="widget color-blue" id="widget_id" style="z-index: 2000;">  

                <div class="widget-head"><h3>widget_title</h3></div>

                <div class="widget-content "  style="z-index: 9999;">

                 widget_contents  

                </div>
</li>


 

Each widget must have uniqe id in the li element, in the above example the unique id="widget_id", replace widget_id with a unique name

for each widget.

You set the widget_title and widget_contents to anything you want.


You can control each widget color by the preset color classes in the dashboard.css files, in the above html code you will find:

class="widget color-blue"

you can replace the preset css class color-blue by any other class from these preset classes:


color-red, color-blue, color-green, color-purpple, color-white, color-orange, color-yellow, color-gray, color-pink,  color-black
 


You can edit the file dashboard.css and add your own color classes and use them to change the widgets colors.


The Collapse icon in the widget header allows the users to collapse/expand the widget.

The Close icon allows the users to hide specific widget.

The edit/setting icon allows the users to change each specific widgets colors individually.


You can control each individual widget icons and editing colors by passing these settings in the dashboard init function in the Frontpage tempate:


 

widgetIndividual : {
                search : {
                    'movable': false,
                    'removable': true,
                    'collapsible': true,
                    'editable': true,
                    colorClasses : ['color-red', 'color-blue', 'color-green', 'color-purpple', 'color-white', 'color-orange', 'color-yellow', 'color-gray', 'color-pink',  'color-black' ]
                }
 }


In the above js code, you control the "search" widget by setting the options 'movable', 'removable', 'collapsible', 'editable' to either false or true.

the option "colorClasses" is array of color classes if the editable enabled that will be shown for the user to select from.


To set the options for two or more widgets, do not forget the comma after each widget setting, example:


widgetIndividual : {
                search : {
                    'movable': false,
                    'removable': true,
                    'collapsible': true,
                    editable: true,
                    colorClasses : ['color-red', 'color-blue', 'color-green', 'color-purpple', 'color-white', 'color-orange', 'color-yellow', 'color-gray', 'color-pink',  'color-black' ]
                },
                weather : {
                    'movable': false,
                    'removable': true,
                    'collapsible': true,
                    editable: true,
                    colorClasses : ['color-red', 'color-blue', 'color-green', 'color-purpple', 'color-white', 'color-orange', 'color-yellow', 'color-gray', 'color-pink',  'color-black' ]
                },
                langauge : {
                    'movable': false,
                    'removable': true,
                    'collapsible': true,
                    editable: true,
                    colorClasses : ['color-red', 'color-blue', 'color-green', 'color-purpple', 'color-white', 'color-orange', 'color-yellow', 'color-gray', 'color-pink',  'color-black' ]
                }
            }
 

In the above code the settings for three widgets search, weather, and language, you can change the settings for each widget individually as you like.


 


 


 


Mewsoft Support
www.mewsoft.com