1. Home
  2. AccessAlly
  3. Teams
  4. Team Dashboard Page Customization

Team Dashboard Page Customization

If you’re using the AccessAlly Teams functionality, and you have AccessAlly Pro then you might be looking to customize the team dashboard.

In this tutorial you’ll see how you can display progress tracking information on the Team “parent” level, like in this screenshot.

Team Dashboard Customization

How To Use The Team Dashboard Feature

You’ll need to have already set up the Teams functionality following these steps.

Once your team is set up, adding progress tracking information is done using ProgressAlly shortcodes. You’ll want to open up the course modules or specific pages that you want to gather progress for, since you’ll need to know the Page ID to use.

This is an advanced functionality that requires comfort with shortcodes.

How to Customize The Team Dashboard

This tutorial shows you how to add progress tracking shortcodes to build a customized Team administration area.

1. Navigate To The Teams Set Up -> Advanced Tab

Choose the Team you want to customize the dashboard for, and click on the Advanced tab. Scroll to the bottom, where you’ll find a section called “User display (Developer only)”.

2. Customize the HTML code

The default code in this section will display the name and email address of the team member, along with the list of custom operations created for this team. It looks like this, if you want to revert to the default:

<div class="accessally-team-client-display">
<div class="accessally-team-client-name">[accessally_user_fullname] ([accessally_user_email])</div>
<div class="accessally-team-client-operations">{{operations}}</div>
</div>

3. Use ProgressAlly shortcodes to show team member progress

Now let’s look at how you can add more progress tracking information, using ProgressAlly shortcodes.

The first thing you’ll need to do is find the Post/Page ID for the part of the course you want to display progress for.

You can find out the Post ID by clicking “Edit Page” and looking at the post=number section in the URL.

Finding the Post/Page ID

Next, you’ll want to include the shortcode using this Post ID, for example to show the progress bar:

<div class="accessally-team-client-display">
<div class="accessally-team-client-name">[accessally_user_fullname] ([accessally_user_email])</div>
<div>
This team member's progress:
<div style="padding-top:10px;padding-bottom:10px;">[progressally_progress_bar post_id="1289" width="250px" height="25"]</div>
</div>
<div class="accessally-team-client-operations">{{operations}}</div>
</div>

3. More Examples of Shortcodes You Can Use

You can include objective lists, progress indicators, and even quiz results. Any shortcode you could display directly on a page can be shown in this higher level team dashboard view. Simply use the Post ID to make sure you’re showing the right data.

<div class="accessally-team-client-display">
<div class="accessally-team-client-name">[accessally_user_fullname] ([accessally_user_email])</div>
<div>
Progress on the "Read Like a Pro Course" so far...
<div style="padding-top:10px;padding-bottom:10px;">[progressally_progress_bar post_id="1289" width="250px" height="25"]</div>
<div style="padding-top:10px;padding-bottom:10px;">[progressally_objectives post_id="1289"]</div>
</div>
On the quiz, they scored: [progressally_quiz_result post_id="1297"] </div>
<div class="accessally-team-client-operations">{{operations}}</div>
</div>

List of Shortcodes

You can use the ProgressAlly shortcode adder on an individual page, then copy and paste it into this team dashboard area and add in the “post_id” parameter to make it work.

Or use these shortcodes directly:

  • [progressally_quiz_result post_id=”#”]
  • [progressally_quiz post_id=”#”]
  • [progressally_progress_bar post_id=”#” width=”250px” height=”25″]
  • [progressally_objectives post_id=”#”]
  • [progressally_last_access_time] To show the last time someone logged into the site

Testing & Troubleshooting

To make sure your code works, you’ll want to load your Team Dashboard and visit it as a team owner. You’ll need to add a team member and you can also login as that team member to mark certain things as done… so you can see the progress reflected back on the team dashboard page.

If you run into any issues, make sure to check your HTML and CSS code, as well the Page/Post ID for the shortcode you’re using.

Updated on November 27, 2018

Was this article helpful?

Related Articles