KingAdmin - Admin Dashboad Documentation

Getting Started

Thank you for purchasing KingAdmin Admin Dashboard. By reading this documentation we hope you will get the most of its features. This template/theme is built with the latest Bootstrap 3 and Sass. We recommend that you use Sass to customize the theme because it will be very easy since we have provided variables to change the color, font and others. If you have any questions that are beyond the scope of this help file, please feel free to contact us by sending your message via form provided by Wrapbootstrap https://wrapbootstrap.com/user/thedevelovers.

Directory Structure

• documentation/: where this documentation is placed
• theme/: includes theme files

Javascript files includes jQuery and the plugins are located at assets/js/. Files named as king-* are used to initialize and and configure plugins. They are:

• king-chart-stat.js
• king-chart-stat-transparent.js
• king-common.js
• king-components.js
• king-components-transparent.js
• king-elements.js
• king-form-layouts.js
• king-page.js
• king-page-transparent.js
• king-table.js

File with "-transparent.js" is specificly used with transparent skin only. It's required because some color customization can only be done when the plugin is configured and initialized. Other than that, it's done in css skin file assets/css/skins/transparent.css.

Layouts

The layout in general is divided into 4 main areas, they are top bar, left navigation, right area as main content and footer. Also, we put general alert on above top bar and it can be closed. See below for the illustration.

Layout Options

KingAdmin provides you with option for layout as below:

• Collapsed Sidebar: when page is loaded, left navigation sidebar is initially collapsed. Open layout-collapsed.php for demo.
• Minified Sidebar: when page is loaded, left navigation sidebar is initially minified with icon only. Open layout-minified.php for demo.
• On-Top Navigation: alternative main navigation, placed on top bar. Open layout-ontop-navigation.php for demo.

Common JS

Below is the list of the common javascripts files needed for all the pages. Make sure that you always include them.

• jquery-2.1.0.min.js jQuery
• bootstrap.js Bootstrap
• modernizr.js Modernizr
• bootstrap-tour.custom.js Bootstrap Tour
• king-common.js Initialization file for various common functions such as top bar notifications, left menu dropdown, widget etc

Widget

The widget comes with several styles and functionalities, including button to trigger AJAX call and make changes to the widget content. Basic widget will have a structure as below.

However some widgets could have a button to do a single task, for example triggering AJAX call as below.

JS File: assets/js/king-common.js
PHP File: php/widget-ajax.php

Pages

Some of the pages such as Invoice and Inbox need the scripts to work properly. Please see king-page.js to check the scripts needed for page template. Somehow, other script may be included for example bootstrap-switch.min.js to create the switch version of the checkbox and so on.

Chart & Stat

KingAdmin uses Flot Chart (http://www.flotcharts.org/) as main library to work with charts. Flot Chart scrips located at assets/js/stat/flot/ directory with jquery.flot.min.js as the main library script, meanwhile others are plugin to work with specific function such as chart selection, tooltip etc. In addition, we also provide easyPieChart and Sparkline for other chart and statistic purposes.

Flot Chart

Create a placeholder div to put the graph in and it's important to note that the chart need a dimension defined, so you have to set width and height either by inline css or external stylesheet. This example uses inline style, whereas the theme use external stylesheet.

Then when the div is ready in the DOM, which is usually on document ready, run the plot function:

Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the API reference. Here's a quick example that'll draw a line from (0, 0) to (1, 1):

For more advanced use with various options as seen on the chart demo page, you can check the scripts at king-chart-stat.js and find "CHART AND STAT DEMO PAGE". Official documentation can be found here at https://github.com/flot/flot/blob/master/API.md

easyPieChart

easyPieChart (http://rendro.github.io/easy-pie-chart/) create simple pie chart with single value as you see on the first widget of the dashboard.

Plugin File: assets/js/plugins/stat/jquery.easypiechart.min.js
Site: http://rendro.github.io/easy-pie-chart/

To create the chart first add the element with data-percent attribute with the percent number as the value.

Initialize the chart as below:

For further complete documentation includes possible configuration options, please visit the official documentation at http://rendro.github.io/easy-pie-chart/

Sparkline

This chart is mainly used for inline chart with relatively small size compared to the others. First add the placeholder element as below.

Plugin File: assets/js/plugins/jquery-sparkline/jquery.sparkline.min.js
Site: http://omnipotent.net/jquery.sparkline/#s-docs

Provide the data and initialize the chart as below:

Please visit official documentation at http://omnipotent.net/jquery.sparkline/#s-docs for further examples and options.

D3 Heatmap Charts

This chart is an example of data visualization of visit statistic for 24 hours in a week. It uses D3.js, a Javascript library for manipulating documents based on data.

Plugin File: assets/js/plugins/stat/d3.js
Site: http://d3js.org/
Data File: assets/js/plugins/stat/data-heatmap.tsv
Optional: assets/js/plugins/stat/colorbrewer.js (providing set of colors)

As data source for the chart, we use .tsv (tab-separated values) file as source of data. Then the next step is creating a placeholder for the chart, in the below example the element has id demo-d3-heatmap. Part of code below is taken from charts-d3charts.html in case you want to see the full code.

Next, open file assets/js/king-chart-stat.js and find "demo-d3-heatmap", it should point to the code as below:

Provide the value to the placeholderHeat and dateHeat. The variable name and comment on the above code should be self-explanatory.

D3 Bar Chart

The chart can accomodate negative values and built based on D3.js library

Plugin File: assets/js/plugins/stat/d3.js
Site: http://d3js.org/
Data File: assets/js/plugins/stat/data-barchart.tsv

Create the placeholder for the chart

Next, open file assets/js/king-chart-stat.js and find "demo-d3-barchart", it should point to the code as below:

Provide the value to the placeholderBar and dataBar. The variable name and comment on the above code should be self-explanatory.

Forms

This section explains form element used in the theme and its validation. In addition, we will show you how to create the file upload zone area from Dropzone and the PHP files related with uploading process.

Form Elements

Beside the standard Bootstrap form element, we also provide some 3rd-party libraries for additional functions and styles. The scripts used for the initialization is king-elements.js

Masked Input

It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc)

Plugin File: assets/js/plugins/jquery-maskedinput/jquery.masked-input.min.js
Site: http://digitalbush.com/projects/masked-input-plugin/

For example you want the text field is formatted as phone number, first create the input element as below

Then define the rules as below example, you can define your own rule though

For further examples, see king-element.js or visit the official site at http://digitalbush.com/projects/masked-input-plugin/

Switch

Fancy checkbox and radio button with various styles

Plugin File: assets/js/plugins/bootstrap-switch/bootstrap-switch.min.js
Site: http://www.bootstrap-switch.org

Add the checkbox element

Initialize it

Multiselect

Plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.

Plugin File: assets/js/plugins/bootstrap-multiselect/bootstrap-multiselect.js
Site: http://davidstutz.github.io/bootstrap-multiselect/

Create the select element as below

Initialize the plugin

Range Slider Input

A powerful slider for selecting value ranges, supporting dates and more.

Initialize the plugin

Plugin File: assets/js/plugins/jqallrangesliders/jQAllRangeSliders-min.js
Site: http://ghusse.github.io/jQRangeSlider/documentation.html

Date Picker

Adding date picker capability to field or other element

Plugin File: assets/js/plugins/bootstrap-datepicker/bootstrap-datepicker.js
Site: http://www.eyecon.ro/bootstrap-datepicker

Initialize the plugin, also hide it after the date has been selected.

Date Range Picker

Enable date range selection via dropdown menu calendar

Plugin File: assets/js/plugins/daterangepicker/daterangepicker.js
Require: assets/js/plugins/moment/moment.js
Site: https://github.com/dangrossman/bootstrap-daterangepicker

Initialize the plugin with timePicker enabled

Text Area

Enable character counter to text area

Determine the maximum character as below

Spinner Input

A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

Plugin File: assets/js/plugins/bootstrap-touchspin/jquery.bootstrap-touchspin.js
Site: http://www.virtuosoft.eu/code/bootstrap-touchspin/

Initialize the plugin

Color Picker

Adding color picker to field or any other element

Plugin File: assets/js/plugins/bootstrap-colorpicker/bootstrap-colorpicker.min.js
Site: http://www.eyecon.ro/bootstrap-colorpicker/

Initialize the plugin

Simple Color Picker

Simple color picker with provided color options

Plugin File: assets/js/plugins/jquery-simplecolorpicker/jquery.simplecolorpicker.js
Site: https://github.com/tkrotoff/jquery-simplecolorpicker

Initialize the plugin

Dynamic Form Fields

User can add more field as necessary

jQuery script as below

Slider Input since v1.2

A Bootstrap slider input with various features such as horizontal, vertical slider, step, range selector and others.

Plugin File: assets/js/plugins/bootstrap-slider/bootstrap-slider.js
Site: http://www.eyecon.ro/bootstrap-slider

Initialize the plugin via javascript

You can also determine the orientation either horizontal (default) or vertical slider. In addition if you want to create step slider (incremented by certain number), use step option and provide the step number.

Select2 since v1.2

This plugin is used to replace the default select boxes.

Plugin File: assets/js/plugins/select2/select2.min.js
Site: http://ivaynberg.github.io/select2/index.html

Initialize the plugin via javascript

For further use, you can visit the official documentation here http://ivaynberg.github.io/select2/index.html#documentation.

Tags Input since v1.2

Provide input for tags as easy as type and hit enter.

Plugin File: assets/js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js
Site: http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field. You can also provide the initial value as shown on the above snippet.

Form Validation

We use Parsley to validate form without writing any single line of javascript, powerful, simple and easy to use.

Plugin File: assets/js/plugins/parsley-validation/parsley.min.js
Site: http://parsleyjs.org

For more example and options please visit the official documentation at http://parsleyjs.org/documentation.html

Dropzone File Upload

Provides drag and drop uploads with image previews. It also has fallback support for older browser.

Plugin File: assets/js/plugins/dropzone/dropzone.min.js
Site: http://www.dropzonejs.com/

Initialize the plugin as below

The url refers to server-side upload processor file (dropzone-upload.php), in this case PHP. You can find it on the php/ directory. As you can see on the dropzone-upload.php, the file will be uploaded to php/uploads/ directory.

In-Place Editing since v1.2

This theme uses x-editable plugin to allow you to create editable elements on your page or form, includes both popup and inline mode.

Plugin File: assets/js/plugins/bootstrap-editable/bootstrap-editable.min.js
Site: http://vitalets.github.io/x-editable/

Main attributes you should define are:

• type - type of input (text, textarea, select, etc)
• url - url to server-side script to process submitted value (/post, post.php etc)
• pk - primary key of record to be updated (ID in db)
• id or name - name of field to be updated (column in db). Taken from id or data-name attribute
• value - initial value. Usefull for select, where value is integer key of text to be shown. If empty - will be taken from element html contents

Alternatively, you can set all options via javascript

WYSIWYG Text Editor since v1.2

Summernote is super simple text editor for Bootstrap.

Plugin File: assets/js/plugins/summernote/summernote.min.js
Site: http://hackerwins.github.io/summernote/

Initialize the plugin with some options

You can also define custom toolbar and use callbacks, please follow this documentation http://hackerwins.github.io/summernote/features.html#api

Markdown Text Editor since v1.2

A simple Markdown editor for Bootstrap, easy to use with useful APIs.

Plugin File: assets/js/plugins/markdown/bootstrap-markdown.js
Site: http://github.com/toopay/bootstrap-markdown

On the code above we initialize the editor using data-provide attribute. In addition the text editor will use Font Awesome icons as icon library for the editor via data-iconlibrary, default to glyph (Glyphicons) as provided by Bootstrap distribution file.

UI Elements

Progress Bar

This plugin extend the basic progress bar from Twitter Bootstrap. It can animate the progress bar and has various info progress format such as percentage or custom format.

Plugin File: assets/js/plugins/bootstrap-progressbar/bootstrap-progressbar.js
Site: http://www.minddust.com/project/bootstrap-progressbar/

Initialization with basic config:

Labels & Badges

Standard bootstrap labels and badges, please follow the links below for the documentation.

Site: http://getbootstrap.com/components/#labels, http://getbootstrap.com/components/#badges

Pagination

In addition to the standard bootstrap pagination, we also provide alternative style for pagination.

Site: http://getbootstrap.com/components/#pagination

Alternative style for pagination, just add class borderless.

Alerts

Standard bootstrap alerts, please follow link below for the documentation.

Site: http://getbootstrap.com/components/#alerts

For smoother closed message with fade out effect, we add a little bit script as below

Tooltips

Standard bootstrap tooltip.

Plugin File: assets/js/bootstrap/bootstrap.js
Site: http://getbootstrap.com/javascript/#tooltips

Initialize the plugin as below

Modal Dialog

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Plugin File: assets/js/bootstrap/bootstrap.js
Site: http://getbootstrap.com/javascript/#modals

Tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

Plugin File: assets/js/bootstrap/bootstrap.js
Site: http://getbootstrap.com/javascript/#tabs

Accordion

Standard bootstrap collapsible content. We can add icon, label and badge to the tab.

Plugin File: assets/js/bootstrap/bootstrap.js
Site: http://getbootstrap.com/javascript/#collapse

Buttons

The standard bootstrap buttons can be extended as buttons dropdown, grouped as button groups and combined with font icon such as Font Awesome. In addition, button also can have loading state on it, mostly used to process ajax.

Site: http://getbootstrap.com/css/#buttons
Stateful button: http://getbootstrap.com/javascript/#buttons since v1.2

Below is the example on how to create a stateful button

Javascript to process ajax by clicking the button

As shown above, the button will start change to loading state once executed btn.button('loading') and back to initial after reset, btn.button('reset').

Icons

We use Font Awesome icons as our main icon collection, but however you can also use Glyphicons delivered with bootstrap. Note that these icons only comes with 200 glyphs from the Glyphicon Halflings set.

Site: http://getbootstrap.com/components/#glyphicons
Font Awesome: http://fortawesome.github.io/Font-Awesome/examples/
Glyphicons: http://glyphicons.com/

Flash Message

Alert a user with Growl like flash message which comes with alert placement and style options. It has sound too!

Plugin File: assets/js/plugins/jquery-gritter/jquery.gritter.min.js
Site: http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/

Initialize a flash message

Components

In this section, we will explain how the wizard works with form validation, setup calendar, maps and others

Wizard

We have added the validation to the wizard using parsley form validator as explained on the Form Validation sub-topic

Plugin File: assets/js/plugins/wizard/wizard.min.js
Site: http://exacttarget.github.io/fuelux/#wizard

As you can see the validation is simple, by adding the data attributes data-parsley-* as your requirements. Then we initialize the plugin, integrate it with Parsley validator and setup the navigation and event when the wizard is finished.

Calendar

The calendar from FullCalendar plugin provides a full-sized, drag & drop calendar. The calendar comes with 3 view modes, i.e. month, week and day

Plugin File: assets/js/plugins/fullcalendar/fullcalendar.min.js
Site: http://arshaw.com/fullcalendar/docs/usage/

First add the element for calendar placeholder

Then initialize the plugin

Maps

We use Mapael as map plugin that allows you to display dynamic vector maps, we also provide Google Map with custom style.

Vector Map

Plugin File: assets/js/plugins/jquery-mapael/jquery.mapael.js
Require: assets/js/plugins/raphael/raphael-min.js
Maps: assets/js/plugins/raphael/maps/
Optional: assets/js/plugins/jquery-mousewheel/jquery.mousewheel.js used in map zoom demo
Site: http://www.neveldo.fr/mapael/

Add elements as below

Then initialize the plugin

name value: world_countries refers to map name defined in the assets/js/maps/world_countries.js, usually has a same value as its file name.

Google Map

Js File: assets/js/plugins/google-map/google-map.js
Site: https://developers.google.com/maps/documentation/javascript/basics

Provide your API key and map address by finding functions below at google-map.js

Bootstrap Tour

Bootstrap tour is new in KingAdmin v1.1 and it's useful to guide user, especially new user to learn the website or simply showing new feature/update to the website. Note that we have fixed bug that only show on IE, so this isn't the original plugin file.

Plugin File: assets/js/plugins/bootstrap-tour/bootstrap-tour.custom.js
Site: http://bootstraptour.com/

basePath value

Bootstrap Tour configured in this theme needs valid basePath value based on web server environment. Please open assets/js/king-common.js and find parameter basePath and provide your value. For example if the theme url is: http://demo.thedevelovers.com/dashboard/kingadmin-v1.1/ the basePath should be /dashboard/kingadmin-v1.1/.

If you clicking "Start Tour" before providing valid basePath value, the page will be redirected to currently provided basePath value. So to avoid redirection problem, after providing valid value for basePath, you also have to remove key tour_current_step in your browser local storage. Below is how to find and remove the key.

Make sure the key has been removed by refreshing local storage (step 5), then back to homepage (dashboard).

To create a tour first we have to determine element target identified by id or class. Let's say we want the search box is guided by tour then we will have the element as below:

Note that the search box has id tour-searchbox and a button with id important-button, so in the javascript we will set this as below:

So in the example above. the first step of the tour will highlight the searchbox and then to the button as the next step. You can also create a cross-page tour by defining path value on the step. Please read the full documentation about Bootstrap Tour at http://bootstraptour.com/api

Tree View

Tree view is implemented with jsTree plugin using AJAX data loading method.

Plugin File: assets/js/plugins/tree/jstree.js
Site: http://www.jstree.com/
Data File: assets/js/plugins/tree/tree-filesystem.json

Below is a customized tree view, it uses icons from Font Awesome.

Initialization and configuration

Since the tree is populated with JSON by AJAX loading, provide valid url to the JSON file. jsTree also provide plugins to extend core functionality, on the example above, contextmenu is used to provide right click pop-up menu for each tree item while checkbox plugin is used to enable checkbox in each node item. In addition, you can change icon for each tree item type using types plugin.

Tree data JSON file: assets/js/plugins/tree/tree-filesystem.json

Tables

This section will show you about the tables, both static comes from standard bootstrap table and dynamic table from jQuery Datatables

Static Table

Standard bootstrap table

Site: http://getbootstrap.com/css/#tables

Dynamic Table

DataTables

We use DataTables, a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Below is basic usage of DataTables with bootstrap support

Plugin File: assets/js/plugins/datatable/jquery.dataTables.min.js
Require : assets/js/plugins/datatable/dataTables.bootstrap.js for bootstrap style support, assets/js/plugins/datatable/exts/ as datatable extension such as export data feature
Site: http://datatables.net/

Initialise the datatable with bootstrap small column (col-sm-6) for table features at the top and bottom of the table.

jqGrid

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.

Plugin File: assets/js/plugins/jqgrid/jquery.jqGrid.min.js
Recommended : assets/js/plugins/jqgrid/jquery.jqGrid.fluid.js
PHP File : php/jqgrid/server.php
DB File : database_demo.sql to be exported to the database later
Site: http://www.trirand.com/jqgridwiki/doku.php

Important: Please configure your database connection on php/jqgrid/dbconfig.php as below

1. Create database dashboard_demo
2. Import sql script database_demo.sql to create invheader table with its data.

Typography

For further documentation, please visit bootstrap official documentation

Site: http://getbootstrap.com/css/#type

Skins

Since Kingboard v1.1 you are provided with 10 built-in skins that includes 8 color skins and 3 special skins (Transparent, Full Bright and Full Dark). You can locate the skin files at assets/css/skins/ and if you use Sass locate the files at sass/skins/. By default the theme didn't use any skin file provided and if you want to apply the skin to the theme please add code below in the head of each html file.

In the example above, a skin (teal.css) is applied and you may prefer the other skin like darkblue, orange, fulldark and so on as provided at assets/css/skins/

Changelog

Credits

We would like to thank you for jQuery plugins, icons, fonts, images and audio files used in this theme created by the fellow individual developer or team below:

• jQuery - http://jquery.com/
• Bootstrap - http://getbootstrap.com/
• Modernizr - http://modernizr.com/
• jQuery Flot - http://www.flotcharts.org/
• easyPieChart - http://rendro.github.io/easy-pie-chart/
• Sparkline - http://omnipotent.net/jquery.sparkline/
• Mapael - http://www.neveldo.fr/mapael/
• Rapael - http://raphaeljs.com/
• DataTable - http://datatables.net/
• jqGrid - http://www.trirand.com/blog/
• FullCalendar - http://arshaw.com/fullcalendar/
• jQueryUI - http://jqueryui.com/
• FuelUX - http://exacttarget.github.io/fuelux/
• Bootstrap Switch - http://www.bootstrap-switch.org
• Masked Input - http://digitalbush.com/projects/masked-input-plugin
• jQRangeSlider - http://ghusse.github.io/jQRangeSlider/documentation.html
• Bootstrap Color Picker - http://ghusse.github.io/jQRangeSlider/documentation.html
• Simple Color Picker - https://github.com/tkrotoff/jquery-simplecolorpicker
• Bootstrap TouchSpin - https://github.com/istvan-meszaros/bootstrap-touchspin
• Bootstrap Date Picker - http://www.eyecon.ro/bootstrap-datepicker
• Date Range Picker - https://github.com/dangrossman/bootstrap-daterangepicker
• Dropzone - http://www.dropzonejs.com/
• Parsley - http://parsleyjs.org/
• Bootstrap Multiselect - https://github.com/davidstutz/bootstrap-multiselect
• Bootstrap Progress Bar - http://www.minddust.com/bootstrap-progressbar/bootstrap-3.0.0-rc2.html
• Bootstrap Tour - http://bootstraptour.com
• Data-Driven Documents - http://d3js.org/
• Color Brewer - http://colorbrewer.org/
• Gritter - http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/
• Images - http://unsplash.com/
• UIFaces - http://uifaces.com/
• Font Awesome Icons - http://fortawesome.github.io/Font-Awesome/
• Glyphicons - http://glyphicons.com
• Sound Jay - http://www.soundjay.com/
• X-Editable - http://vitalets.github.io/x-editable/
• Summernote - http://hackerwins.github.io/summernote/
• Bootstrap Markdown - http://github.com/toopay/bootstrap-markdown
• Select2 http://ivaynberg.github.io/select2/index.html
• Bootstrap Slider - http://www.eyecon.ro/bootstrap-slider
• Bootstrap Tags Input - http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/
• Typeaheadjs - https://github.com/twitter/typeahead.js
• Mockjax - https://github.com/appendto/jquery-mockjax
• jsTree - http://www.jstree.com/
• Bootstrap Context Menu - https://github.com/sydcanem/bootstrap-contextmenu
• jQuery slimScroll - http://rocha.la/jQuery-slimScroll