Dashboard (redux)

[Macrura]

Sometimes you have clients who will login to the admin, and they perhaps only need to access a few areas of the site, such as:

• a product or blog list (ListerPro)
• site settings
• formbuilder entries
• specific front end pages
• documentation
• helpdesk
• backup interface
• Server health or server status (for example site5 has a page for every server to see it's status)
• Link to a bookmark (page tree bookmark for example) - this is awesome by the way
• Run a special action like clear a wirecache or other custom caching
• Add a billing or late payment notice
• Add an alert about upcoming server maintenance

The Problem:

How can you collate all of these diverse links and messages into 1 page, as fast and easy as possible, make it hassle-free to add stuff to it, maybe some messages, change the order of the links etc.

In some systems this is called the Dashboard. You can make one in a few minutes using:

1.) Admin Custom Pages

2.) ready.php in your site folder

Steps:

1. Install ACP
2. create a file inside templates for your dashboard (e.g. _ac_dashboard.php).
3. Create your dashboard page below the admin branch of the page tree, assign it to ACP, and set the template to use to the one you created.
4. This example will display a table of quicklinks.

Contents of the dasboard file:

<?php
wire('modules')->get('MarkupAdminDataTable');
?>

<h3>Title of site here</h3>

    <div id='ProcessFieldList'>

        <table id='AdminDataTable1' class='AdminDataTable AdminDataList AdminDataTableResponsive AdminDataTableSortable'>
            <thead>
            <tr>
                <th>Item</th>
                <th>Comment</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>blog/'>Blog</a></td>
                    <td>Filterable/Searchable listing of blog posts.</td>
                </tr>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>news/'>News</a></td>
                    <td>Filterable/Searchable listing of news items.</td>
                </tr>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>projects/'>Projects</a></td>
                    <td>Filterable/Searchable listing of projects.</td>
                </tr>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>page/'>Page Tree</a></td>
                    <td>A hierarchical listing of the pages in your site.</td>
                </tr>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>settings/'>Site Settings</a></td>
                    <td>Global site settings</td>
                </tr>
            </tbody>
        </table>

        <script>AdminDataTable.initTable($('#AdminDataTable1'));</script>

    </div><!--/#ProcessFieldList-->

You only need this if you want to redirect logins to the dashboard:

add to ready.php

(where 1234 is the ID of your dashboard page):

if($page->template=="admin" && $page->id == 2) $session->redirect($pages->get(1234)->url);

Edited October 12, 2015 by Macrura
removed duplicate content div

[diogo]

You only need this if you want to redirect logins to the dashboard:

add to ready.php

(where 1234 is the ID of your dashboard page):

if($page->template=="admin" && $page->id == 2) $session->redirect($pages->get(1234)->url);

You can also install my ProcessPageAdmin module to do this https://github.com/ocorreiododiogo/ProcessHomeAdmin

[Macrura]

cool - thanks! loving to hear more suggestions and enhancements.

This simple recipe is going to make things at least 50% easier for my clients, especially those who seldom access their sites and then when they do they can't remember where anything is... arriving at the page tree for about 70% of my sites is a non-sequitur; 

For example on New Focus Recordings, we use almost exclusively listers, so better to login and land on a quicklink list so you can get where you need and maybe not even see the (wonderful) page tree at all.

[mr-fan]

I'll spend a little snippet to render a nice admin table in such kinds of dashboard....

//lets's show some last events
//rootpage of articles is XXXX
// Find some pages
$events = $pages->find("template=event,check_active=0,limit=5,sort=event_start_date,sort=event_start_time");
$table = $modules->get("MarkupAdminDataTable");
$table->headerRow( ["Title", "Created", "User"] );
$table->setSortable(false);
$table->action(array(
	'New Event' => $config->urls->admin . 'page/add/?parent_id=XXXX',
	'All Events' => $config->urls->admin . 'page/events/',
));

foreach($events as $page){
  $data = array(
    // Values with a sting key are converter to a link: title => link
    $page->title => $config->urls->admin."page/edit/?id=".$page->id,
    date("F j, Y", $page->created),
    $page->createdUser->full_name
  );
  $table->row($data);
}

// $table->footerRow( $someArray );
echo '<div class="someclass">';											">';
echo $table->render();
echo '</div>';

renders something like this:

have fun

[Macrura]

Update:

So I've been using Pete's dashboard module instead of the technique described above;

it's quicker to setup, and easier to clone to other installs, and no need to have code in various places like the themes folder and in ready.php

The hope/plan is to turn it into a full widget enabled dashboard module that i can install on various installations

a) without having to do any hardcoding

b) enable control over which widgets are shown on the dashboard (by user/role/permission)

c) allow for easy configuration of colors, icons, columns, etc.

To achieve this I setup some templates for different widget types, one is a shortcuts widget, another is a page lister widget;

these each have pages and fields to configure them; i can set them to appear by user/role.

in the future i can add different types of widgets as needed and then include them in the needed user's dashboard.

This is using a combination of a free (MIT licensed) admin theme for bootstrap, but instead of using bootstrap as the css layout, it uses a tiny grid called rwdgrid which i s 2KB; it uses the box, and other widget classes from the admin theme.

[adrianmak]

Sometimes you have clients who will login to the admin, and they perhaps only need to access a few areas of the site, such as:

• a product or blog list (ListerPro)
• site settings
• formbuilder entries
• specific front end pages
• documentation
• helpdesk
• backup interface
• Server health or server status (for example site5 has a page for every server to see it's status)
• Link to a bookmark (page tree bookmark for example) - this is awesome by the way
• Run a special action like clear a wirecache or other custom caching
• Add a billing or late payment notice
• Add an alert about upcoming server maintenance

The Problem:

How can you collate all of these diverse links and messages into 1 page, as fast and easy as possible, make it hassle-free to add stuff to it, maybe some messages, change the order of the links etc.

In some systems this is called the Dashboard. You can make one in a few minutes using:

1.) Admin Custom Pages

2.) ready.php in your site folder

Steps:

1. Install ACP
2. create a file inside templates for your dashboard (e.g. _ac_dashboard.php).
3. Create your dashboard page below the admin branch of the page tree, assign it to ACP, and set the template to use to the one you created.
4. This example will display a table of quicklinks.

Contents of the dasboard file:

<?php
wire('modules')->get('MarkupAdminDataTable');
?>

<h3>Title of site here</h3>

    <div id='ProcessFieldList'>

        <table id='AdminDataTable1' class='AdminDataTable AdminDataList AdminDataTableResponsive AdminDataTableSortable'>
            <thead>
            <tr>
                <th>Item</th>
                <th>Comment</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>blog/'>Blog</a></td>
                    <td>Filterable/Searchable listing of blog posts.</td>
                </tr>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>news/'>News</a></td>
                    <td>Filterable/Searchable listing of news items.</td>
                </tr>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>projects/'>Projects</a></td>
                    <td>Filterable/Searchable listing of projects.</td>
                </tr>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>page/'>Page Tree</a></td>
                    <td>A hierarchical listing of the pages in your site.</td>
                </tr>
                <tr>
                    <td><a href='<?php echo $config->urls->admin?>settings/'>Site Settings</a></td>
                    <td>Global site settings</td>
                </tr>
            </tbody>
        </table>

        <script>AdminDataTable.initTable($('#AdminDataTable1'));</script>

    </div><!--/#ProcessFieldList-->

You only need this if you want to redirect logins to the dashboard:

add to ready.php

(where 1234 is the ID of your dashboard page):

if($page->template=="admin" && $page->id == 2) $session->redirect($pages->get(1234)->url);

example dashboard.png

which admin theme used in the screen shot ?

[Pete]

which admin theme used in the screen shot ?

Reno - it's included in most recent versions.

Sometimes you have clients who will login to the admin, and they perhaps only need to access a few areas of the site, such as:

Just noticed the logo you have for the Blog menu item

[Mike Rockett]

Nice to see Jumplinks floating around there And with a custom icon

[Macrura]

@Pete - thanks for noticing.. yeah there isn't really a 'blog' icon in fontawesome, so i just used that one..., and i also have some questions/comments about the dashboard module, but i'll do those over on the module thread..

@Mike - yeah, i should probably change to a rocket, but the idea of 're-routing' something seemed also to communicate what that does... any sort of looped arrow i guess would work...

[cstevensjr]

Great work (as always), @Macrura!

[Mike Rockett]

@Mike - yeah, i should probably change to a rocket, but the idea of 're-routing' something seemed also to communicate what that does... any sort of looped arrow i guess would work...

Honestly, I prefer yours. Hehe!

[Macrura]

which admin theme used in the screen shot ?

Do you mean which PW theme, or which theme is used in the dashboard area (which uses a mini admin theme style-scoped into the dashboard container)

[adrianmak]

Update:

So I've been using Pete's dashboard module instead of the technique described above;

it's quicker to setup, and easier to clone to other installs, and no need to have code in various places like the themes folder and in ready.php

The hope/plan is to turn it into a full widget enabled dashboard module that i can install on various installations

a) without having to do any hardcoding

b) enable control over which widgets are shown on the dashboard (by user/role/permission)

c) allow for easy configuration of colors, icons, columns, etc.

To achieve this I setup some templates for different widget types, one is a shortcuts widget, another is a page lister widget;

these each have pages and fields to configure them; i can set them to appear by user/role.

in the future i can add different types of widgets as needed and then include them in the needed user's dashboard.

dashb_example.png

This is using a combination of a free (MIT licensed) admin theme for bootstrap, but instead of using bootstrap as the css layout, it uses a tiny grid called rwdgrid which i s 2KB; it uses the box, and other widget classes from the admin theme.

How you implement shortcut widgets?

Two different template file and included in the dashboard page ?

And, the those site shortcuts links are hard-coded in template?

[adrianmak]

I installed Pete's Dashboard module. It behave slightly different from Macrura posted screenshot

After logged in, Dashboard is not the default page and, the Dashboard tab is not in the first order.

[Gideon So]

Update:

So I've been using Pete's dashboard module instead of the technique described above;

it's quicker to setup, and easier to clone to other installs, and no need to have code in various places like the themes folder and in ready.php

The hope/plan is to turn it into a full widget enabled dashboard module that i can install on various installations

a) without having to do any hardcoding

b) enable control over which widgets are shown on the dashboard (by user/role/permission)

c) allow for easy configuration of colors, icons, columns, etc.

To achieve this I setup some templates for different widget types, one is a shortcuts widget, another is a page lister widget;

these each have pages and fields to configure them; i can set them to appear by user/role.

in the future i can add different types of widgets as needed and then include them in the needed user's dashboard.

dashb_example.png

This is using a combination of a free (MIT licensed) admin theme for bootstrap, but instead of using bootstrap as the css layout, it uses a tiny grid called rwdgrid which i s 2KB; it uses the box, and other widget classes from the admin theme.

Hi Macrura,

This is very impressive. Any tutorial or resources to show us how to do it?? Thanks.

Gideon

[Macrura]

I installed Pete's Dashboard module. It behave slightly different from Macrura posted screenshot

BaiduShurufa_2016-1-20_9-4-59.png

After logged in, Dashboard is not the default page and, the Dashboard tab is not in the first order.

can you try moving the page up to the top, in the admin page branch?

Hi Macrura,

This is very impressive. Any tutorial or resources to show us how to do it?? Thanks.

Gideon

sure, i can try, and the plan is to eventually make a module...

but in the meantime i'll try and make a tutorial, because until the module is made, it's just a lot of fields, templates and pages in the admin; then 1 dashboard.php, and 3 css files

[Gideon So]

can you try moving the page up to the top, in the admin page branch?

sure, i can try, and the plan is to eventually make a module...

but in the meantime i'll try and make a tutorial, because until the module is made, it's just a lot of fields, templates and pages in the admin; then 1 dashboard.php, and 3 css files

Good. Waiting for your great tutorial.

Gideon

[Macrura]

How you implement shortcut widgets?

Two different template file and included in the dashboard page ?

And, the those site shortcuts links are hard-coded in template?

the latest screenshot i use pages for the shortcut widgets as follows; this is a basic setup and will be expanded upon gradually:

the widgets are pages

this is the template for making shortcuts; the shortcuts are configured first, and then added to the widget;

this way shortcuts can be used in any widget

this is the page for configuring a shortcut widget

this is the shortcut page showing the page select for the shortcuts

there is one template file dashboard.php which controls the contents of the dashboard.

the shortcut widgets are generated automatically based on being setup in the admin;

the lister widgets are currently hardcoded but the plan is to make them configurable using a selector field

[adrianmak]

can you try moving the page up to the top, in the admin page branch?

I see.

From OP, using login redirect to redirect to dashboard.

if($page->template=="admin" && $page->id == 2) $session->redirect($pages->get(1234)->url)

what is the $page->id == 2   ?

[Martijn Geerts]

what is the $page->id == 2   ?

Admin Page with id = 2, That page executes the ProcessHome module.

[Macrura]

The dashboard module itself does a redirect, but it looks for the first child of the admin page:

if ($this->page->id == 2) {
            $this->session->redirect($this->page->child->url);
        }

The first child of this page. Returns a Page. See also $page->child($selector). more

using the method described in the first post gives you more control if you want to keep everything in your templates folder and do the redirect within ready.php; the dashboard module changes process on the admin page which may not be wanted;

also if you do end up using the dashboard module, it may be prudent to rename the module so that any customizations or additions are not overridden in case of a module update.

[krisj]

@Macrura I like where you are going with this. Every user needs a good starting point and a comprehensive Dashboard is a proven and effective way of doing it. Exciting times

[neosin]

On 1/19/2016 at 11:10 PM, Macrura said:

the latest screenshot i use pages for the shortcut widgets as follows; this is a basic setup and will be expanded upon gradually:

the widgets are pages

this is the template for making shortcuts; the shortcuts are configured first, and then added to the widget;

this way shortcuts can be used in any widget

this is the page for configuring a shortcut widget

this is the shortcut page showing the page select for the shortcuts

there is one template file dashboard.php which controls the contents of the dashboard.

the shortcut widgets are generated automatically based on being setup in the admin;

the lister widgets are currently hardcoded but the plan is to make them configurable using a selector field

@Macrura I am very interested in this, is it available as a package or module for download?

[Macrura]

The ProcessDashboards module which is the latest iteration of this is back to being a simple helper module, close to the original Dashboard module by @Pete, but with some additional features, and that the module no longer changes anything in the admin, meaning that it doesn't auto-change the admin page to use the process; instead you create one or more dashboards, and input the path to a php file to render the dashboard;

if you want to use one of them as the admin home screen, then you just change that admin page's process to use this module (ProcessDashboards). Since making dashboards is fundamentally creating markup, it is better to keep all of the files for the dashboard in the templates folder. Also, if there were to be any dashboard module that output markup, it could become difficult to support multiple admin themes. Users of UIKit theme could build a simple dashboard using all native UIKit markup and not have to include a css framework (as i have done for the examples, which run inside the reno theme).

Since this type of setup is not really suitable for a standalone module, or a site profile, i see it more as a construction kit. You need the base module; if you want to use the shortcuts and widgets functionality, there is another module that installs all of the fields & templates for that setup; You need the files that generate the dashboard(s) and the widgets that go in the templates folder, including css/js, libraries, widget partials, and functions. Hopefully this can all be on GitHub soon, once i sort out some issues with my current dev computer (old os no longer being able to connect to github)...

[netcarver]

On 3/24/2018 at 12:29 PM, Macrura said:

Hopefully this can all be on GitHub soon, once i sort out some issues with my current dev computer (old os no longer being able to connect to github)

That would be very nice, hope you can get the machine working soon.