Drupal Intranets with Open Atrium: Creating Dashboard

Exclusive offer: get 50% off this eBook here
Drupal Intranets with Open Atrium

Drupal Intranets with Open Atrium — Save 50%

Discover an intranet solution for your organization with Open Atrium

$26.99    $13.50
by Tracy Smith | January 2011 | Drupal Open Source

The dashboard is a central place to view a snapshot of the activity happening within your departments. This article will explain the three different types of dashboards and how to add custom content to a dashboard.

The article by Tracy Charles Smith, author of the book Drupal Intranets with Open Atrium, is divided into the following five sections:

  • Main dashboard
  • Group dashboard
  • User dashboard
  • Modifying Layout
  • Boxes

 

Drupal Intranets with Open Atrium

Drupal Intranets with Open Atrium

Discover an intranet solution for your organization with Open Atrium

  • Unlock the features of Open Atrium to set up an intranet to improve communication and workflow
  • Explore the many features of Open Atrium and how you can utilize them in your intranet
  • Learn how to support, maintain, and administer your intranet
  • A how-to guide written for non-developers to learn how to set up and use Open Atrium
        Read more about this book      

(For more resources on Drupal, see here.)

Main dashboard

The main dashboard provides an interface for managing and monitoring our Open Atrium installation. This dashboard provides a central place to monitor what's going on across our departments. It will also be used as the central gateway for most of our administrative tasks. From this screen we can add groups, invite users, and customize group dashboards. Each individual who logs in also has the main dashboard and can quickly glance at the overall activity for their company. The dashboard is laid out initially by default in a two column layout. The left side of the screen contains the Main Content section and the right side of the screen contains a Sidebar. In a default installation of Open Atrium, there will be a welcome video in the Main Content area on the left. The first thing that you will notice when you log in is that there is a quick video that you can play on your main dashboard screen. This video provides a quick overview of Open Atrium for our users, and a review of the options you have for working with the dashboard. In the following screenshot, you will see the main dashboard and how the two separate content areas are divided, with a specific section marked that we will discuss later in the article:

Each dashboard can be customized to either a two-column or split layout, as shown in the preceding screenshot, or a three-column layout. Under the Modifying Layout section of this article, we will cover how to change the overall layout. As you can see in the preceding image, the dashboard is divided into three distinct sections. There is the header area which includes the Navigation tabs for creating content, modifying settings, and searching the site. Under the header area, we have the main content and sidebar areas. These areas are made up of blocks of content from the site.

These blocks can bring forward and include different items depending on how we customize our site. For example, in the left column we could choose to display Recent Activity and Blog Posts, while the right column could show Upcoming Events and a Calendar. Any of the features that we find throughout Open Atrium can be brought forward to a dashboard page. The beauty of this setup is that each group can customize their own. In the next section of this article, we will cover group dashboards in more detail. However, the same basic concepts will apply to all the dashboards. After our users are comfortable with using Open Atrium, we may decide that we no longer need to show the tutorial video on the main dashboard. This video can be easily removed by clicking on the Customizing the dashboard link just above the Recent Activity block or by clicking on the Customize dashboard link on the top right in the header section. Click on the customizing the dashboard link and we will see a dashboard widget on the screen. This will be the main interface for configuring layout and content on our dashboard. Now, hover over the video and on the top right you will see two icons. The first icon that looks like a plus sign (+) indicates that the content can be dragged. We can click on this icon when hovering over a section of content and move that content to another column or below another section of content on our dashboard. The X indicates that we can remove that item from our dashboard. Hovering over any piece of content when you are customizing the dashboard should reveal these two icons.

The two icons are highlighted in the following screenshot with a square box drawn around them:

To remove the welcome video, we click on the red X and then click on Save changes and the video tutorial will be removed from the dashboard.

Group dashboard

The group dashboard works the same as the main dashboard. The only difference is that the group dashboard exposes content for the individual departments or groups that are setup on our site. For example, a site could have a separate group for the Human Resources, Accounting, and Management departments. Each of these groups can create a group dashboard that can be customized by any of the administrators for a particular group. The following screenshot shows how the Human Resources department has customized their group dashboard:

 

In the preceding screenshot, we can see how the HR department customized their dashboard. In the left column they have added a Projects and a Blog section. The Projects section links to specific projects within the site, and the Blog section links to the detailed blog entries. There is also a customized block in the right column where the HR department has added the Upcoming events, a Mini calendar, and a Recent activity block.

The Projects section is a block that is provided by the system and exposes content from the Case tracker or Todo sections of the HR website. The Upcoming events section is a customized block that highlights future events entered through the calendar feature.

To demonstrate how each department can have a different dashboard, the following screenshot shows the dashboard for the Accounting department:

The Accounting dashboard has been configured to show a custom block as the first item in the left column, and below that a listing of Upcoming events. In the right column, the Accounting administrator has added a block which brings forward the Latest cases of all the latest cases, exposing the most recent issues entered into the tracking system. It is also worth noting that the Accounting department has a completely different color scheme from the Human Resources department. The color scheme can be changed by clicking on Settings | Group Settings | Features. We can scroll down to the bottom of the screen and click on BACKGROUND to either enter a hexadecimal color for our main color or pick a color from the color wheel as displayed in the following screenshot:

Spaces

Spaces is a Drupal API module that allows sitewide configurable options to be overridden by individual spaces. The spaces API is included with our Open Atrium installation and provides the foundation for creating group and user configurable dashboards. Users can then customize their space and set settings that are only applied to their space. This shows the extreme power and flexibility of Open Atrium by allowing users to apply customizations without affecting any of the other areas of Open Atrium. Users can use the functionality provided by spaces to create an individualized home page.

Group spaces

Group spaces provide an area for each group or department to arrange content in a contextual manner that makes sense for each group. In the preceding examples, the content that is important to the accounting department is not necessarily important to the human resources department. Administrators of each department can take advantage of Open Atrium's complete flexibility to arrange content in a way that works for them.

The URLs in the example that we have been looking at are listed as follows:

Each URL is composed of the site URL, that is, http://acme.alphageekdev.com/ and then the short name that we provided for our group space, hr and acct.

 

User spaces

User spaces work in the same way that the group dashboard and spaces work. Each user of the system can customize their dashboard any way that they see appropriate. The following screenshot shows an example of the user's dashboard for the admin account:

In the preceding screenshot, we have drawn a box around two areas. These two areas represent two different group spaces showing on the user's dashboard page. This shows how content can be brought forward to various dashboards to show only what is important to a particular user.

Drupal Intranets with Open Atrium Discover an intranet solution for your organization with Open Atrium
Published: January 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Drupal, see here.)

Modifying the dashboard

In this section, we will go through the steps necessary to modify either a group or user dashboard. For this exercise we will create a new group, enable features, and then customize the group's dashboard. Start by clicking on the large dashboard icon as indicated in the following screenshot:

Now click on the Create content button on the far right and then click on Group as indicated in the following screenshot:

 

On the create group screen, we will provide a title and description for the group. Then we will assign the group a unique URL, so that it can be accessed directly. By default group spaces are considered private. On the group create screen, we will have the option to mark the group as public or private.

Private group
A private group is accessible only to users added to that group by one of the group's managers.
Public group
A public group is accessible to all users on the site. Users can join and leave public groups freely.

Examples of a private group would be the Human Resources and Accounting groups. These groups are only accessible by users who have been given explicit membership to the group. A public group would be open to anyone in the company to join. For example, we might want to create the following publicly accessible groups:

  • Social activities
  • Initiatives
  • Company events

For now, we will create a private group for the Information Technology department. Fill out the group create form, as indicated in the following screenshot:

The fields should contain the following:

Title: Information Technology

Description: This group will include all members of the Information Technology department.

Path: http://acme.alphageekdev.com/it (your URL may be different)

Select Private group

Click on Save.

You can optionally add/change the author information. This option is useful if you have an administrator setting up a number of group sites and would like to designate a different user as a "group manager" for a particular site.

After clicking on Save, the browser should refresh and we should be on the dashboard for the Information Technology group as shown in the following screenshot:

When you create new groups, the default dashboard layout is used to create the dashboard.

Layout

To change the layout of the dashboard, click on the Customize dashboard button that is just above the right column. You should then see a pop-up window that looks like the following:

This pop-up may not be intuitive at first, but it is very powerful in allowing us to move items around. The first thing we want to do is expand the drop-down for Layout.

Here we have the following four choices:

  • Site default
  • Default
  • Columns
  • Split

Each of these options will select a different layout. For example, the Split option will split the page, so that there are two columns of equal width across the page. We will select a layout by clicking on Change layout. Similarly, we can try out each option. If we decide we do not like a particular layout, then we can click on Customize dashboard again after the page has been refreshed. You can try each option by clicking on Customize dashboard after the page has been refreshed.

Block items

The next customization that we will cover is what appears in each section on the group dashboard. Under the drop-down box we can review the list of components (features) that we can select from, to add a block related to that piece of content.

In this example, we will walk through setting up a mini calendar and adding a customize block containing a Message of the Day.

Calendar

In the drop-down under Layout, select Atrium Calendar as indicated in the following screenshot:

You will see two options just below the drop-down. Here you can drag and drop items directly onto the dashboard. In this case, we want to click on the Mini calendar item and drag it onto the column on the right side. We may have to try this a few times to get the positioning just right. Basically, all we have to do is drag the Mini Calendar over an area until we see the dotted box, as indicated in the following screenshot:

Once you have the dotted border, you can let go of the mouse button and the mini calendar will be inserted onto the page. Wait a second or two while the calendar is rendered and then click on Save changes on the layout pop-up. It may look a little weird and not like a calendar when it is first rendered, but once you click on Save it will show up like a regular calendar.

Message of the day

Click on Customize dashboard again, and then select Boxes in the category drop-down. We should see an option to Add custom box, as shown the following screenshot:

Now you can click on the Add custom box option and drag it over to the left column and drop it onto the page. After a couple of seconds, the box will change and allow you to add information for the block. Here you can add a Box description, Title, and Body. We also have the option of selecting an Input format which will allow us to insert text using Full HTML, Markdown, or Plain text syntax. To change the Input format, click on the plus sign (+) to the left of the Input format text to expand that section. We can click on the Formatting help link for additional information.

 

For this example, we can use the following values:

Box Description: Daily Message

Box Title: Message of the Day

Box Body: Type any message you like here

Click on Save.

Now, we can click on Save changes on the layout pop-up and our Message of the Day box will be added as indicated in the following screenshot:

Now, we can continue to add additional blocks, and practice moving items around on the page. We can always click on Cancel on the Dashboard layout pop up.

Summary

In this article, we covered the basics of how to administer the Dashboard section of Open Atrium. Each site has a central dashboard, and each group or department within a site will have a built-in default dashboard. Then we learned about Spaces, which allow each group or user to override various site wide settings and create their own dashboard or space.

Then we went over how to create a group and how to modify the layout of the group's dashboard page. The layout is customized by selecting a particular layout from the drop-down menu and then clicking on Save Changes. Then we worked with the layout pop up to add a mini-calendar to the right sidebar, and add a custom block titled Message of the Day to the left column.


Further resources on this subject:


Drupal Intranets with Open Atrium Discover an intranet solution for your organization with Open Atrium
Published: January 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Tracy Smith

Tracy Smith began working with computers at the age of 10. His experience includes network integration, programming, finance, database design, and project management. Tracy enjoys working creatively with clients to help architect their overall vision and break it down into smaller technical pieces.

Tracy currently works as a Web Developer for Phase 2 Technology, based in Alexandria, VA. He is the founder of Alpha Geek Tech, LLC, a technology consulting firm. His web experience began in the dot-com era when he worked for Flipside.com. He is actively involved in the developer community and while working as the Technology Director for Quiddities Dev, Inc he spent his free time as the lead programmer and architect for 12seconds.tv.

He holds a B.S. in Computer Information Systems and Business Administration from Wingate University.

Books From Packt


Drupal 7
Drupal 7

Drupal 6 Attachment Views
Drupal 6 Attachment Views

Drupal Web Services
Drupal Web Services

Drupal 6 Performance Tips
Drupal 6 Performance Tips

Drupal 6 Panels Cookbook
Drupal 6 Panels Cookbook

Drupal 6 Theming Cookbook
Drupal 6 Theming Cookbook

Flash with Drupal
Flash with Drupal

Drupal 7 Module Development: RAW
Drupal 7 Module Development: RAW


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software