Dashboard Configuration

Introduction

Dashboard is the most important page of any application which provides at-a-glance view of the whole application. It also gives quick & summarised reports of Key Performance areas. It is considered as Progress Report of all major activities within project/App.

Dashboard should be designed in such a way that user must get all the required information clearly; in addition to it, user must have quick access to supporting information. Maximum visual presentation with minimum distractions of major information, helps user to take decisions.

Below is the Basic Dashboard which gives summarized information about what is the quantity and value of all the products in categories, top selling products etc. By looking at this, marketing managers can take decisions like which products to promote and which product/categories need more marketing.

Information can be in textual format as well as in Chart format to make it attractive and provide colorful presentation. User can have his own preference to choose from Pivot Table format or Chart format.

Basic Text Dashboard

Basic Dashboard with data in Pivot table format at Admin Panel

Traditional users like to see textual information to get idea about latest happening about their App so they will chose the same and it will look as shown in above screenshot. Administrator can put as many blocks as he wants to have a glance at various required reports. It allows Sorting, Searching, Filtering and viewing the detailed information with one click.

Benefit of Pivot Table Dashboard are as below:

  1. You can always have exact figures in front of your eyes instead of proportion.
  2. Sorting is possible.
  3. Number of records to show on single page can be changed dynamically.

Basic Charts

Below screenshot shows basic charts used for dashboard presentation at Admin Panel

Modern users have changed their mind and they want to show each report or important data in chart format, which is obviously more readable and presented in more professional way.

Features of Chart Dashboard

Here are some more features of Chart Type Dashboard

  1. These charts are dynamic, chart type can be changed run time as per the choice of viewer. Each type of the chart are explained below in detail.
  2. Even converting chart according to the other field is possible too. E.g. 1st chart shows data according to Price but if viewer want to check chart on the basis of quantity then he can select “Quantity” option from dropdown and chart will be changed dynamically.
  3. There can be multiple such dynamic field options to select from, for user.
    User has option to choose from Pivot Table and Chart. Default is Chart in above screenshot.
  4. Hovering mouse over any bar will show exact value of that part of the chart.
  5. Available Chart Types are
    • Bar Chart
    • Horizontal Bar Chart
    • Pie Chart
    • Donut Chart
    • Area Chart
    • Line Chart
    • Stacked Bar Chart
    • Stacked Horizontal Bar Chart
  6. Benefits of Chart over Pivot Table
    • Benefits of Chart over Pivot Table
    • Visual presentation in make the presentation attractive and professional
    • Easily can get idea about the proportionate ratio so comparison becomes smooth
    • All the data can be accommodated in single screen

Blocks

Landing on the Dashboard Management page in backend will display below screen, where you can see different blocks containing which are already configured along with other options.

Listing

Dashboard should be divided into many blocks to present various information. Each block displaying different information will lead user to get what he wants.

  1. Searching Bar : User can search for any block as per his requirement by Block Name, Chart Type and Module Name.
  2. View All : This will remove any filtration and show all the blocks at a time.
  3. Export Dashboard Tables : It will export the tables in SQL file after confirmation.
  4. Copy Dashboard : You can always copy existing dashboard from other project to current project. Just select the project and block, dashboard will be copied.
  5. Update Code : This will update the code on live server.
  6. List of Blocks : Each block will show block icon and block name.
    • Edit Block Name : hovering mouse on block name, gives option to edit the block name.
    • Edit Block : This will allow to edit configuration of the block.
    • Delete Block : Used to delete the block after confirmation.

Add / Edit New Block

Used to insert new block on the dashboard page.

  1. Block Heading : Write heading which is self-explanatory and meaningful
  2. Block Source : Block source can be anything from Module, Table, View, API, Query or Function.
  3. Select [Source] : Depending on the source you selected for block, dropdown to select the exact source will be populated and you need to select which module / table to be used.
  4. Block Type : How you want to present the data: Detail View, Graph or Chart
  5. Date Filter : Select that value in Date Filter on which you want to apply filter.
    It will display required field in filter dropdown
    • For Grid List or Detail View : Field should be available in listing.
    • For Graph: Field should be available either in Row or in Report Filter.

    After that, you need to select date or date & time from search configuration in the dashboard settings.
  6. Default Graph : If Graph option is selected as Block type, then you can select which type of graph to show: Pivot Table, Pie Chart, Bar Chart, Donut Chart, Area Chart, Line Chart, Horizontal Bar Chart, Stacked Bar Chart, Horizontal Stacked Bar Chart.
  7. Freeze Static Columns : If Block type is selected as either Graph or List, this field will appear where you need to mark if you want to freeze static columns or not. Default is No.
  8. Block Code: This will be taken automatically but editable at the time of adding new block
  9. Block Icon : Unique or identifying icon can be chosen from available icons in the Configure.IT icon library.
  10. Description : Additional information, if you have any.
  11. Auto Update : If you want graph to be auto updated in case of addition/modification in the source or not.
  12. Advance Search : Display Advanced search or not.
  13. Hide Paging : By default, paging will be shown. If you want to hide it, check this. Its recommended not to check this as there can be more records than shown on the first page.
  14. Records per page : How many records do you want to show on each page/
  15. Layout Design : It provides you HTML layout so user can design his own layout.
  16. Settings
    • List of Tables and their fields : Depending upon the block source, it will show list of tables and their respective fields.
    • Listing Fields : Select which fields you want to show as a part of Listing fields
    • Where Condition : If you have any Where condition then you can write here.
    • Grouping Fields : Choose Group By fields, if any.
    • Order By Fields: Choose Order By fields, if Any.

Pages

Listing

Each block is associated with a page so to get the active dashboard, you need to configure page too. Landing page will list down existing pages.

  1. S. No : Just serial number
  2. Dashboard Page Name : Name of the dashboard page
  3. No of Blocks : No of blocks associated with the page
  4. Page View : You need to choose from Simple View and Table View
  5. Status : Need to select from Active & Inactive.
  6. Actions
    • Edit
    • Delete

Add / Edit Dashboard Page

To add new page and configure it to associate with new blocks.

  1. Switch To : Select the block which you want to edit
  2. Configuration
    • Page Heading : Write down the page heading
    • Page Code : This will be taken automatically based on page heading.
    • Menu Name : Not editable, auto-updated
    • Status : Either Active / Inactive
    • Page Layout : Either Simple or Tab view
  3. Configuration Settings
    • Select Dashboard block : Select the block from list to show on page.
    • List of existing blocks : All added blocks will be listed
    • Move : drag & drop feature to move blocks to design the page
    • Edit : Edit block configuration settings
    • Delete : Delete the block from the pag

How to add page to Menu

How to associate dashboard page in Menu navigation?

As user creates Dashboard page, it is necessary to associate it in Menu so user can have access to it whenever he need to have a look.

User need to go to Menu Management and add menu as shown in below screenshot.

Now, you can see “Dashboard” in navigation menu. Just click on that, you will see the dashboard page created by you.

How to associate dashboard page with module?

While adding new module / editing exist module, you will see below options to add dashboard page in module.

At admin side , in edit page of specific module section.

Block Types

How the data should be presented so user can get exact information within seconds as per his requirement.

Let's understand each Chart Type property in detail so user can understand when to use which type and how they are different :

  1. Pivot
    • Select Pivot if a comparative analysis or trending of data needs to be made.
    • Similar to Pivot Charts of MS Excel.
    • 5 types of pivot charts are there → Pivot Table , Bar Chart , Pie Chart , Horizontal Bar Chart , Donut Chart.
    • You can select a default pivot chart to show.
    • The end user will be able to switch between same type of charts.
    • Simple Mathematical operations can be performed for pivot charts.
    • Test Case : Average coupons redeemed per coupon category.
  2. Grid List
    • Select Grid List if data needs to be fetched in the form of a list.
    • Test Case : Last 5 logged in users , List of Active Users.
  3. Detail View
    • Select Detail View if record specific details needs to be displayed.
    • You can design your own Detail View using the HTML layout option. Do your own HTML coding!
    • Test Case : Latest health vitals of a patient , Current room details of a patient.

Every chart type has 3 different blocks. Table Fields , Chart Settings (Listing fields), Field specific settings.

  1. Table fields
    • Shows the list of fields of the main table and the relation tables (if any) of the associated module.
    • The fields from here need to be dragged and dropped to “Listing Fields” for settings.
  2. Chart Settings (Listing Fields)
    • Set Listing fields , apply Where condition , Grouping fields , Order by fields.
  3. Specific field wise property settings

Now, We will see chart settings for all 3 types below

Chart Settings

GRID LIST

DETAIL VIEW

For Grid List and Detail View, the chart settings will have the following sections

  1. Listing Fields : Drag and drop the fields to be displayed in the list
  2. Where Condition : Apply any extra condition if required. The format to be followed for where condition would be,
    • Single Condition : table_alias.eStatus = 'Active'
    • Multiple Conditions : table_alias.eStatus = 'Active' AND table_alias.dRegDate >= '2012-10-10'
    • Request Parameter : table_alias.eStatus = '{%REQUEST.status%}'
    • Server Parameter : table_alias.vIP = '{%SERVER.REMOTE_ADDR%}'
    • Example : REMOTE_ADDR, HTTP_HOST
    • Session Parameter : table_alias.eStatus = '{%SESSION.eStatus%}'
    • Example : iAdminId, vName, vUserName, vEmail, iGroupId, vGroupCode, vGroupName, eStatus
    • System Parameter : table_alias.vName = '{%SYSTEM.COMPANY_NAME%}' Example : COMPANY_ADDRESS, COMPANY_NAME, COPYRIGHTED_TEXT, IMAGE_EXTENSION
    • Note : don't specify the below values as request parameters "file","iModuleId","parModule","parData", "filters","fields","sidx","sord", "export_type","page","rowlimit".
  3. Grouping Fields :Drag and drop the fields on the basis of which field, the list / view needs to be grouped.
  4. Order By Fields : Drag and drop the fields on the basis of which the list needs to be ordered and select the order type ie, whether ascending or descending.
  5. Hide Paging / Latest : Applicable for Grid List only and not for Detail View. If you wish to display only a specific no of records in the list and not all the records, check the Hide Paging box. Then, specify, the no of record you wish to display in the list. For example : Latest 5 Appointments, Latest 10 Coupons Redeemed

Pivot View

For Pivot Charts, the chart settings will have the following sections

  1. Column Labels : Drag and drop the fields to be used as columns.
  2. Row Labels : Drag and drop the fields to be used as rows.
  3. Values : Drag and drop the field on which the mathematical operation needs to be performed.
  4. The mathematical operations available are
    • Sum
    • Count
    • Average
    • Max
    • Min.
  5. Specify the column and row headers.
  6. Report Filter : Drag and drop the fields on the basis of which filtration can be done.
  7. Where Condition : Specify any extra condition if required. The format to be followed has been mentioned earlier in Detailed Section.

Chart Type - Properties

  1. Display Name : The name as it appears in the Dashboard page in the Admin Panel. By default takes the name of the field, but can be changed
  2. Display in Query : A default format is set but user can customize. Also, SQL Functions like CONCAT, LOWER,UPPER can be specified
  3. SQL Function : SQL functions can be specified. For ex : The allowed format is DATE_FORMAT( %q% , '%Y-%m-%d') [%q% will be automatically replaced by the value specified in Display in Query]
  4. PHP Function : Extend the functionality by writing your own PHP functions. The property is Autocomplete and default PHP functions are populated in the list
  5. Width : Specify the width of the column
  6. Sorting : Allows sorting in Ascending and Descending on the basis of selected field
  7. Edit Link : Quick links can be set so that user can be directly redirected to the corresponding page. Quick links can be for the same module or any other related module or even custom / random links can be set
  8. Hide : Set a field to hidden if the field is to be used internally only
  9. Alignment : Set the alignment : left, right or center
  10. Display In : Select the preferred option : Grid (implies the field will be displayed in Grid List) or None (implies the field will be hidden)
  11. Image / File : Image / File type fields can also be displayed in the dashboard blocks.
    • Inline -> Check the box if record to be displayed as an image and not as a path File Server -> Local, Custom, Amazon
    • Folder Name -> Name of the folder in which the images to be stored. The name should be the same as mentioned in the Admin module settings
    • Folder (ID Wise) -> Select the field on the basis of whose ID the images are to be stored Image Width / Height → The size of the image to be displayed (By default 50x50)