Topic: Modularizing the Dashboard

We have a flexible Reports System which can be modularized very good.
Go through working with FA I found many functions that are not as flexible as the Reports is
So I have been planning to modularize these inflexible functions.

Will begin with the Dashboards System and hope to get more feedback from everyone.
Also hope these modifications would be considered to the core deployment.

Phuong

Re: Modularizing the Dashboard

Yes, sure @notrinos. We could do it better. Feel free to experiment. What I would like is that we could change the diagrams,  the constants inside the diagrams etc. But remember that we should not convert to Google api. They can not be used for Arabic countries.

So go ahead and be creative ????

Joe

Re: Modularizing the Dashboard

Yes sir
But how about Jquery ?
We are seem to be a bit cautious with the use of 3rd party libraries ?

Phuong

Re: Modularizing the Dashboard

Yes, I like jquery too, but haven't considered it useful for FA. I guess I will discuss it with Janusz.

Joe

Re: Modularizing the Dashboard

Yes
Using it could open a vast space for improving the user experience.

Phuong

Re: Modularizing the Dashboard

Current javascript support in FA is sufficient for most needs, so I have not considered adding big js libraries like jquery to the main code. But if you want to have some functions which would be hard to implement in plain javascript, I'm not entirely against including jquery, providing the new code would be handy to use in other parts of FA interface.

When considering inclusion of javascript libraries one thing have to be guaranteed for sure: all the library code have to be included in FA distribution i.e. no external references to e.g. google apis, or other online js repos is allowed. This is because FA in many cases is installed on LANs with no access to internet for many reasons including security.

Janusz

Re: Modularizing the Dashboard

Yes @Joe @itronics
I understand and entirely agreed with these standards.
The first modifications will be presented next week
Thank you

Phuong

Re: Modularizing the Dashboard

JQuery can be an extension by itself. Other extensions can then depend on this or install it as a pre-requisite where absent with an alert.

Re: Modularizing the Dashboard

Yes @apmuthu
Jquery can be implemented locally in any extension.
My plan is a bit different.
1. Developers could create dashboards themselves for their extensions and
2. They also could created extensions to replace the build in dashboard.
Without include Jquery in the core  the second possibility would be restricted in creating dynamic widgets (or at least I don't know how to do).

I'm going provide the first roughly modification today or tomorrow to make ideas clearer.

Thank you

Phuong

10 (edited by notrinos 12/03/2018 02:42:19 pm)

Re: Modularizing the Dashboard

Hello

Here is the modification for a customizable dashboard system

- One current core file to be modified: /admin/dashboard.php
- One folder to be added to the root folder: /dashboards
- In this new folder dashboards the build in widgets would be placed there
- For custom dashboard, developer should create a folder named dashboards in his extension folder then put here a file named custom_dashboards.php. To add new dashboard and widgets would require this file' contents like this:

define('DA_HRM', 'FrontHrm');

$dashboard->addDashboard(_('HRM'), DA_HRM);
$dashboard->addWidget(DA_HRM, 997, _('Widget name 1'), WIDGET_HALF);
$dashboard->addWidget(DA_HRM, 998, _('Widget name 2'), WIDGET_HALF);
$dashboard->addWidget(DA_HRM, 999, _('Widget name 3'), WIDGET_FULL);
...

This is a rough sketch for what I have proposed.
Following this method users can decide which widget, chart would be shown on their dashboard.
I have been doing this by simulating the Report System.
Jquery and any Js, charts libraries could be included later

Thank you

ps: also need few more new css lines

div.widget_title {
    font-weight: bold;
    color: #555;
    font-size: 1.3em;
    width: 100%;
    border-bottom: 1px solid #DDD;
    padding: 5px 0;
    margin-bottom: 5px;
}

div.widget {
    border: 1px solid #DDD;
    background: #FFF;
    padding: 0 10px;
    margin: 10px 0;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    height: 23em;
    overflow: auto;
}

div.widget_full {
    width: calc(100% - 40px);
    margin-left: 20px;
}

div.widget_half {
    width: calc(50% - 30px);
    margin-left: 20px ;
}
Post's attachments

dashboard.zip 5.2 kb, 11 downloads since 2018-12-03 

You don't have the permssions to download the attachments of this post.
Phuong

Re: Modularizing the Dashboard

@notrinos -. We need to write a class like hooks. We can allow the developers to add their widget to dashboard.  And also we need to keep a format for chart and graphs. We can also display tables in it. All we need to extend the methods inside hooks class to add widgets or we need new class to handle it

Re: Modularizing the Dashboard

@kvvaradha
Just like the Report Extensions, a hook class is not necessary
Can write anything tables, graphs, charts in the custom widgets
You can even add your custom chart library to write a dynamic chart

Phuong

Re: Modularizing the Dashboard

@joe, @itronics

I request you to please include this customization in the core. Flexible dashboards are really the need of the day. It will be a great option if we can manage dashboards using modules/extensions.

www.boxygen.pk

Re: Modularizing the Dashboard

@boxygen,

Yes, i agree. I am just waiting for @notrinos suggestions about what to change in the core to help modularizing the Dashboard.

@boxygen, @notrinos and @apmuthu.

Thank you for your creative coop in this and other matters.

/Joe

Re: Modularizing the Dashboard

@Joe, @notrinos thanks alot for this nice feature.

Also if we can apply the Security Area on Dashboard Widgets then it would be great

www.boxygen.pk

Re: Modularizing the Dashboard

Any update on this @notrinos?

www.boxygen.pk

Re: Modularizing the Dashboard

Will try to make codes ready later this month @boxygen

Phuong

Re: Modularizing the Dashboard

Hello everyone, thank you so much for your responses
Here is the completed code for this modification.
After unzip the attachment we will need to replace one core file: admin/dashboard.php and copy every files in the reporting folder to the coresponding places.
Also need to copy the css contents to every theme we have.

We need new css codes because I used DIV tags to replace the current structure which has been built on tables structure, gradual replacement of tables to DIV tags would create future advantages when building responsive themes.

With this new dashboard system the current file includes/dashboard.inc can be removed.

DOWNLOAD

Thank you all

Phuong

Re: Modularizing the Dashboard

And an example for custom dashboard module as well: custom_sales_dashboard

You will see a new addition widget in the Sales/Dasboard after active this module.

Post's attachments

dashboard_01.zip 22.7 kb, 5 downloads since 2019-01-14 

You don't have the permssions to download the attachments of this post.
Phuong

Re: Modularizing the Dashboard

Great smile.

www.boxygen.pk

Re: Modularizing the Dashboard

@joe: will this affect the non dashboard default themes and if not, can it be included in the core?

Re: Modularizing the Dashboard

@apmuthu. I don't know yet.
You should address this question to @notrinos.
I don't have the complete picture yet.

Joe

23 (edited by notrinos 01/15/2019 04:11:22 am)

Re: Modularizing the Dashboard

@apmuthu
this requires the following css codes for every themes to get affected

div.widgets_container {
    display: inline-block;
    width: 100%;
}

div.widget_title {
    font-weight: bold;
    color: #555;
    font-size: 1.3em;
    width: 100%;
    border-bottom: 1px solid #DDD;
    padding: 5px 0;
    margin-bottom: 5px;
}

div.widget {
    border: 1px solid #DDD;
    background: #FFF;
    padding: 0 10px;
    margin: 10px 0;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    height: 23em;
    overflow: auto;
}

div.widget_full {
    width: calc(100% - 40px);
    margin-left: 20px;
}

div.widget_half {
    width: calc(50% - 30px);
    margin-left: 20px ;
}

These are screen shots for the current core themes:
Default
Canvas
Dropdown

Phuong

Re: Modularizing the Dashboard

@notrinos: You have placed a lot of widgets php files in the reporting folder - should they not be in a separate folder?

If some common css is needed for every theme, should they not be in a separate include file?

Re: Modularizing the Dashboard

@notrinos - Show us a demo from your work.