Dashboard Blocks

This block is designed to give the end-user an interface where they can customize their dashboard by moving blocks around to wherever suits them. Users can also choose which blocks to actually display on their dashboard. Users can use a simple drag and drop interface to move blocks around. Additionally they are provided with a simple options screen that will let them add new blocks to their dashboard as well as configure the layout options.

Sample Screen

Layouts

Users are provided with a number of layouts to choose from. There are currently 4 basic layout options.

1. Single column
2. Dual Column
3. Triple Column
4. Quad Column

There are also a few variations of the above simple columns. For example, for the two column choices there is a 50/50 layout, a 66/33 layout and a 33/66 layout. You can see all the possible layouts below in the screenshot of the user layout configuration.

If you notice, there is an Add Layout link that the user can click. This lets them add a new row with it's own layout. For example, the user may want a large single column row up top, followed by a 3-column layout.

Admin Configuration

The following configuration options are available:

• Source Page - this is the page that is used to gather available blocks from.
• Title - the the heading title to use for the block on screen.
• Icon CSS Class - if a valid string is provided here it will be displayed to the left of the title in the header.
• Default Layout - The default layout that new users will be given if they have not customized their view yet.
• Blocks - Which blocks are visible by default to new users, and which are required (cannot be removed).
  • Required - If checked the user will not be able to remove the block from their dashboard.
  • Visible By Default - If checked the bock will be visible to the user upon viewing their dashboard for the first time.
  • Default Row - The row number the block will be placed in when it becomes visible for the first time.
  • Default Column - The column number the block will be placed inside the row when it becomes visible for the first time.
  • Default Order - The order (0 on top) the block will be placed in the column when it becomes visible for the first time.

Laying out your dashboard for the first time can take a little trial and error. To help with this you can pass ClearConfig=true on the query string when loading the page and it will clear your user configuration and give you a default dashboard.

Blocks

Available blocks

Any block on the source page that is not a Layout or Site-wide block is made available. Additionally, security is enforced so if the current user does not have View permission to the block it is not available for them to view on their dashboard (they won't even know it exists). Pretty much any block can be used.

Block Entity Context

If a block uses entity context then you may have to provide a bit of trickery to make that context available on the dashboard page. The easy way to accomplish this is to add an HTML block (with no content) to your dashboard page and set it to require Context. This Context is then available to all other blocks.

Supported Block Types

I have not come across any blocks that do not work. I have tested HTML Content, Pie Chart, Liquid Dashboard Widget, Defined Value List and Dynamic Data blocks. The latter two use postbacks and the postbacks function correctly.

User configuration

User configuration is pretty straight forward. Clicking the little gear icon in the top right presents them with a window that allows them to select which layout(s) they want to use and which widgets will display.

Beyond that, each block can be moved around by dragging it from the 3-bar icon in it's header. The block can be deleted either in the options window or by clicking the X in the widget header. Finally each widget can be collapsed or expanded and the state is remembered at next load. So if a user has a block that takes up a lot of space but they only use it once or twice a day, they can collapse it without removing it.

Making things look pretty

If you notice, the dashboard block "widgets" get their own header. This can make things look weird when using something like the Defined Value List block which already has a panel header. There are a few CSS classes you can apply to a blocks Advanced Settings CSS Class to improve the display.

• dashboard-panel-block: Removes the extra padding and borders around the block's panel to make it feel more snug.
• dashboard-panel-hide-title: Hides the header area of the embedded block.
• icon-: You can use these prefixes to indicate which Icon you want displayed in the widget's header. The icon- is stripped out and the remaining class name is used. So if you enter icon-fa icon-fa-line-chart you would end up with the line chart icon of fa fa-line-chart.

Ideas for where to use this block

1. My Dashboard page for staff members.
2. The Extended Attributes page on Person Details.