SmartPLC v1.5

Responsive WebApp (Reloaded)


Thank you for purchasing SmartPLC 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.

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

SmartPLC is exclusively sold at www.powerengineeringsrl.com; please make sure you save your license ID for support and future upgrades.

To re-download updates - please register/login to smartplc.it and go to attach orders page for the free download link. If you are having problems with the re-download, please contact wrapbootstrap support

SmartPLC 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) 

https://wrapbootstrap.com/support/download-resender

 

There is a SmartPLC 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 SmartPLC from Wrapbootstrap.com, 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 SmartPLC, 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. 

 


 

HTML version gives you the flexibility to select the platform of your desire. Features clean and pure HTML5 validated codes, with no loss of design or UI integrity from other verions. 
 
Over 56 HTML5 validated pages featuring rich and robust javascripts, CSS3 animations and custom plugins. Perfect for build an app from scratch. Whether you wish to build this in .Net, PHP, Django, Java or anyother platforms out there - the HTML version should be the ideal choise! 

Features (these features also transcends Ajax version, AngularJS version, PHP and .Net MVC versions)

 

You will find the following file structure for the NON-AJAX (HTML version)

 

The non-Ajax version of SmartPLC is pretty straight forward. Just treat it like any regular HTML template.

The navigation for the non-AJAX version works different compared to the AJAX version. In order to enable this behavior, we turned off the ajax call method by opening app.config.js and setting $.navAsAjax to false.

Note: Although the HTML_version is mostly pure HTML, some pages, like the Inbox and notification messages still use AJAX calls to load its content. Which means the template will need to be running from a server in order to work properly.

AJAX version uses robust scripts to lazyload pages, components and plugins - it acts a single page app. Never refresh your browser again! 
 
It's built to run smoothly in all devices. Highly recommended for small scale projects as it is easily manageable. Comes with a built in auto pageDestroy() function to destroy objects and take care of those nasty memory leaks!

Features 

This extendeds features from the HTML (non-ajax) version

File Structure

Heads up! If you decided to go with AJAX version, you will need to host your site on a server to preview any of the pages. SmartPLC AJAX_version works differently than the HTML_version. For starters, the navigation system relies on #hashtag in URL's to load the AJAX pages, additional scripts related to the page are also loaded through AJAX.

Note: Most of the pages are located in the AJAX folder.

Open "ajax" folder and you will notice all the pages here have no styles or direct links to plugins. In fact if you try to open any of the pages in your browser they will not display properly. These are AJAX pages, these pages get pulled in via the app.js and render inside the #content div of the index.html file.

To explain better how these pages work, lets open the blank_.html file using your favorite HTML editor:


  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
<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">
    <!-- col -->
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark"><!-- PAGE HEADER -->
         Page Header <span>&gt; Subtitle</span></h1>
    </div><!-- end col -->
    <!-- right side of the page with the sparkline graphs -->
    <!-- col -->
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <!-- sparks -->
        <ul id="sparks">
            [SPARKLINE]
        </ul><!-- end sparks -->
    </div><!-- end col -->
</div><!-- end row -->

<!-- widget grid -->
<section class="" id="widget-grid">
    <!-- row -->
    <div class="row">
        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            [WIDGET]
        </article><!-- WIDGET END -->
    </div><!-- end row -->
    <!-- row -->

    <div class="row">
        <!-- a blank row to get started -->
        <div class="col-sm-12">
            <!-- your contents here -->
        </div>    
    </div><!-- end row -->

</section><!-- end widget grid -->
<script type="text/javascript">
	
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();
	
	/*
	 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
	 * eg alert("my home function");
	 * 
	 * var pagefunction = function() {
	 *   ...
	 * }
	 * loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
	 * 
	 * TO LOAD A SCRIPT:
	 * var pagefunction = function (){ 
	 *  loadScript(".../plugin.js", run_after_loaded);	
	 * }
	 * 
	 * OR you can load chain scripts by doing
	 * 
	 * loadScript(".../plugin.js", function(){
	 * 	 loadScript("../plugin.js", function(){
	 * 	   ...
	 *   })
	 * });
	 */
	
	// pagefunction
	
	var pagefunction = function() {
		// clears the variable if left blank
	};
	
	// end pagefunction

	// destroy generated instances 
	// pagedestroy is called automatically before loading a new page
	// only usable in AJAX version!

	var pagedestroy = function(){
		
		/*
		Example below:

		$("#calednar").fullCalendar( 'destroy' );
		if (debugState){
			root.console.log("✔ Calendar destroyed");
		} 

		For common instances, such as Jarviswidgets, Google maps, and Datatables, are automatically destroyed through the app.js loadURL mechanic

		*/
	}

	// end destroy
	
	// run pagefunction
	pagefunction();
	
</script>

Notice how the page has a "pageSetUp();" function at the bottom of the page, this is present in all AJAX pages. This function call is necessary to generate the graphs, popovers, tooltips, form elements and most importantly the page height. 
 
Note: In order to set up and view your SmartPLC AJAX pages you will need to grab the entire AJAX_version folder and upload it to your server (or localhost) and then request index.html to view it.

Ajax Nav

app.js will make a call using the ajax function and load the the content of the pages and places it insde the <div id="container"> element. To view how this works, let's look at the SmartPLC main navigation link structure:

Notice that the links inside the main nav do not have the hash tag # 
The hash tag is added automatically for all main nav links

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<ul>
    <li class=""><a href="ajax/dashboard.html" title=
    "Dashboard"><span class="menu-item-parent">Dashboard</span></a></li>
    <li><a href="ajax/inbox.html"><span class="menu-item-parent">Inbox</span><span class="badge pull-right inbox-badge">14</span></a></li>
    <li>
        <a href="#"><span class="menu-item-parent">Graphs</span></a>
        <ul>
            <li><a href="ajax/flot.html">Flot Chart</a></li>
            <li><a href="ajax/morris.html">Morris Charts</a></li>
            <li><a href="ajax/inline-charts.html">Inline Charts</a></li>
        </ul>
    </li>
</ul>

The following function in app.js will sort out the links using the following code:


 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
$(document).on('click', 'nav a[href!="#"]', function(e) {
    e.preventDefault();
    var $this = $(e.currentTarget);
    // if parent is not active then get hash, or else page is assumed to be loaded
    if (!$this.parent().hasClass("active") && !$this.attr('target')) {
        // update window with hash
        // you could also do here:  thisDevice === "mobile" - and save a little more memory
        if ($.root_.hasClass('mobile-view-activated')) {
            $.root_.removeClass('hidden-menu');
            $('html').removeClass("hidden-menu-mobile-lock");
            window.setTimeout(function() {
                if (window.location.search) {
                    window.location.href = window.location.href
                        .replace(window.location.search, '').replace(
                            window.location.hash, '') + '#' +
                        $this.attr('href');
                } else {
                    window.location.hash = $this.attr('href');
                }
            }, 150);
            // it may not need this delay...
        } else {
            if (window.location.search) {
                window.location.href = window.location.href.replace(
                    window.location.search, '').replace(window.location
                    .hash, '') + '#' + $this.attr('href');
            } else {
                window.location.hash = $this.attr('href');
            }
        }
        // clear DOM reference
        // $this = null;
    }
});

Notice that we add #hashtag for every URL clicked from inside the navigation, this allows us to pass and load the URL without actually refreshing the page. We then use the checkURL() function to parse the URL value and load the requested page:

 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
/*
 * CHECK TO SEE IF URL EXISTS
 */
function checkURL() {
    //get the url by removing the hash
    //var url = location.hash.replace(/^#/, '');
    var url = location.href.split('#').splice(1).join('#');
    //BEGIN: IE11 Work Around
    if (!url) {
        try {
            var documentUrl = window.document.URL;
            if (documentUrl) {
                if (documentUrl.indexOf('#', 0) > 0 && documentUrl.indexOf(
                    '#', 0) < (documentUrl.length + 1)) {
                    url = documentUrl.substring(documentUrl.indexOf('#', 0) +
                        1);
                }
            }
        } catch (err) {}
    }
    //END: IE11 Work Around
    container = $('#content');
    // Do this if url exists (for page refresh, etc...)
    if (url) {
        // remove all active class
        $('nav li.active').removeClass("active");
        // match the url and add the active class
        $('nav li:has(a[href="' + url + '"])').addClass("active");
        var title = ($('nav a[href="' + url + '"]').attr('title'));
        // change page title from global var
        document.title = (title || document.title);
        // debugState
        if (debugState) {
            root.console.log("Page title: %c " + document.title,
                debugStyle_green);
        }
        // parse url to jquery
        loadURL(url + location.search, container);
    } else {
        // grab the first URL from nav
        var $this = $('nav > ul > li:first-child > a[href!="#"]');
        //update hash
        window.location.hash = $this.attr('href');
        //clear dom reference
        $this = null;
    }
}

See how the page title is automatically generated and we pass the URL to the "loadURL()" function with the necessary container value. The function loadURL([url_value],[container_ID]) can be reused on any occasion. 

IMPORTANT: We have made recenty changes to the loadURL method, you can find the latest structure inside the app.js file

The loadURL function works as following:

  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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
/*
 * LOAD AJAX PAGES
 */
function loadURL(url, container) {
    // debugState
    if (debugState) {
        root.root.console.log("Loading URL: %c" + url, debugStyle);
    }
    $.ajax({
        type: "GET",
        url: url,
        dataType: 'html',
        cache: true, // (warning: setting it to false will cause a timestamp and will call the request twice)
        beforeSend: function() {
            //IE11 bug fix for googlemaps (delete all google map instances)
            //check if the page is ajax = true, has google map class and the container is #content
            if ($.navAsAjax && $(".google_maps")[0] && (
                container[0] == $("#content")[0])) {
                // target gmaps if any on page
                var collection = $(".google_maps"),
                    i = 0;
                // run for each	map
                collection.each(function() {
                    i++;
                    // get map id from class elements
                    var divDealerMap = document.getElementById(
                        this.id);
                    if (i == collection.length + 1) {
                        // "callback"
                    } else {
                        // destroy every map found
                        if (divDealerMap) divDealerMap.parentNode
                            .removeChild(divDealerMap);
                        // debugState
                        if (debugState) {
                            root.console.log(
                                "Destroying maps.........%c" +
                                this.id,
                                debugStyle_warning);
                        }
                    }
                });
                // debugState
                if (debugState) {
                    root.console.log(
                        "✔ Google map instances nuked!!!");
                }
            } //end fix
            // destroy all datatable instances
            if ($.navAsAjax && $('.dataTables_wrapper')[0] && (
                container[0] == $("#content")[0])) {
                var tables = $.fn.dataTable.fnTables(true);
                $(tables).each(function() {
                    if ($(this).find('.details-control')
                        .length != 0) {
                        $(this).find('*').addBack().off()
                            .remove();
                        $(this).dataTable().fnDestroy();
                    } else {
                        $(this).dataTable().fnDestroy();
                    }
                });
                // debugState
                if (debugState) {
                    root.console.log(
                        "✔ Datatable instances nuked!!!");
                }
            }
            // end destroy
            // pop intervals (destroys jarviswidget related intervals)
            if ($.navAsAjax && $.intervalArr.length > 0 && (
                    container[0] == $("#content")[0]) &&
                enableJarvisWidgets) {
                while ($.intervalArr.length > 0) clearInterval(
                    $.intervalArr.pop());
                // debugState
                if (debugState) {
                    root.console.log(
                        "✔ All JarvisWidget intervals cleared"
                    );
                }
            }
            // end pop intervals
            // destroy all widget instances
            if ($.navAsAjax && (container[0] == $("#content")[0]) &&
                enableJarvisWidgets && $("#widget-grid")[0]) {
                $("#widget-grid").jarvisWidgets('destroy');
                // debugState
                if (debugState) {
                    root.console.log(
                        "✔ JarvisWidgets destroyed");
                }
            }
            // end destroy all widgets 
            // cluster destroy: destroy other instances that could be on the page 
            // this runs a script in the current loaded page before fetching the new page
            if ($.navAsAjax && (container[0] == $("#content")[0])) {
                /*
                 * The following elements should be removed, if they have been created:
                 *
                 *	colorList
                 *	icon
                 *	picker
                 *	inline
                 *	And unbind events from elements:
                 *
                 *	icon
                 *	picker
                 *	inline
                 *	especially $(document).on('mousedown')
                 *	It will be much easier to add namespace to plugin events and then unbind using selected namespace.
                 *
                 *	See also:
                 *
                 *	http://f6design.com/journal/2012/05/06/a-jquery-plugin-boilerplate/
                 *	http://keith-wood.name/pluginFramework.html
                 */
                // this function is below the pagefunction for all pages that has instances
                if (typeof pagedestroy == 'function') {
                    try {
                        pagedestroy();
                        if (debugState) {
                            root.console.log("✔ Pagedestroy()");
                        }
                    } catch (err) {
                        pagedestroy = undefined;
                        if (debugState) {
                            root.console.log(
                                "! Pagedestroy() Catch Error"
                            );
                        }
                    }
                }
                // destroy all inline charts
                if ($.fn.sparkline && $("#content .sparkline")[
                    0]) {
                    $("#content .sparkline").sparkline(
                        'destroy');
                    if (debugState) {
                        root.console.log(
                            "✔ Sparkline Charts destroyed!"
                        );
                    }
                }
                if ($.fn.easyPieChart && $(
                    "#content .easy-pie-chart")[0]) {
                    $("#content .easy-pie-chart").easyPieChart(
                        'destroy');
                    if (debugState) {
                        root.console.log(
                            "✔ EasyPieChart Charts destroyed!"
                        );
                    }
                }
                // end destory all inline charts
                // destroy form controls: Datepicker, select2, autocomplete, mask, bootstrap slider
                if ($.fn.select2 && $("#content select.select2")[
                    0]) {
                    $("#content select.select2").select2(
                        'destroy');
                    if (debugState) {
                        root.console.log("✔ Select2 destroyed!");
                    }
                }
                if ($.fn.mask && $('#content [data-mask]')[0]) {
                    $('#content [data-mask]').unmask();
                    if (debugState) {
                        root.console.log(
                            "✔ Input Mask destroyed!");
                    }
                }
                if ($.fn.datepicker && $('#content .datepicker')[
                    0]) {
                    $('#content .datepicker').off();
                    $('#content .datepicker').remove();
                    if (debugState) {
                        root.console.log(
                            "✔ Datepicker destroyed!");
                    }
                }
                if ($.fn.slider && $('#content .slider')[0]) {
                    $('#content .slider').off();
                    $('#content .slider').remove();
                    if (debugState) {
                        root.console.log(
                            "✔ Bootstrap Slider destroyed!"
                        );
                    }
                }
                // end destroy form controls
            }
            // end cluster destroy
            // empty container and var to start garbage collection (frees memory)
            pagefunction = null;
            container.removeData().html("");
            // place cog
            container.html(
                '<h1 class="ajax-loading-animation"><i class="fa fa-cog fa-spin"></i> Loading...</h1>'
            );
            // Only draw breadcrumb if it is main content material
            if (container[0] == $("#content")[0]) {
                // clear everything else except these key DOM elements
                // we do this because sometime plugins will leave dynamic elements behind
                $('body').find('> *').filter(':not(' +
                    ignore_key_elms + ')').empty().remove();
                // draw breadcrumb
                drawBreadCrumb();
                // scroll up
                $("html").animate({
                    scrollTop: 0
                }, "fast");
            }
            // end if
        },
        success: function(data) {
            // dump data to container
            container.css({
                opacity: '0.0'
            }).html(data).delay(50).animate({
                opacity: '1.0'
            }, 300);
            // clear data var
            data = null;
            container = null;
        },
        error: function(xhr, status, thrownError, error) {
            container.html(
                '<h4 class="ajax-loading-error"><i class="fa fa-warning txt-color-orangeDark"></i> Error requesting <span class="txt-color-red">' +
                url + '</span>: ' + xhr.status +
                ' <span style="text-transform: capitalize;">' +
                thrownError + '</span></h4>');
        },
        async: true
    });
}

The breadcrumb is generated automatically - breadcrumb will not generate if the item does not exist in the main navigation and isn't marked with the active class (keep in mind the breadcrumb does not generate automatically for the HTML version of SmartAdmin unless you add the drawBreadCrumb() call after pageSetUp() yourself, but use this with care!)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// fire links with targets on different window

$(document).on('click', 'nav a[target="_blank"]', function(e) {
    e.preventDefault();
    $this = $(e.currentTarget);
    window.open($this.attr('href'));
});

// fire links with targets on same window
$(document).on('click', 'nav a[target="_top"]', function(e) {
    e.preventDefault();
    $this = $(e.currentTarget);
    window.location = ($this.attr('href'));
});

// all links with hash tags are ignored
$(document).on('click', 'nav a[href="#"]', function(e) {
    e.preventDefault();

});

You can also fire links from the main nav that opens in a blank page or in the parent page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// fire links with targets on different window
$(document).on('click', 'nav a[target="_blank"]', function(e) {
    e.preventDefault();
    $this = $(e.currentTarget);
    window.open($this.attr('href'));
});

// fire links with targets on same window
$(document).on('click', 'nav a[target="_top"]', function(e) {
    e.preventDefault();
    $this = $(e.currentTarget);
    window.location = ($this.attr('href'));
});

With a target value of if "_blank", the links will be fired in a different window, and with a target value of "_top", all links will be fired and replace the parent window. 

You can also load pages within the content by adding a hashtag in front of the URL for example 

<a href="#ajax/mypage.php"> load my page </a> // this will load the following content into the main container.

Loading Scripts via AJAX

SmartAdmin AJAX loads scripts dynamically and uses a lazy load method to accomplish this. The following function handles the AJAX load method call:

loadScript("js/my_lovely_script.js", loadCompleteFunction);

You can use this method to concatinate a chain of scripts such as:

loadScript("js/script1.js", loadScript_2);

function loadScript_2() {
    loadScript("js/script2.js", loadApp);
}

function loadApp() {
    loadScript("js/myapp.js", runApp);
}
The example above loads dependencies, such as script1.js then script2.js then loads myapp.js and runs a function called "runApp()"

The loadScript() function works as follows:

Note: If the script is loaded already, it will skip the current load request and goes to the next script in the chain

 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
var jsArray = {}; // keeps track of all loaded scripts

function loadScript(scriptName, callback) {
    if (!jsArray[scriptName]) {
        jsArray[scriptName] = true;
        // adding the script tag to the head as suggested before
        var body = document.getElementsByTagName('body')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = scriptName;

        // then bind the event to the callback function
        // there are several events for cross browser compatibility
        //script.onreadystatechange = callback;

        script.onload = callback;
        // fire the loading
        body.appendChild(script);

    } else if (callback) { // changed else to else if(callback)
        //console.log("JS file already added!");
        //execute function
        callback();
    }
}

Ajax post


1
2
3
4
5
6
<form action="#ajax/search.html">
   <input type="text" name="param" id="search-fld">
   <button type="submit">
     <i class="fa fa-search"></i>
   </button>
</form>

This will result the an URL key as follows:

smartadmin/?param=my_search_text#ajax/search.html

This can then later be extracted for form related operations and/or processing.

Ajax page setup (scripts in the bottom)

IMPORTANT! Notice that each AJAX page has a list of scripts that fires when the page is loaded. This is usually found at the bottom of each AJAX page

 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
<script type="text/javascript">
	
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();
	
	/*
	 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
	 * eg alert("my home function");
	 * 
	 * var pagefunction = function() {
	 *   ...
	 * }
	 * loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
	 * 
	 * TO LOAD A SCRIPT:
	 * var pagefunction = function (){ 
	 *  loadScript(".../plugin.js", run_after_loaded);	
	 * }
	 * 
	 * OR you can load chain scripts by doing
	 * 
	 * loadScript(".../plugin.js", function(){
	 * 	 loadScript("../plugin.js", function(){
	 * 	   ...
	 *   })
	 * });
	 */
	
	// pagefunction
	
	var pagefunction = function() {
		// clears the variable if left blank
	};
	
	// end pagefunction

	// destroy generated instances 
	// pagedestroy is called automatically before loading a new page
	// only usable in AJAX version!

	var pagedestroy = function(){
		
		/*
		Example below:

		$("#calednar").fullCalendar( 'destroy' );
		if (debugState){
			root.console.log("✔ Calendar destroyed");
		} 

		For common instances, such as Jarviswidgets, Google maps, and Datatables, are automatically destroyed through the app.js loadURL mechanic

		*/
	}

	// end destroy
	
	// run pagefunction
	pagefunction();
	
</script>

AngularJS (reloaded) brings you a brand new version built from ground up using Yeoman, Grunt and Bower package managers. It is now packed with robust features, a RESTful API with JSON files and a file structure that is neat as a pin. 
 
It also comes with ready to use services, directives, controllers, routes, i18n, and other components. All scripts are loaded via requireJS (lazy loading) making it lighter, faster and smarter!

Features 

This extendeds features from the HTML (non-ajax) version

 

File Structure

AngularJS version template structure


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html class="no-js" lang="en-us">
    <head>
        [meta data]
        [css url]
    </head>
    
    <body data-smart-device-detect="" data-smart-fast-click="" data-smart-layout=""
    data-smart-page-title="SmartAdmin Webapp">
        <!-- ui-view container -->
    
        <div data-autoscroll="false" data-ui-view="root">
            
        </div>
    
      <!--[if lt IE 9]>
        <script src="vendor/es5-shim/es5-shim.js"></script>
        <script src="vendor/json3/lib/json3.min.js"></script>
      <![endif]-->
        <script src="/app/rconfig.js"></script>
        <script data-main="app/main.js" src="/vendor/requirejs/require.js"></script>
    </body>
</html>

Bower.json (for AngularJS version only)

Bower is a front-end package manager for the web by Twitter.

SmartAdmin uses Bower to manage all the front end dependencies, make things clean, tidy and simple. If you haven't tried Bower before, give it a try, it makes life easier - you'll simply fail in love with it!

Inside the bower.json file of Bower, you'll see the list dependencies (package name and version):
 
Click here to learn more about the packages
 
 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
{
  "name": "SmartAdmin",
  "version": "1.5.0",
  "dependencies": {
    "requirejs-domready": "~2.0.1",
    "angular": "~1.2.25",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "bootstrap": "~3.2.0",
    "angular-resource": "~1.2.0",
    "angular-cookies": "~1.2.0",
    "angular-sanitize": "~1.2.25",
    "angular-animate": "~1.2.26",
    "angular-touch": "~1.2.0",
    "angular-route": "~1.2.0",
    "angular-ui-router": "~0.2.11",
    "jquery": "~2.1.1",
    "jquery.easy-pie-chart": "~2.1.4",
    "angular-bootstrap": "~0.11.0",
    "relayfoods-jquery.sparkline": "~2.1.4",
    "jquery-ui": "~1.11.1",
    "angular-easyfb": "~1.1.0",
    "angular-google-plus": "~0.1.2",
    "lodash": "~2.4.1",
    "angular-ui-router-anim-in-out": "~0.0.13",
    "datatables": "~1.10.2",
    "datatables-tabletools": "~2.2.3",
    "datatables-colvis": "~1.1.1",
    "datatables-responsive": "git://github.com/Comanche/datatables-responsive",
    "datatables-plugins": "*",
    "jquery-validation": "~1.13.0",
    "angular-couch-potato": "~0.1.1",
    "select2": "~3.5.1",
    "moment": "~2.8.3",
    "summernote": "~0.5.10",
    "jquery-maskedinput": "~1.3.1",
    "jquery-form": "~3.46.0",
    "bootstrapvalidator": "~0.5.2",
    "bootstrap3-fontawesome-timepicker": "~0.2.6",
    "clockpicker": "~0.0.7",
    "nouislider": "~7.0.9",
    "ion.rangeSlider": "~1.9.3",
    "bootstrap-duallistbox": "~3.0.2",
    "bootstrap-colorpicker": "*",
    "jquery-knob": "~1.2.11",
    "seiyria-bootstrap-slider": "~4.0.1",
    "bootstrap-tagsinput": "~0.4.2",
    "x-editable": "~1.5.1",
    "fuelux": "~3.1.0",
    "bootstrap-markdown": "~2.7.0",
    "dropzone": "~3.10.2",
    "jcrop": "~0.9.12",
    "jquery-color": "~2.1.2",
    "bootstrap-progressbar": "~0.8.3",
    "jquery-nestable": "~0.0.1",
    "angular-google-maps": "~2.0.1",
    "fastclick": "~1.0.3",
    "ckeditor": "~4.4.5",
    "to-markdown": "~0.0.2",
    "markdown": "~0.5.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.2.0",
    "angular-scenario": "~1.2.0"
  },
  "appPath": "app"
}

Automation with Grunt

Grunt is a JavaScript task runner (Automation), save yourself from repetitive tasks. Builds your app files automatically

Inside grunt/package.json file, you'll see all the Grunt plugins that help to automate the tasks.

If you want to know more about the plugins, you can click here.

 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
{
  "name": "smartadmin-grunt-tools",
  "smartadmin": {
    "public": "../public/",
    "plugin": "../public/plugin/",
    "vendor": "../public/vendor/",
    "temp": "../public/tmp/",
    "build": "../public/build/"
  },
  "version": "1.5",
  "description": "Smartadmin grunt tools",
  "main": "Gruntfile.js",
  "author": "MYORANGE INC",
  "license": "",
  "dependencies": {
    "lodash": "^2.4.1",
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.6.0",
    "grunt-ng-annotate": "^0.4.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-copy": "^0.7.0",
    "grunt-html2js": "^0.2.9",
    "fs-extra": "^0.12.0",
    "grunt-contrib-requirejs": "^0.4.4"
  }
}

How do I run the AngularJS version? 

You'll need to put the files on a server to run it.

So you can upload the "public" folder to your server to run it. Or you can build a server locally.
 
LEGAL NOTICE: PLEASE BE SURE TO REMOVE ALL UNMINIFIED ASSETS AND SCRIPTS WHEN YOU UPLOAD YOUR PROJECT FOR PUBLIC ACCESS

Building a server and running it locally.

You can build a locally server using WAMP or MAMP. It's very easy to build one with Python (if you prefer). In this example we will be using the WAMP server.
 
 
Prerequisite: You'll need to install Node.js (the NPM comes along with it) 
 
Step 1:  Once you have the node.js installed, open node.js command prompt, using the command promot go to your_server_root/angularjs_version/bower and type bower install and hit enter

This will automatically install all your vendors, as specificed from the bower.json file and place them within public/vendor directory. 

Once complete, you should see something like this:

 
Step 2:  Once you have the vendor files installed. Using the command prompt go to your_server_root/angularjs_version/grunt to automate the grunt task and build your project. 

Type npm install and hit enter

This will fetch and install all your NPM modules, needed to build your project. 

You should see the following screen once the installation is complete:

 
Step 3 (final step):  Now for the fun part!  You now have everything you need to build your app project. While still in the grunt directory, from the previous step, type the word grunt and hit enter.

This will execute the following tasks (automation):
  1. 'clean:pre'
    Description: erase temp and build dirs
     
  2. 'copy:pre'
    Description: copy files from public/app to the temp
     
  3. 'turnOffPotatoDeclaration'
    Description: switch directive/controller/factory files from lazy-loading to regular angular declarations (is required for annotation)
     
  4. 'ngAnnotate:tmp'
    Description: without this step minification is impossible
     
  5. 'turnOnPotatoDeclaration'
    Description: switch back to lazy-loading
     
  6. 'adjustTemplateUrls',
    Description: adjust templateUrl values: from 'app/modules/misc/lockscreen.html' to 'build/modules/misc/lockscreen.html'
     
  7. 'html2js'
    Description: concatenate all *.tpl.html template to one angular module 
     
  8. 'addIncludes'
     Description: additional includes for build (templates from prev step)
     
  9. 'uglify',
    Description: minification
     
  10. 'requirejs',  
    Description: r.js on temp/main.js to build/main.js dir. requirejs-compile-skip.json is used to exclude files from build (useful for cdn and reduce compiled file. If not used, all required in main.js plugin files will be included to build file)
     
  11. 'copy:post'
    Description: copy lazy minified files to build dir
     
  12. 'clean:post'
    Description: erase temp
Once complete you will see this following screen:

 
The end result of step three will produce a "build" folder within your_server_root/angularjs_version/public. You can now view the app by typing in your browser window http://your_server_root/angularjs_version/public/index.html
 
ATTENTION: The PHP_version requires PHP 5.5 or higher to work properly!

We felt the need to extend to our PHP based customers - based on feedback and requests we have created a PHP version and implemented the following classes for SmartAdmin:

 

File Structure

Below is showing the folder structure for PHP HTML version

 

 

NOTE: All these new classes and its documentation can be found inside the PHP version folder

 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
<?php

//initilize the page
require_once("inc/init.php");

//require UI configuration (nav, ribbon, etc.)
require_once("inc/config.ui.php");

/*---------------- PHP Custom Scripts ---------
YOU CAN SET CONFIGURATION VARIABLES HERE BEFORE IT GOES TO NAV, RIBBON, ETC. */

/* ---------------- END PHP Custom Scripts ------------- */
//include header
//you can add your custom css in $page_css array.
//Note: all css files are inside css/ folder
$page_css[] = "your_style.css";
include("inc/header.php");

//include left panel (navigation)
//follow the tree in inc/config.ui.php
include("inc/nav.php");
?>

<!-- ==========================CONTENT STARTS HERE ========================== -->

<!-- MAIN PANEL -->
<div id="main" role="main">
<?php
include("inc/ribbon.php");
?>

<!-- MAIN CONTENT -->
<div id="content">

</div>

<!-- END MAIN CONTENT -->
</div>

<!-- END MAIN PANEL -->

<!-- FOOTER -->
<?php
include("inc/footer.php");
?>

<!-- END FOOTER -->

<!-- ==========================CONTENT ENDS HERE ========================== -->

<?php 
//include required scripts
include("inc/scripts.php"); 
//include footer
include("inc/google-analytics.php"); 
?>

ATTENTION: You will need MVC5 or higher for our MVC version to work properly. Using older versions will be at your own risk and time investment and are void of any support or issue you may have as a result.

With having served the PHP community previously, we felt the time was right to also provide the SmartAdmin community with an ASP.NET MVC version. We wanted to make sure the MVC version is accesible and usable for a broad audience, and in order to achieve that, unique to the MVC version, we have included a step-by-step tutorial. The end result is a project template that is also included with this purchased version of SmartAdmin, and then some.

Our goal is to ensure that with every update of SmartAdmin the MVC version will be kept up-to-date, and will provide detailed steps in getting your current version migrated to the latest version of SmartAdmin MVC. We will do our very best in keeping these changes as simple as possible so you do not lose any precious time taking advantage of the newest features that come with each and every update to the template.

Questions and assistance with getting the template up and running can be asked at our brand new SmartAdmin Support site, so we invite you all to register and post your questions there, and if you are able to, help to answer questions of fellow SmartAdmin users; we highly recommend it! You might be able to pick up some nice tips and tricks in getting your project started!

If you require additional assistance that goes beyond the scope of the provided documentation you can always contact the author of the MVC project template at: smartadmin@walapa.nl

Features 

This extendeds features from the HTML (non-ajax) version

File Structure

 

NOTE: The tutorials can be found in the Tutorial section on the SmartAdmin Support Forum and are exlusive to SmartAdmin. Redistribution in any form of the template or the project files is strictly prohibited!

The contents of the main layout page is shown below, it has Bundling enabled and makes use of protocol relative URL's.


 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
<!DOCTYPE html>
<html lang="en-us" id="@ViewBag.PageId" class="@Settings.CurrentTheme">
<head>
    <meta charset=" utf-8">
    <title> SmartAdmin - MVC5 </title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Basic Styles -->
    @Styles.Render("~/content/smartadmin")
    <!-- FAVICONS -->
    <link rel="shortcut icon" href="~/content/img/favicon/favicon.ico" type="image/x-icon">
    <link rel="icon" href="~/content/img/favicon/favicon.ico" type="image/x-icon">

    <!-- GOOGLE FONT -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">

    <!-- Specifying a Webpage Icon for Web Clip
         Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
    <link rel="apple-touch-icon" href="~/content/img/splash/sptouch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="~/content/img/splash/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="~/content/img/splash/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="~/content/img/splash/touch-icon-ipad-retina.png">

    <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Startup image for web apps -->
    <link rel="apple-touch-startup-image" href="~/content/img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="~/content/img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="~/content/img/splash/iphone.png" media="screen and (max-device-width: 320px)">
</head>
<body class="@ViewBag.PageClass @Settings.CurrentTheme">
    @{ Html.RenderPartial("_Header", RenderSection("topright", false)); }
    @{ Html.RenderPartialIf("_Aside", Request.IsAuthenticated); }
    <div id="main" role="main">
        @{ Html.RenderPartialIf("_Ribbon", Request.IsAuthenticated); }
        @RenderBody()
    </div>
    @if (Request.IsAuthenticated)
    {
        Html.RenderPartial("_Footer");
        Html.RenderPartialIf("_Tiles", Settings.EnableTiles);
    }
    @{ Html.RenderPartial("_Scripts", RenderSection("pagespecific", false)); }
</body>

</html>

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.

 

  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
<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
<script data-pace-options='{ "restartOnRequestAfter": true }' src="js/plugin/pace/pace.min.js"></script>

<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    if (!window.jQuery) {
        document.write(<script src="js/libs/jquery-2.1.1.min.js"></script>');
    }
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery.ui) {
        document.write(<script src="js/libs/jquery-ui-1.10.3.min.js"></script>');
    }
</script>

<!-- IMPORTANT: APP CONFIG -->
<script src="js/app.config.js"></script>

<!-- JS TOUCH : include this plugin for mobile drag / drop touch events-->
<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script>

<!-- BOOTSTRAP JS -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- CUSTOM NOTIFICATION -->
<script src="js/notification/SmartNotification.min.js"></script>

<!-- JARVIS WIDGETS -->
<script src="js/smartwidgets/jarvis.widget.min.js"></script>

<!-- EASY PIE CHARTS -->
<script src="js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

<!-- SPARKLINES -->
<script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>

<!-- JQUERY VALIDATE -->
<script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>

<!-- JQUERY MASKED INPUT -->
<script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>

<!-- JQUERY SELECT2 INPUT -->
<script src="js/plugin/select2/select2.min.js"></script>

<!-- JQUERY UI + Bootstrap Slider -->
<script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

<!-- browser msie issue fix -->
<script src="js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

<!-- FastClick: For mobile devices -->
<script src="js/plugin/fastclick/fastclick.min.js"></script>

<!--[if IE 8]>

<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

<![endif]-->

<!-- Demo purpose only -->
<script src="js/demo.min.js"></script>

<!-- MAIN APP JS FILE -->
<script src="js/app.min.js"></script>

<!-- ENHANCEMENT PLUGINS : NOT A REQUIREMENT -->
<!-- Voice command : plugin -->
<script src="js/speech/voicecommand.min.js"></script>

<!-- SmartChat UI : plugin -->
<script src="js/smart-chat-ui/smart.chat.ui.min.js"></script>
<script src="js/smart-chat-ui/smart.chat.manager.min.js"></script>

<!-- PAGE RELATED PLUGIN(S)
<script src="..."></script>-->

<script type="text/javascript">
    $(document).ready(function() {
        /* DO NOT REMOVE : GLOBAL FUNCTIONS! */
         pageSetUp();
    })
</script>

<!-- Your GOOGLE ANALYTICS CODE Below -->
<script type="text/javascript">
    var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
        _gaq.push(['_trackPageview']);
    
    (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();
</script>

FontAwesome Icon 4.x

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS can be done to FontAwesome.

File dependency:

<link href="css/font-awesome.min.css" rel="stylesheet">

Also make sure that the FONTS folder is sitting in your root directory, if not you will have to manually edit the CSS or minified CSS file to point to the proper path.

For LESS and SASS versions click here

Inline Icons

Place Font Awesome icons just about anywhere using the <i> tag.

<i class="fa fa-camera-retro"></i> fa-camera-retro
Larger Icons

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-5x"></i> fa-camera-retro</p>
Fixed Width Icons

Use fa-fw to set icons at a fixed width. Great to use when variable icon widths throw off alignment. Especially useful in things like nav lists.

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li>
  <li><a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>
  <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a></li>
  <li><a href="#"><i class="fa fa-cogs fa-fw"></i> Settings</a></li>
</ul>

For a full list of icons to use please go to the FontAwesome Library Website

Please note that SmartAdmin uses FontAwesome 4.1 library class. If you upgrade to the latest version, a lot of the references to various icon may not work properly.

Note: Due to a "blur bug" caused by the adjusted font hinting in FontAwesome 4.2 we have decided to NOT include this new version with SmartAdmin 1.5. As soon as these quirks have been corrected we will push a minor update that includes FA 4.2 and will announce it on the template page.

Glyphicons

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to Glyphicons whenever possible

CLICK HERE for proper usage

SmartAdmin comes with two types of form grids. SmartForms and the default Bootstrap Form grid. SmartForms comes with a fully customized grid system catered specifically for building form layouts. It is not technically "better" than the bootstrap 3 built-in grid system, but rather more simplified for rapid form layout and overall faster development. 

When building your own form layouts, you should use either the Bootstrap or the SmartForm grid . It is important not to mix the two form grids as they can cause conflict.

SmartForm Layout

For SmartForm layouts and examples, please visit the "SmartForms" section of SmartAdmin (found under the Forms menu)

 

Bootstrap Form Layout

For the default bootstrap form layouts, please visit http://getbootstrap.com/css/#forms (you can visit the "Bootstrap Forms" section of SmartAdmin for further customized elements)

 

SmartAdmin "Third Party Plugins"

SmartAdmin utilizes many third party plugins in order to synchronize with your needs. The following plugins are constantly evolving and changing. It can get quite difficult to keep up to date with bugs and new plugin releases. For your convenience I have included this plugin list, their homepages and their relevant support forum (where applicable).

Please note we do not provide support for extended plugins!

Bootstrap Multiselect

Bootstrap multiselect documentation

 

Bootstrap Progressbar

Bootstrap Progressbar documentation

 

Bootstrap Max Length

Bootstrap Max Length documentation

 

Bootstrap Slider

Bootstrap Slider documentation

 

Bootstrap Tagsinput

Bootstrap Tagsinput documentation

 

Bootstrap Timepicker

Bootstrap Timepicker documentation

 

Bootstrap Wizard

Bootstrap Wizard documentation

 

Bootstrap TREE 

See SmartAdmin bootstrap tree section for more details. (you will have to go through the HTML code for the better understanding)

Bootstrap Colorpicker

Bootstrap Colorpicker documentation

 

CK Editor 

CK Editor documentation

 

Datatables

Datatables documentation

 

Dropzone

Dropzone documentation

 

Easy Pie

Easy Pie documentation

 

Flot Charts 

Flot Charts documentation

 

Fuel Ux Wizard 

Fuel UX Wizard documentation

 

Full Calendar

Full Calendar documentation

 

Ion Range Slider

Ion Range Slider documentation

 

Jquery Form

Jquery Form documentation

 

Jquery Nestable

Jquery Nestable documentation

 

JQuery UI Touch Punch 

Jquery UI Touch Punch documentation

 

Jquery Validate 

Jquery Validate documentation

 

Knob

Knob documentation

 

Markdown

Markdown documentation

 

Masked Input

Masked input documentation

 

Morris Charts 

Morris Charts documentation

 

$.noUiSlider 

noUISlider documentation

 

Pace.js 

Pace.js documentation

 

Select2 

Select2 documentation

 

SelectToUISlider 

SelectToUISlider documentation

 

Summernote 

Summernote documentation

 

Sparkline

Sparkline documentation

 

Superbox

Superbox documentation

 

TypeHead

TypeHead documentation

 

Vectormap 

Vectormap documentation

 

Xeditable

Xeditable documentation

 

PLEASE NOTE: For all charts displayed in the demo you can find their script and algorithms in the bottom part of their respective pages, this also gives you a general idea on how they are used and configured.

Flot Charts

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. FlotChart works with Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+

Basic Usage

Create a placeholder div to put the graph in:

<div id="placeholder"></div>

You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:

<div id="placeholder" style="width:600px;height:300px"></div>

You can also do it using an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).

 
Then when the div is ready in the DOM, which is usually on document ready, run the plot function:
$.plot($("#placeholder"), data, options);

In this example, data is an array of vectors and options is an object with settings if you want to customize the plot.

Take a look at the following examples for some ideas of what to use; or look at the API reference. Here's a quick example that'll draw a line from (0, 0) to (1, 1):

$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

For more info on FLOTCHART:

GitHUB Directory for FLOT

FlotChart Forum

FlotChart Website

Morris Charts

Add morris.js and its dependencies (jQuery & Raphaël) to your page.

PLEASE NOTE: Morris Charts are NOT responsive!

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>

Example Chart

Start by adding a <div> to your page that will contain your chart. Make sure it has an id attribute, since you need this to refer to it in your script later on.

<div id="myfirstchart" style="height: 250px;"></div>

Note: in order to display anything, you need to give the div dimensions. Here I’ve used inline CSS just for illustration purposes.

Next add a <script> block to the end of your page, containing the following javascript code:

new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    { year: '2011', value: 20 },
    { year: '2012', value: 10 },
    { year: '2013', value: 5 },
    { year: '2014', value: 5 },
    { year: '2015', value: 20 }
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Value']
});
LEARN MORE FROM MORRIS WEBSITE

Chart.js

Chart.js is a comprehensive lightweight graph library built for both, designers and developers.  
 
DATA STRUCTURE:
 
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
 
LEARN MORE FROM CHART.JS WEBSITE

Dygraphs

Dygraphs is a fast, flexible open source JavaScript charting library. Some of its key features include:

LEARN MORE FROM DYGRAPHS WEBSITE
Smartadmin utilizes "Easy Pie Chart" and "Sparklines" as part of the core JS structure for inline charts. SmartAdmin takes away the requirement to write custom javascript to generate these graphs.

Easy Pie Charts

<div class="easy-pie-chart txt-color-greenLight easyPieChart" 
data-percent="50"
data-pie-size="50" 
data-size="180">
    <span>
       55
    </span>
</div>
Notice that we do not use any javascript at all for this chart and it will generate based on the CSS color, data-percentage, data-pie-size (the thickness) and data-size (which is basically the radius)

Sparkline Pie

<div class="sparkline txt-color-blue display-inline" 
data-sparkline-offset="90" 
data-sparkline-piesize="75px" 
data-sparkline-type="pie" 
data-sparkline-piecolor="['#E979BB', '#57889C']">
    3,5,2
</div>

Sparkline Composite

<div class="sparkline" 
data-sparkline-bar-val="[4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7]" 
data-sparkline-color-bottom="#2b5c59" 
data-sparkline-color-top="#3a6965" 
data-sparkline-height="78px"
data-sparkline-highlightline-color-top="#cce8e4"
data-sparkline-highlightspot-color-top="#9dbdb9" 
data-sparkline-line-val="[6,4,7,8,4,3,2,2,5,6,7,4,1,5,7,9,9,8,7,6]" 
data-sparkline-line-width-top="3" 
data-sparkline-maxspot-color-top="#c2cccc"
data-sparkline-minspot-color-top="#97bfbf" 
data-sparkline-spot-color="#2b5c59" 
data-sparkline-spotradius-top="5" 
data-sparkline-type="compositeline" 
data-sparkline-width="96%"></div>

Sparkline Bar Chart

<div class="sparkline txt-color-blueLight text-center"
data-sparkline-barspacing="5" 
data-sparkline-barwidth="11"
data-sparkline-height="80px" 
data-sparkline-type="bar"
data-sparkline-width="96%">
    4,3,5,7,9,9,8,7,6,6,4,7,8,4
</div>
Find several more examples inside the Inline Charts section of SmartAdmin

 

General Elements

Below are a few basic examples of the general elements available in SmartAdmin. For a full list you will need to go to the "General Elements" page in SmartAdmin and use the "inspect element" option to view the HTML required for it to be displayed
Alerts 

1
2
3
4
<div class="alert alert-warning fade in">
   <button class="close" data-dismiss="alert">×</button>
   <strong>Warning</strong> Your monthly traffic is reaching limit.
</div>

Progressbars (please see the General Elements page for more examples)

1
2
3
<div class="progress progress-sm">
   <div class="progress-bar bg-color-greenLight" style="width: 40%"></div>
</div>

The following classes can be used ".progress-micro", ".progress-xs", ".progress-sm", ".progress-lg"

Tabs (please view the tabs section in General Elements page for more examples)


 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
<ul class="nav nav-tabs bordered" id="myTab1">
    <li class="active"><a data-toggle="tab" href="#s1">Left Tab
    <span class="badge bg-color-blue txt-color-white">12</span></a></li>
    <li><a data-toggle="tab" href="#s2">Tab Item 2</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">Dropdown</a>
        <ul class="dropdown-menu">
            <li><a data-toggle="tab" href="#s3">@fat</a></li>
            <li><a data-toggle="tab" href="#s4">@mdo</a></li>
        </ul>
    </li>

    <li class="pull-right">
         [SPARKLINE_GRAPH]
    </li>
</ul>

<div class="tab-content padding-10" id="myTabContent1">
    <div class="tab-pane fade in active" id="s1">
         [TAB_CONTENT_1]
    </div>

    <div class="tab-pane fade" id="s2">
          [TAB_CONTENT_2]
    </div>

    <div class="tab-pane fade" id="s3">
         [TAB_CONTENT_3a]
    </div>

    <div class="tab-pane fade" id="s4">
        [TAB_CONTENT_3b]
    </div>
</div>

For various styles and direction for tabs, please refer to the general-elements.html page
Accordions
Please view the accordion section in General Elements page for the complete mockup (there are various examples available)

Buttons
Uses default bootstrap button format, please see the buttons section for more variation

SmartAdmin uses the default table CSS from the core bootstrap CSS file. For more information please visit: http://getbootstrap.com/css/#tables

UPDATE: SmartAdmin have upgraded datatable to version 1.10

SmartAdmin uses the plugin "datatables" for dynamic table content and table data alterations. More info about this plugin can be found on datatables.net

Find more useful examples of datatables here https://datatables.net/examples/

 

jqGrid is a grid plugin for the JQuery Javascript library. It is free, open source and gets distributed under the MIT license.

Find plugin information and demos on: http://trirand.com/blog/jqgrid/jqgrid.html

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 - please note in order to purchase any of SmartAdmin addons or skins you must hold a valid SmartAdmin license from wrapbootstrap.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.

Product Licenses

SmartAdmin comes with various product licenses for you to choose from. It offers Single License, Multiple License and Extended Licenses.

To learn more about the license types and its terms please visit http://support.wrapbootstrap.com/knowledge_base/topics/usage-licenses
 

Please note SaaS based applications can be a bit tricky, please email our legal team legal@myorange.ca for further assistance and clearfication on which license will be best suited

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 for all licensing related questions, you will need to email support@wrapbootstrap.com OR you can check out the Help Center (http://support.wrapbootstrap.com/help_center)
  9. Please note I do not provide extended support for third party plugins (combining two or more plugins to achieve certain result)
  10. 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_/
 

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