SmartAdmin v1.5.2

Responsive WebApp (Reloaded)


Thank you for purchasing SmartAdmin Responsive WebApp. If you have any questions that are beyond the scope of this help file, please feel free to email us via the email address above.

SmartAdmin WebApp goes beyond the ordinary admin template. Its unique flat design and responsive layout is crafted one of a kind. SmartAdmin comes with 40+ customized jquery plugins including 5 unique plugins (exclusively catered for SmartAdmin). SmartAdmin Layout API lets you customize your project for almost any device - be it Mobile, Web or WebApp - SmartAdmin has you covered!

SmartAdmin is built with the latest version of Bootstrap Framework (v3 +). You can find more about bootstrap and its documentation in the following languages below:

Bootstrap English (US)
Bootstrap (Chinese)
Bootstrap en Français (French)
Bootstrap auf Deutsch (German)
Bootstrap (Russian)
Bootstrap en Español (Spanish)
Bootstrap ua (Ukrainian) 

 

 

There is a SmartAdmin Bug Tracker which you can use to keep track of all issues, fixes and potential updates/features. This page is regularly updated so please be sure to add it as a bookmark!

  

Once you have successfully downloaded SmartAdmin, you will notice right away that the zip folder contains the following:

Click the DEVELOPER directory and you will arrive to the choices below: 


Both, AJAX and the HTML (NON-AJAX ) version for Smartadmin, looks and functions the same. However, the behaviour of the way how the navigation works and how the Scripts are loaded are different. 

Select the appropriate version for your project to begin. If you are an ASP.NET WebForms user, it is best suited to go with the HTML_version (NON-AJAX).

Update: We have recently added three aditional versions (AngularJS, PHP and .NET MVC version) all three come with its different uses and applications. 

 


 

SmartAdmin has a number of different layouts. It can be a fixed or fluid width and it can have a sidebar, collapsed bar, navigation on top or be full-width. You can also lock in the header, ribbon, navigation and the footer. You can combine any of the associated classes to get the desired layout and behavior for your app. You can do this by adding/toggling classes into the body element of the template (please see examples below) 
 
SmartAdmin Layout API was tested for and passed the following resolutions. To test this yourself please go to http://mobiletest.me/ and insert your demo URL
 
SmartAdmin Responsive WebApp
Minified
<body class=”minified”>

Minifies the navigation so users can have more room for the content while still having access to the menu by hovering over the parent node icons. You can also control this by the minify data attribute. Please see the data-attributes section for more info on how this works.

Hidden Menu
<body class=”hidden-menu”>

Completely hides the menu *similar look to microsoft sharepoint hidden menu* - users will have all the space they need while still having access to the full menu by hovering over the left part of the screen (the menu will slide in)

Fixed Header
<body class=”fixed-header”>

Template header is completely fixed and will stay fixed while being scrolled

Fixed Header
<body class=”fixed-ribbon”>

Template ribbon area is completely fixed and will stay fixed while being scrolled *.fixed-header*  class needs to be applied

Fixed Navigation, Header and Ribbon (composite API)
<body class=”fixed-navigation fixed-header fixed-ribbon”>

Template navigation area is completely fixed and will stay fixed while being scrolled *.fixed-header* and *.fixed-ribbon* class needs to be applied (with a fixed navigation class as navigation may not be visible if page content is less than navigation height
 
 
Fixed width (inside container)
<body class=”container”>

Puts the entire template into a container frame - useful if you want that extra bit of white space for clarity. You can also change the background image to whatever you like through the LESS variable file or refer to the list of background images in the screenshot below:
 
 
 
Menu on top
<body class=”menu-on-top”>

This must be placed before the page is rendered, and thus cannot be dynamically inserted. It resets the menu to a horizontal style menu. Please note, unlike the left navigation, the horizontal menu has certain limitations - such as you can only place a limited number of items across. 
 
Remove your demo.js

It is generally a good idea to remove your demo.js file once you have a basic configuration set for your site. So unless you want your users to have full control of the layout, it is highly recommended to remove the demo.css/js files.

 

This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.
This is only a demo, full documentation is made available upon purchase.

The all new and revolutionary JarvisWidgets v2.0 ($35 value) is now exclusive to SmartAdmin. JarvisWidgets allows you to do more than your normal average widgets. You can use realtime AJAX loading in a snap with auto refresh. Add Infinite buttons and controls to the widget header. All widgets are sortable across all bootstrap col-spans and use HTML5 localStorage for its properties such as the title. It also provides RTL Support, Crossbrowser Support, Callback functions and much more!

IMPORTANT: Mobile users please note that the JarvisWidget is turned off for mobile view, to turn it on please see the app.config.js file.

The following script is what initializes fn.jarvisWidget found in app.js 

Did you know you can disable JarvisWidget but still retain the CSS look (without the functionality) by switching off   $.enableJarvisWidgets from the app.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/*
 * INITIALIZE JARVIS WIDGETS
 * Setup Desktop Widgets
 */
function setup_widgets_desktop() {

    if ($.fn.jarvisWidgets && enableJarvisWidgets) {

        $('#widget-grid').jarvisWidgets({

            grid: 'article',
            widgets: '.jarviswidget',
            localStorage: localStorageJarvisWidgets,
            deleteSettingsKey: '#deletesettingskey-options',
            settingsKeyLabel: 'Reset settings?',
            deletePositionKey: '#deletepositionkey-options',
            positionKeyLabel: 'Reset position?',
            sortable: sortableJarvisWidgets,
            buttonsHidden: false,
            // toggle button
            toggleButton: true,
            toggleClass: 'fa fa-minus | fa fa-plus',
            toggleSpeed: 200,
            onToggle: function () {},
            // delete btn
            deleteButton: true,
            deleteMsg: 'Warning: This action cannot be undone!',
            deleteClass: 'fa fa-times',
            deleteSpeed: 200,
            onDelete: function () {},
            // edit btn
            editButton: true,
            editPlaceholder: '.jarviswidget-editbox',
            editClass: 'fa fa-cog | fa fa-save',
            editSpeed: 200,
            onEdit: function () {},
            // color button
            colorButton: true,
            // full screen
            fullscreenButton: true,
            fullscreenClass: 'fa fa-expand | fa fa-compress',
            fullscreenDiff: 3,
            onFullscreen: function () {},
            // custom btn
            customButton: false,
            customClass: 'folder-10 | next-10',
            customStart: function () {
                alert('Hello you, this is a custom button...');
            },
            customEnd: function () {
                alert('bye, till next time...');
            },
            // order
            buttonOrder: '%refresh% %custom% %edit% %toggle% %fullscreen% %delete%',
            opacity: 1.0,
            dragHandle: '> header',
            placeholderClass: 'jarviswidget-placeholder',
            indicator: true,
            indicatorTime: 600,
            ajax: true,
            timestampPlaceholder: '.jarviswidget-timestamp',
            timestampFormat: 'Last update: %m%/%d%/%y% %h%:%i%:%s%',
            refreshButton: true,
            refreshButtonClass: 'fa fa-refresh',
            labelError: 'Sorry but there was a error:',
            labelUpdated: 'Last Update:',
            labelRefresh: 'Refresh',
            labelDelete: 'Delete widget:',
            afterLoad: function () {},
            rtl: false, // best not to toggle this!
            onChange: function () {

            },
            onSave: function () {

            },
            ajaxnav: $.navAsAjax // declears how the localstorage should be saved (HTML or AJAX Version)

        });

    }

}

Notice the custom icon classes, we add the | to separate each toggle state for the icon. You can change any of the icons using the fontawesome library classes. Please be mindful of the icon size as it will break the layout when you use classes such as ".fa-2x".

Widget Structure

All widgets must be placed inside the #widget-grid container followed by <article>[your_widgets]</article> 

Example layout structure (this should be inside the #content container )

By this time you should have a good understanding of the bootstrap grid

Example below is a Single grid layout:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <section id="widget-grid">
        <!-- row -->
        <div class="row">
            <!-- SINGLE GRID -->
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                [YOUR_WIDGET_#1]

            </article><!-- GRID END -->
        </div><!-- end row -->
    </section>

Example below is a Multiple grid layout:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <section id="widget-grid">

        <!-- row -->

        <div class="row">
            <!-- SINGLE GRID -->
            <article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

                [YOUR_WIDGET_#1] 

                [YOUR_WIDGET_#2]

            </article><!-- END GRID -->

            <!-- SINGLE GRID -->
            <article class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

                [YOUR_WIDGET_#3] 

                [YOUR_WIDGET_#4]

            </article><!-- END GRID -->

        </div><!-- end row -->

    </section><!-- end widget grid -->

 NOTE: You will be free to move widgets from one article to another

Widget layout

IMPORTANT! Each widget is unique, therefore each widget must have an unique ID (as per example below) 

Caution: 
ID of the widget does not control where the widget should be on the page rather it works as an identifier for the localStorage. If you wish to rearrange the widget with hard code make sure to clear the localStorage and hit refresh to see the new arrangement

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
    <div class="jarviswidget" id="wid-id-0">

        <header>
            <h2>Widget Title</h2>
        </header><!-- widget div-->

        <div>
            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
                <!-- This area used as dropdown edit box -->
                <input class="form-control" type="text">
            </div><!-- end widget edit box -->

            <!-- widget content -->
            <div class="widget-body">

                [PLACE WIDGET CONTENTS HERE]

            </div><!-- end widget content -->
        </div><!-- end widget div -->
    </div><!-- end widget -->

Widget Controls

You must delete the data-attribute* associated in order to act as true. For example data-widget-togglebutton="true" will still act as false, you must remove the data-attribute for the statement to be true. Please see example values below for proper usage
HTML5 data attributes / CSS / HTML Place after Example value(s) Desctription
These HTML5 attributes are used as individual widget options. Main options can be changed in the widgets plugin it self. Notice: data attributes can only have 1 boolan value(see above)!
data-widget-sortable header false Prevent a widget from being sortable (can only be used with the value 'false').
data-widget-icon .jarviswidget fa fa-trash Use a icon in the widgets header (see icons section for all list of icons).
data-widget-togglebutton .jarviswidget false Prevent a widget from having a toggle button (can only be used with the value 'false').
data-widget-deletebutton .jarviswidget false Prevent a widget from having a delete button (can only be used with the value 'false').
data-widget-editbutton .jarviswidget false Prevent a widget from having a edit button (can only be used with the value 'false').
data-widget-fullscreenbutton .jarviswidget false Prevent a widget from having a fullscreen button (can only be used with the value 'false').
data-widget-load .jarviswidget widget-ajax.php The file that is loaded with ajax.
data-widget-refresh .jarviswidget 10 Seconds to refresh a ajax file (see 'data-widget-load').
data-widget-refreshbutton .jarviswidget false Prevent a ajax widget from showing a refresh button (can only be used with the value 'false').
data-widget-hidden .jarviswidget true Hide a widget at load (can only be used with the value 'true').
data-widget-colorbutton .jarviswidget false This is active by default, set it to false to hide.
data-widget-collapsed .jarviswidget false Collapse a widget upon load (can only be used with the value 'true'). This will allways be collapsed every page load.
data-widget-grid article false You can exclude grids from being a sortable/droppable area, this means that all widgets in this area will work, but cant be sortable/droppable and that all other widgets cant be dropped in this area. Add this attribute (can only be used with the value 'false') to a grid element.
.no-padding .widget-body n/a Removes all padding inside widget body
.well .jarviswidget n/a Converts a widget to a well

You will see lots more example if you visit the Smart Widgets page from the SmartAdmin menu:

Don't be afraid to dig into app.config.js!!

I know a lot of you are afraid to dig in and change variables and move codes around. I have designed app.config.js to be very user friendly, left helpful comments, hints and notes - please feel free to dig around. :)

 
Please use the following index in reference to app.js file:
 
  1. APP CONFIGURATION [ app.config.js ]
  2. APP DOM REFERENCES [ app.config.js ]
  3. DETECT MOBILE DEVICES [line: 149 ]
  4. CUSTOM MENU PLUGIN [line: 688 ]
  5. ELEMENT EXIST OR NOT [line: 778
  6. INITIALIZE FORMS [line: 788 ]
  7. BOOTSTRAP SLIDER PLUGIN [line: 794 ]
  8. SELECT2 PLUGIN [line: 803 ]
  9. MASKING [line: 824 ]
  10. AUTOCOMPLETE [line: 843 ]
  11. JQUERY UI DATE [line: 862 ]
  12. AJAX BUTTON LOADING TEXT [line: 884 ]
  13. INITIALIZE CHARTS [line: 902 ]
  14. SPARKLINES [line: 907 ]
  15. LINE CHART [line: 1026]
  16. PIE CHART [line: 1077]
  17. BOX PLOT [line: 1100]
  18. BULLET [line: 1145]
  19. DISCRETE [line: 1169]
  20. TRISTATE [line: 1195]
  21. COMPOSITE: BAR [line: 1223]
  22. COMPOSITE: LINE [line: 1259]
  23. EASY PIE CHARTS [line: 1339]
  24. INITIALIZE JARVIS WIDGETS [line: 1379]
  25. SETUP DESKTOP WIDGET [line: 1466]
  26. GOOGLE MAPS [line: 1478]
  27. LOAD SCRIPTS [line: 1500]
  28. APP AJAX REQUEST SETUP [line: 1538]
  29. CHECK TO SEE IF URL EXISTS [line: 1614]
  30. LOAD AJAX PAGES [line: 1669]
  31. UPDATE BREADCRUMB [line: 1775]
  32. PAGE SETUP [line: 1798]
  33. POP OVER THEORY [line: 1852]
 
The function call "pageSetUp()" that apepars at the bottom of all AJAX pages:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/*
 * PAGE SETUP
 * Description: fire certain scripts that run through the page
 * to check for form elements, tooltip activation, popovers, etc...
 */
function pageSetUp() {

    if (thisDevice === "desktop") {
        // is desktop

        // activate tooltips
        $("[rel=tooltip], [data-rel=tooltip]").tooltip();

        // activate popovers
        $("[rel=popover], [data-rel=popover]").popover();

        // activate popovers with hover states
        $("[rel=popover-hover], [data-rel=popover-hover]").popover({
            trigger: "hover"
        });

        // setup widgets
        setup_widgets_desktop();

        // activate inline charts
        runAllCharts();

        // run form elements
        runAllForms();

    } else {

        // is mobile

        // activate popovers
        $("[rel=popover], [data-rel=popover]").popover();

        // activate popovers with hover states
        $("[rel=popover-hover], [data-rel=popover-hover]").popover({
            trigger: "hover"
        });

        // activate inline charts
        runAllCharts();

        // setup widgets
        setup_widgets_mobile();

        // run form elements
        runAllForms();

    }

}
/* ~ END: PAGE SETUP */

You will find the SmartAdmin LESS files under the COMMON_ASSETS folder located inside the Developer Folder. You will also find the Email templates here. 

Upgrading manually: Please note, when you plan to upgrade manually, for example upgrading bootstrap 3.1 to 3.1.2, you will need to place the new folder inside the 'less' folder, open 'bootstrap.less' to change the new file/path references, and finally open 'variables.less' to upgrade any new variables that they may have introduced. 

Compile Instructions

To generate your CSS file from these LESS files. Download winLess from going to http://winless.org/ (for windows) and mac users can go to (http://incident57.com/less/) - they are both small apps/programs. 
 
Once installed load up and drop in the less folder to the 'Less Files' zone. Deselect all pre-selected LESS files and only select "smartadmin-production.less" or "bootstrap.less" - depending on what CSS file you wish to generate. This will rely on the variables of variables.less file to custom cut and fit your CSS file.
 
Hit compile and it should automatically create a minified CSS file!
 
You can also use Prepros, another alternative LESS compiler with greater CSS compression!
Download link: http://alphapixels.com/prepros/ 

SmartAdmin introduced SASS files with version 1.4.1. All SASS files were contributed by Juha Kela <juha.kela@ltronic.fi> and  were configured to Compass by Alexandre Azevedo <alexndreazevedo@gmail.com>

You can make your own contributions by emailing support@myorange.ca.

You will find the SASS files inside the COMMON_ASSETS folder:

SmartAdmin comes with a wide variety of email compatible templates that are easy to use and integrate. If you have very basis needs then the basic email template will suit you just fine. Or if you wish to create a stylish newsletter you can do so by choosing the relevant template. Customize an existing template to make it your own and give it the look and feel that best matches your desire.

You can include any of the following features in your email template:

Last but not least, the newsletter format combines all of the above and includes a blog like summary of highlights you wish to present to your customers!

Note: These email templates are not responsive, this is to ensure that they display well across a multitude of display devices as well as most if not all browsers and or email applications. Be sure to test your template with your intended audience before activating the template!

 

You requested it, we made it!

SmartAdmin 1.5 contains the all new Landing Page template! This easy-to-use and navigate layout provides you with a sleek and crisp way to introduce your targetted audience with your product or service. They'll love it!

Fully customizable and configurable, using the basic framework you all know and trust. This single page presentation will surely leave your vistors wanting for more.

The following pages are available within the landing page layout:

SmartAdmin comes with built in unique themes! You can easily change the theme by selecting the Layout options or by hardcoding the theme name to the <body> and <html> tag.

Smart Default

<body class="smart-style-0">...</body> 

 

Dark Elegance

<body class="smart-style-1">...</body> 

 

Ultra White

<body class="smart-style-2">...</body> 

 

Google Skin (google analytics)

<body class="smart-style-3">...</body> 

 

PixelSmash

<body class="smart-style-4">...</body> 

 

Glass 

<body class="smart-style-5">...</body> 

Recently introduced with version 1.5. This theme is still in beta, there might still be a few elements that need to be re-touched but overall this theme allows you to customize the backdrop and create a whole new experience!

You can create your own skins by changing the LESS variables. See the LESS Settings section of this documentation for more details


enlightened Looking for more SmartAdmin Skins and Addons?

Head over to smartadminstore.com

 

RTL support has been a long outstanding request from the SmartAdmin community and with version 1.5 we were finally able to make the necessary push to enable complete support for this much coveted reading mode.

 

All aspects of the template will be switched over to RTL mode, however since the template itself is still English, enabling RTL will generally not make much sense until you add a RTL enabled language to the site.

To enable the RTL feature manually, make sure you include the file smartadmin-rtl.min.css to your project and add the class "smart-rtl" to your <body> tag

With SmartAdmin comes data-attribute support for quick to use configuration and setting options. To use any of these, just insert the following "data-action=[action_name]" to any HTML element in order to utilize the desired function.

data-action="userLogout" Logout message popup, use it with data-logout-msg = "..."
data-action="resetWidgets" Resets all localStorage (restores all app settings and widgets)
data-action="launchFullscreen" Launch full screen view (works only in Chrome, Safari, Firefox and Latest IE)
data-action="minifyMenu" Minify main nav (works only with vertical menu case)
data-action="toggleMenu" Collapse left menu (but still accessable by hovering left edge of screen)
data-action="toggleShortcut" Top slidedown / Metro menu toggle

Note: Various plugins will also add support for their own attributes that will change the bahavior of them, read more about these possible features in the documentation of each respective plugin!

SmartAdmin has a built in animation core system (built by Danial Eden), it uses the "animation.less" file to generate almost all kinds of animations which can be applied to various HTML objects within your project by simply adding classes to the container element of choice.

Proper Usage:

<div class="animated bounceIn>...</div>

Speed up the animation by adding the class "fast", for example... 

<div class="animated bounceIn fast"> ... </div>

List of possible animation types:

Attention Seekers

Bouncing Entrances

Bouncing Exists

Fading Entrances
Fading Exits
Flippers
Lightspeed
Rotating Entrances
Rotating Exits
Sliders
Specials
 

Introducing: Voice Command 1.1

Warning: Currently only the latest versions of Chrome support this feature.
 
Once you activate Voice Command you will receive a security prompt that will ask you to grant access to your microphone (if you have one installed); otherwise you will see the button turn red and display the warning message below:
 
 
 
Once you allow the access to your microphone and activate Voice Command. You will notice a BLUE Flash on the microphone icon indicating activation. 
 
The figure below shows a successful initiation of voice command. Notice the button turns blue and is flashing with sound wave animation.

As a security precaution, your browser will disconnect the microphone every 60 to 120 seconds (sooner if not being used). In which case Voice Command will prompt you again to "Allow" or "Deny" access to your microphone. 

If you host your page over https (secure socket layer) protocol you can wave this security measure and have an unintrupted Voice Command. 

Voice Command Shortcuts:

  • 'show' then say the *page* you want to go to. For example "show inbox" or "show calendar"
  • 'mute' - mutes all sound effects for the theme.
  • 'sound on' - unmutes all sound effects for the theme.
  • 'stop' - deactivates voice command.
  • 'help' - brings up the command list
  • 'got it' - closes help modal
  • 'hide navigation' - toggle navigation collapse
  • 'show navigation' - toggle navigation to open (can be used again to close)
  • 'scroll up' - scrolls to the top of the page
  • 'scroll down' - scrollts to the bottom of the page
  • 'go back' - goes back in history (history -1 click)
  • 'logout' - logs you out

Adding your own voice command:

Adding your own custom commands is extreamly simple. Voice Command supports over 50 languages (please see app.config.js file for the list of supporting languages and all commands)

A sample command could look like this:



  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
/*
 * VOICE COMMAND CONFIG
 * dependency: js/speech/voicecommand.js
 */
	voice_command = true,
/*
 * Turns on speech as soon as the page is loaded
 */	
	voice_command_auto = false,
/*
 * 	Sets the language to the default 'en-US'. (supports over 50 languages 
 * 	by google)
 * 
 *  Afrikaans         ['af-ZA']
 *  Bahasa Indonesia  ['id-ID']
 *  Bahasa Melayu     ['ms-MY']
 *  Català            ['ca-ES']
 *  Čeština           ['cs-CZ']
 *  Deutsch           ['de-DE']
 *  English           ['en-AU', 'Australia']
 *                    ['en-CA', 'Canada']
 *                    ['en-IN', 'India']
 *                    ['en-NZ', 'New Zealand']
 *                    ['en-ZA', 'South Africa']
 *                    ['en-GB', 'United Kingdom']
 *                    ['en-US', 'United States']
 *  Español           ['es-AR', 'Argentina']
 *                    ['es-BO', 'Bolivia']
 *                    ['es-CL', 'Chile']
 *                    ['es-CO', 'Colombia']
 *                    ['es-CR', 'Costa Rica']
 *                    ['es-EC', 'Ecuador']
 *                    ['es-SV', 'El Salvador']
 *                    ['es-ES', 'España']
 *                    ['es-US', 'Estados Unidos']
 *                    ['es-GT', 'Guatemala']
 *                    ['es-HN', 'Honduras']
 *                    ['es-MX', 'México']
 *                    ['es-NI', 'Nicaragua']
 *                    ['es-PA', 'Panamá']
 *                    ['es-PY', 'Paraguay']
 *                    ['es-PE', 'Perú']
 *                    ['es-PR', 'Puerto Rico']
 *                    ['es-DO', 'República Dominicana']
 *                    ['es-UY', 'Uruguay']
 *                    ['es-VE', 'Venezuela']
 *  Euskara           ['eu-ES']
 *  Français          ['fr-FR']
 *  Galego            ['gl-ES']
 *  Hrvatski          ['hr_HR']
 *  IsiZulu           ['zu-ZA']
 *  Íslenska          ['is-IS']
 *  Italiano          ['it-IT', 'Italia']
 *                    ['it-CH', 'Svizzera']
 *  Magyar            ['hu-HU']
 *  Nederlands        ['nl-NL']
 *  Norsk bokmål      ['nb-NO']
 *  Polski            ['pl-PL']
 *  Português         ['pt-BR', 'Brasil']
 *                    ['pt-PT', 'Portugal']
 *  Română            ['ro-RO']
 *  Slovenčina        ['sk-SK']
 *  Suomi             ['fi-FI']
 *  Svenska           ['sv-SE']
 *  Türkçe            ['tr-TR']
 *  български         ['bg-BG']
 *  Pусский           ['ru-RU']
 *  Српски            ['sr-RS']
 *  한국어          ['ko-KR']
 *  中文                            ['cmn-Hans-CN', '普通话 (中国大陆)']
 *                    ['cmn-Hans-HK', '普通话 (香港)']
 *                    ['cmn-Hant-TW', '中文 (台灣)']
 *                    ['yue-Hant-HK', '粵語 (香港)']
 *  日本語                         ['ja-JP']
 *  Lingua latīna     ['la']
 */
	voice_command_lang = 'en-US',
/*
 * 	Use localstorage to remember on/off (best used with HTML Version
 * 	when going from one page to the next)
 */	
	voice_localStorage = false;
/*
 * Voice Commands
 * Defines voice command variables and functions
 */	
 	if (voice_command) {
	 		
		var commands = {
					
			'show dashboard' : function() { $('nav a[href="ajax/dashboard.html"]').trigger("click"); },
			'show inbox' : function() { $('nav a[href="ajax/inbox.html"]').trigger("click"); },
			'show graphs' : function() { $('nav a[href="ajax/flot.html"]').trigger("click"); },
			'show flotchart' : function() { $('nav a[href="ajax/flot.html"]').trigger("click"); },
			'show morris chart' : function() { $('nav a[href="ajax/morris.html"]').trigger("click"); },
			'show inline chart' : function() { $('nav a[href="ajax/inline-charts.html"]').trigger("click"); },
			'show dygraphs' : function() { $('nav a[href="ajax/dygraphs.html"]').trigger("click"); },
			'show tables' : function() { $('nav a[href="ajax/table.html"]').trigger("click"); },
			'show data table' : function() { $('nav a[href="ajax/datatables.html"]').trigger("click"); },
			'show jquery grid' : function() { $('nav a[href="ajax/jqgrid.html"]').trigger("click"); },
			'show form' : function() { $('nav a[href="ajax/form-elements.html"]').trigger("click"); },
			'show form layouts' : function() { $('nav a[href="ajax/form-templates.html"]').trigger("click"); },
			'show form validation' : function() { $('nav a[href="ajax/validation.html"]').trigger("click"); },
			'show form elements' : function() { $('nav a[href="ajax/bootstrap-forms.html"]').trigger("click"); },
			'show form plugins' : function() { $('nav a[href="ajax/plugins.html"]').trigger("click"); },
			'show form wizards' : function() { $('nav a[href="ajax/wizards.html"]').trigger("click"); },
			'show bootstrap editor' : function() { $('nav a[href="ajax/other-editors.html"]').trigger("click"); },
			'show dropzone' : function() { $('nav a[href="ajax/dropzone.html"]').trigger("click"); },
			'show image cropping' : function() { $('nav a[href="ajax/image-editor.html"]').trigger("click"); },
			'show general elements' : function() { $('nav a[href="ajax/general-elements.html"]').trigger("click"); },
			'show buttons' : function() { $('nav a[href="ajax/buttons.html"]').trigger("click"); },
			'show fontawesome' : function() { $('nav a[href="ajax/fa.html"]').trigger("click"); },
			'show glyph icons' : function() { $('nav a[href="ajax/glyph.html"]').trigger("click"); },
			'show flags' : function() { $('nav a[href="ajax/flags.html"]').trigger("click"); },
			'show grid' : function() { $('nav a[href="ajax/grid.html"]').trigger("click"); },
			'show tree view' : function() { $('nav a[href="ajax/treeview.html"]').trigger("click"); },
			'show nestable lists' : function() { $('nav a[href="ajax/nestable-list.html"]').trigger("click"); },
			'show jquery U I' : function() { $('nav a[href="ajax/jqui.html"]').trigger("click"); },
			'show typography' : function() { $('nav a[href="ajax/typography.html"]').trigger("click"); },
			'show calendar' : function() { $('nav a[href="ajax/calendar.html"]').trigger("click"); },
			'show widgets' : function() { $('nav a[href="ajax/widgets.html"]').trigger("click"); },
			'show gallery' : function() { $('nav a[href="ajax/gallery.html"]').trigger("click"); },
			'show maps' : function() { $('nav a[href="ajax/gmap-xml.html"]').trigger("click"); },
			'show pricing tables' : function() { $('nav a[href="ajax/pricing-table.html"]').trigger("click"); },
			'show invoice' : function() { $('nav a[href="ajax/invoice.html"]').trigger("click"); },
			'show search' : function() { $('nav a[href="ajax/search.html"]').trigger("click"); },
			'go back' :  function() { history.back(1); }, 
			'scroll up' : function () { $('html, body').animate({ scrollTop: 0 }, 100); },
			'scroll down' : function () { $('html, body').animate({ scrollTop: $(document).height() }, 100);},
			'hide navigation' : function() { 
				if ($.root_.hasClass("container") && !$.root_.hasClass("menu-on-top")){
					$('span.minifyme').trigger("click");
				} else {
					$('#hide-menu > span > a').trigger("click"); 
				}
			},
			'show navigation' : function() { 
				if ($.root_.hasClass("container") && !$.root_.hasClass("menu-on-top")){
					$('span.minifyme').trigger("click");
				} else {
					$('#hide-menu > span > a').trigger("click"); 
				}
			},
			'mute' : function() {
				$.sound_on = false;
				$.smallBox({
					title : "MUTE",
					content : "All sounds have been muted!",
					color : "#a90329",
					timeout: 4000,
					icon : "fa fa-volume-off"
				});
			},
			'sound on' : function() {
				$.sound_on = true;
				$.speechApp.playConfirmation();
				$.smallBox({
					title : "UNMUTE",
					content : "All sounds have been turned on!",
					color : "#40ac2b",
					sound_file: 'voice_alert',
					timeout: 5000,
					icon : "fa fa-volume-up"
				});
			},
			'stop' : function() {
				smartSpeechRecognition.abort();
				$.root_.removeClass("voice-command-active");
				$.smallBox({
					title : "VOICE COMMAND OFF",
					content : "Your voice commands has been successfully turned off. Click on the <i class='fa fa-microphone fa-lg fa-fw'></i> icon to turn it back on.",
					color : "#40ac2b",
					sound_file: 'voice_off',
					timeout: 8000,
					icon : "fa fa-microphone-slash"
				});
				if ($('#speech-btn .popover').is(':visible')) {
					$('#speech-btn .popover').fadeOut(250);
				}
			},
			'help' : function() {
				$('#voiceModal').removeData('modal').modal( { remote: "ajax/modal-content/modal-voicecommand.html", show: true } );
				if ($('#speech-btn .popover').is(':visible')) {
					$('#speech-btn .popover').fadeOut(250);
				}
			},		
			'got it' : function() {
				$('#voiceModal').modal('hide');
			},	
			'logout' : function() {
				$.speechApp.stop();
				window.location = $('#logout > span > a').attr("href");
			}
		}; 
		
	};
/*
 * END APP.CONFIG
 */ 

Below is the list of ALL plugins (with the exception of bootstrap.js, jQuery.js and jQueryUI) used by SmartAdmin Template.
Licenses below are subject to the license type you own for SmartAdmin

Besides the JS plugins and the included AngularJS directives, all PHP class libs such as the: class.smartui.php, class.smartui-accordion.php, class.smartui-carousel.php, class.smartui-wizard.php, class.smartui-smartform.php, class.smartui-button.php, class.smartui-tab.php, class.smartui-widget.php, class.smartui-datatable.php, and class.smartutil.php are subject to the licensing rights to that of the JS plugins above.

www.smartadminsupport.com

Be sure to check out our support forum!

 

 

Please be sure to read our forum guidelines before posting any questions!

Q: Can I turn off the responsiveness of the theme?

Responsiveness is built-in to the theme core CSS and bootstrap Core CSS by default. You will not be able to turn off responsive layout without changing a huge portion of the bootstrap CSS core and is generally not recommended.

Q: JarvisWidgets do not change title after I save it, what is going on?

Please remember, jarviswidget uses localStorage to store its location, color and title. You must reset the localStorage if you hardcode the title of the widget.

Q: The demo version of SmartAdmin keeps crashing on my mobile device.

This is perfectly normal and in some cases expected. The demo version of SmartAdmin is built heavily with javascript and was configured in such a way to show its full power, ideally through a desktop. When you create your webapps for mobile, you will not be using so many components at once.

Q: How do I post variables when using the AJAX version?

We added a param URL for the search function that will search for the param text string which you can catch and parse, for example:

<form action="#ajax/search.html" class="header-search pull-right">
  <input type="text" name="param" placeholder="Find reports and more" id="search-fld" /> 
  <button type="submit">Search</button>
</form>

This will put the a "param" text string to the URL:

smartadmin/?param=my+search+word#ajax/search.html

Q: Some of my graphs do not render when the div/container is hidden

This is a bug related to morris charts and sparkline charts, and not part of SmartAdmin. Morris and sparkline chart cannot render the graphs if the div element containing the graph is hidden in intial load. There might be ways around this but you will need to hack a lot of code, which is genereally not recommend. Best option for such a scenario would be to go with flot.js charts

Q Is there any custom CSS classes that can be used for margins and absolute positions?

Of course! Here are a list of custom CSS classes you can use:

/*
 * Forced text alignments
 */
.text-align-center,.text-center {
    text-align: center !important;
}

.text-align-left,.text-left {
    text-align: left !important;
}

.text-align-right,.text-right {
    text-align: right !important;
}

/*
 * Font Weights
 */
.semi-bold {
    font-weight: 400 !important;
}

.ultra-light {
    font-weight: 300 !important;
}

/*
 * Font Sizes
 */
.font-xs {
    font-size: 85% !important;
}

.font-sm {
    font-size: 95% !important;
}

.font-md {
    font-size: 130% !important;
}

.font-lg {
    font-size: 160% !important;
}

.font-xl {
    font-size: 200% !important;
}

.font-400 {
    font-size: 400% !important;
}

/*
 * Center Canvas
 */
.center-canvas,.center-child-canvas > canvas {
    display: block !important;
    margin: 0 auto !important;
}

/*
 * Margins
 */

.no-margin {
    margin: 0 !important;
}

.margin-top-5 {
    margin-top: 5px !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-bottom-5 {
    margin-bottom: 5px !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-right-5 {
    margin-right: 5px !important;
}

/*
 * No border
 */
.no-border,.well[class*=" bg-"].no-border {
    border-width: 0 !important;
}

.no-border-transparent {
    border-color: transparent !important;
}

.no-border-radius {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

/*
 * Inlines
 */
.display-inline {
    display: inline-block !important;
}

.display-normal {
    display: inline !important;
}

/*
 * Images
 */
.hover-transparent {
    opacity: .5;
}

.hover-transparent:hover {
    opacity: 1;
}

/*
 * JUST A BORDER 
 */
.bordered {
    border: 1px solid rgba(0,0,0,.2);
}

.bordered:hover {
    border: 1px solid rgba(0,0,0,.4);
}

/*
 * CURSORS
 */
.cursor-pointer {
    cursor: pointer;
}
You can also use custom padding
.padding-5 {
    padding: 5px !important;
}

.padding-7 {
    padding: 7px !important;
}

.padding-10 {
    padding: 10px !important;
}

.padding-top-10 {
    padding-top: 10px !important;
}

.padding-bottom-10 {
    padding-bottom: 10px !important;
}
Q: Do you have plans to release this in IE8 version? 

At the moment, no we do not, but there should be ways to convert the pure HTML_version to IE8 format using respond.js and various plugins and hacks. We simply cannot gaurantee this, but in theoriy it should be doable.

What we actually support...

Please understand that we produce 'Front-End' templates to help you save time and speed up your project. We do not offer tutorials on "how to implement" or offer support for plugin customization.

Rules for support ticket:
Important! For faster responses please make sure you tick-off the following before creating your thread:
  1. You have gone through the documentation and was unable to find a solution
  2. You have not changed the physical / DOM structure of the template
  3. You have not included additional scripts that maybe conflicting with the theme plugins
  4. You have uploaded your scenario to a server for me to see and debug the issue (screenshots MUST be provided if it is a visual related issue)
  5. You MUST provide your product license ID and the date you found this bug
  6. You MUST provide the version of SmartAdmin you are using (HTML, AJAX, PHP or AngularJS)
  7. You MUST provide your screen resolution, your browser version and your OS
  8. Please note I do not provide extended support for third party plugins (combining two or more plugins to achieve certain result)
  9. I treat all my customers equally, if I didn't respond to your email, most likely you are still in que and I did not get to you yet ^_^

All support tickets must be emailed to support@myorange.ca

We do not recommend upgrading from < 1.4.1 to 1.5 unless you are very familiar with SmartAdmin itself and HTML/CSS/jQuery. As with any product, it evolves over time and so has SmartAdmin, all though we try our very best not to break backwards compatibilty, sometimes for the sake of future adjustments and improvements we have no choice; we all make mistakes.

If you need to upgrade from a version prior to 1.4.1 then simply upgrade your version in order, i.e. 1.4 => 1.4.1 => 1.5. This will lead to less frustrations and an overall better experience in upgrading your existing project.

Upgrading from version 1.4.1 to 1.5

  1. Updating HTML and AJAX versions
    • Copy and replace the CSS folder with latest (please note that we added a new css file by splitting the production css into two files)
    • Replace the previous JS folder with latest (if you made changes to your app.config.js, you may need to preserve the change and using file compare bring in the new changes from the new app.config.js file)
    • If you want to utilize the pageDestroy() function for AJAX version you must look at the examples in some of the pages (eg. dashboard.html) and follow the new scripts - this is not a must but needed to free up memory for your app
       
  2. Updating PHP version
    • Follow steps 1.1 and 1.2 (from above)
    • Copy over the SmartUI Classes (these classes now use the latest version of php 5.5)
       
  3. Updating AngularJS version
    • No upgrade path exists since this is a complete rewrite of this version
    • Our appologies if this causes you a lot of extra and/or additional work

Upgrading from version 1.4 to version 1.4.1

  1. Update app.min.js with new
  2. Add the new JS file "app.config.js" (place it after jquery-ui library call)
  3. Update js/plugins, js/smartwidgets, and js/notifications folders
  4. If you plan to use voice command copy the new DOM element #speech-btn and add the plugin speech/voicecommand.min.js after app.js 
  5. For PHP Users, please update class.smartutil.php

Upgrading from version 1.3 to version 1.4

There were significant number of improvements made to version 1.4

  1. Removed ID #project-context and replace with class .project-context
  2. The function "nav_page_height()" has been made redundant, you can remove this function wherever you used them before
  3. Add the data attribute  data-action="resetWidgets"  to #ribbon > span > #refresh
  4. Add the data attribute data-action="toggleMenu" #hide-menu > span > a
  5. Add the data attribute data-action="userLogout" #logout > span > a
  6. Add the data attribute data-action="launchFullscreen" #fullscreen > span > a
  7. Add the data attribute data-action="toggleShortcut" #show-shortcut
  8. Add the data attribute data-action="minifyMenu" span.minifyme
  9. Replace the old JS folder and everything in it with the new JSfolder of version 1.4
  10. Replace the CSS folder and everything in it with the new CSS folder of version 1.4
  11. Add the new image files and folders to your current img folder
  12. OPTIONAL: To save memory for AJAX version we have moved all functions to be called inside var pagefunction = function() function. You may feel the need to update to this methodology, but you don't have to. 
Upgrading from version 1.2 to version 1.3:

There are no particular DOM changes to look for, you will simply copy and paste all files and folders relating to plugins, app.js, and CSS files over to your project and it should adap to the new changes wihtout any further effort.

For the full list please visit: http://bootstraphunter.com/smartadmin/BUGTRACK/track_/
 

Patch 1.5.2 (17/11/2014)

  • Updated copyright information and legal notice 
  • Fix minor bugs in AngularJS version

 

Patch 1.5.1 (1/11/2014) 

  • Fixed AngularJS bugs
  • Fixed CSS issues
  • Added app.config.js for AngularJS version
  • Updated PHP_version (html) - fixed chat function
  • Updated Docs

 

Update 1.5 (1/11/2014) 

Patch 1.4.1 (1/07/2014)

 

Update 1.4 (10/06/2014)

  • Fixed loading cog for AJAX pages
  • Fixed all IE11 related bugs and compaibility issues 
  • Removed ID #project-context and replaced with class .project-context 
  • Fixed vertical scrolling issue for fixed left navigation 
  • The function "nav_page_height()" has been made redundant
  • Fixed the double scroll bar bug for bootstrap modals 
  • Fixed CSS issue with bg-color pasudo classes that was conflicting with tabs 
  • Resolved compatibility issue with HighCharts 
  • Fixed Fullscreen function for HTML Version
  • Fixed .NET MVC bug for form inputs 
  • Fixed IE11 glitch for checkURL in app.js (AJAX Version)
  • Scrollbar overlay in IE10 - this was happening due to bootstrap's @-ms-viewport { width: device-width; } which was initially intended for Windows 8 Metro. CSS has now been adjusted. IMPORTANT: Please note we have disabled this fix by default, to enable please edit "ie-fix.less" and recompile your CSS.
  • For AJAX version on mobile view, selecting the items from the top #shortcut does not auto hide the menu Solution: we have now added data-attributes which you can use to close the navigation 
  • Dygraphs integration 
  • jQgrid Integration
  • Upgrade to FontAwesome Library 4.1 
  • Upgrade Datatable plugin to v1.10 
  • Add Google Map custom pins with dynamic XML data (see google maps page and pins.xml) 
  • Add flags page (showing all the flags of the world with a easy copy and paste reusable code) 
  • Expand/Collapse table row
  • Added funtional data-attributes for Collapse Menu, Reset Widgets, User Logout, Toggle Shortcut, Minify Menu, and Full Screen Functions 
  • Localize files and assets with Grunt (Tasks include: minify CSS & JS files, compile LESS, concatinate JS files - more tasks can be added as required)  Note: We do not provide any tutorial to set this up grunt as there are many videos and tutorials readily available on the internet
  • Bootstrap modal content is now loaded dynamically for the AJAX version
  • Added page footer (options: fixed, static, disable footer)
  • Reduced page rendering time for mobile view by removing layout related javascripts and re-adjusting the CSS
  • Add PHP Version of SmartAdmin
  • Horizontal Navigation Option
  • Add AngularJS Version of SmartAdmin
  • Updated and organized LESS files and its structure
 

Update 1.3 (28/02/2014)

  • Upgrade to Bootstrap Framework 3.1.1
  • Added Documentation
  • Added 1 additional skin
  • Added pages: Profile page, Forum page, Timeline page, Forgot password page
  • Added Fullscreen function (does not support IE9)
  • Updated app.js to have url with query strings like the google search - available only for the ajax version
  • Added Splash screens and home screen icons for iDevices 
  • Slight DOM change was made to <div class="login-info">...</div>. CSS/LESS and CSS skins was updated accordingly. This was done to truncate long user names
  • Added additional bootstrap form elements (see the new section "Flexible Input fields with icons" inside the Bootstrap Form Elements page)
  • Added logout message localization handler using data-attribute
  • Define file path variable for sound files
  • Fixed various CSS bugs and memory leaks
  • Added Basic PHP_version (template) to get you started
 

Update 1.2 (13/1/2014)

 

Update 1.1 (1/1/2014)

 

Update 1.0