Widgets Market

Starting from Pages v2.0.0, we will be publishing a new widget every week through our Widget Marketplace. Yes, that's a promise we give to our loyal customers! We believe, doing this will make your life even easier as it introduces various pre-built widgets that you can easily copy-paste into your existing dashboard and visualize data in a snap. We are hoping to release widgets for various categories such as social, commerce and finance.

How to use Pages Widgets

You may be noticing a new link appearing in the sidebar of demo dashboard (demo/html/index.html) already, titled 'Widgets'. This link will take you to the Widget marketplace where you can search and preview the widgets published by us. Once you decide which widget to add to your dashboard please follow the steps below:

Step one

Open the extracted bundle folder then go to widgets sub-folder. Then open index.html of your preferred widget and copy the markup of the widget into your dashboard. This example will show how to add widget_plain_live_widget into the demo dashboard at demo/html/index.html

<div class="ar-1-1 widget-1-wrapper">
    <div class="widget-3 panel no-border bg-complete no-margin widget-loader-bar">
        <div class="panel-body no-padding">
            <div class="metro live-tile" data-mode="carousel" data-start-now="true" data-delay="3000">
                <div class="slide-front tiles slide active">
                    <div class="padding-30">
                        <div class="pull-top">
                            <div class="pull-left visible-lg visible-xlg">
                                <i class="pg-map"></i>
                            </div>
                            <div class="pull-right">
                                <ul class="list-inline ">
                                    <li>
                                        <a href="#" class="no-decoration"><i class="pg-comment"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="widget-3-fav no-decoration"><i class="pg-like"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="pull-bottom p-b-30">
                            <p class="p-t-10 fs-12 p-b-5 hint-text">21 Jan</p>
                            <h3 class="no-margin text-white p-b-10">Carefully
                                <br>designed for a
                                <br>great
                                <span class="semi-bold">experience</span>
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="slide-back tiles">
                    <div class="padding-30">
                        <div class="pull-top">
                            <div class="pull-left visible-lg visible-xlg">
                                <i class="pg-map"></i>
                            </div>
                            <div class="pull-right">
                                <ul class="list-inline ">
                                    <li>
                                        <a href="#" class="no-decoration"><i class="pg-comment"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="widget-3-fav no-decoration"><i class="pg-like"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="pull-bottom p-b-30">
                            <p class="p-t-10 fs-12 p-b-5 hint-text">21 Jan</p>
                            <h3 class="no-margin text-white p-b-10">A whole new
                                <br>
                                <span class="semi-bold">page</span>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Step two

Check if the widget has any dependencies that dashboard hasn't included already. If you spot any, include them in your dashboard.

Widget in example above depends on MetroJS. Make sure you correct the path in the dependencies relative to the dashboard file

<script src="../plugins/jquery-metrojs/MetroJs.min.js" type="text/javascript"></script>

Step three

Open js/widget.js and copy the JS into your custom JS file used in the dashboard

/*
    Widget specific JS (ie: init scripts of 
    plugins used in the widget) go here
*/
$(".widget-3 .metro").liveTile();

Step four

Open css/widget.css and copy the CSS into your custom CSS file used in the dashboard

/* 
    Widget specific styles go here
*/