Basics of the Dashboard

The dashboard acts as a digital toolset for your employees. The dashboard is an important element of the SharePoint home page and provides fast and easy access to information. In simple terminology, the dashboard is a way to present cards to the users. Each card represents a piece of curated information specific to the user and actions that they can take on the card. The dashboard cards can be targeted to users based on their role, department, or location to see the right tools for them to complete the tasks and focus on important information. Therefore, a set of cards shown to frontline workers can be entirely different from the cards shown to information workers.

A dashboard helps employees to stay connected with organization resources such as seeing assigned tasks, sending and keeping track of approval requests, etc. At the same time, the dashboard allows you to offer partner integration with third-party vendors like ServiceNow, Workday, etc.

Dashboard Mobile Experience

As shown in Figure 6-1, the Viva Connections dashboard is available as a mobile experience on iOS and Android as part of the Teams app.

Dashboard Desktop Experience

For the desktop experience, a special web part called “Dashboard for Viva Connections” needs to be added to the home page of the SharePoint home site.

Figure 6-2 shows an example of the dashboard desktop experience .

Dashboard Exploration

The dashboard consists of medium and large cards. Generally, a large card is double the space of a medium card. While designing mobile and desktop experiences, it is essential to place the cards of various sizes together to create an enriching experience.

Define Your Dashboard

The dashboard is available as a feature of a SharePoint communication site . When a site is designated as a home site in SharePoint, we get an extra menu to configure Viva Connections from the Settings menu, as shown in Figure 6-3.

As shown in Figure 6-4, click “Set up Viva Connections ” as a first step in creating the dashboard.

Clicking the “Create Dashboard” button will provision a special page named Dashboard.aspx, under the site pages library of SharePoint home site.

Once a dashboard page is created, the next time you click “Set up Viva Connections” in the Settings menu, you will see the “View Dashboard” button, which will take you to the Dashboard.aspx page.

Multilingual Support for Dashboard

The Viva Connections dashboard now supports multiple languages. That means users will be able to view the dashboard in their preferred language.

Figure 6-5 shows the multilingual support for the dashboard.

On the dashboard page, click Translation in the ribbon to enable a multilingual dashboard experience.

The language translators can translate the title, description, and cards to the requested language.

Add Cards to the Dashboard

By now we have our dashboard ready, so it is time to add some cards to it. The cards can be added for the Microsoft Teams app cards (e.g., Forms, Shift, etc.), web links (internal and external), third-party apps, and custom cards that you can build for your organization. Start by editing the Dashboard.aspx page. The page will let you place your cards for the mobile and desktop views.

Mobile View

The mobile view of the dashboard lets you place your cards for the mobile experience. As shown in Figure 6-6, you can place your cards on a screen by clicking “Add a card.” It is important to note that the mobile view is just the view, not a separate dashboard.

Desktop View

As shown in Figure 6-7, switching to desktop view lets you design the experience for the desktop by adding cards of different sizes.

Add a Card

We can start by adding various built-in cards available by default. As shown in Figure 6-8, as you click “Add a card”, you will notice a few cards you can add to the dashboard.

Let’s explore the built-in cards one by one.

Web Link Card

A web link card helps you to navigate to internal (SharePoint site or page) or external links. As shown in Figure 6-9, configure the property pane to choose your options.

Configure the properties as follows:

• Card size: Select Medium or Large, based on your layout preference.

• Link: Specify the URL to navigate to when clicking the card.

• Card title: Specify the text to be displayed on the top of the card.

• Card description: Specify the text to be displayed under the title on the card.

• Thumbnail: Specify one of the following options:

  • Auto-selected: The image from the page URL specified in the Link property will be displayed.

  • Custom image: A custom image can be set to display .

• Card icon: Specify one of the following options to display an icon on the left of the title on the card:

  • Auto-selected: Select the icon associated with a page.

  • Custom image: Select a custom image to display.

  • Icon: Select a custom icon from a set of stock icons.

• Audience targeting: Specify a Microsoft 365 group, mail-enabled security group, or dynamic group to target the card to display. You can specify up to 50 audiences to target.

Assigned Tasks Card

As shown in Figure 6-10, this card shows the tasks assigned to the user from the Tasks app in Microsoft Teams.

The card has a simple configuration of card size and audiences to target. As shown in Figure 6-11, when configured, clicking Open navigates to the Tasks by Planner and To Do app experience in Microsoft Teams.

Teams App Card

This card allows the creation of cards for Microsoft Teams apps. As shown in Figure 6-12, the card has a simple configuration of card size, Teams app to select, and audiences to target.

• “Select a Teams app ” allows you to select an app from Microsoft Teams.

As shown in Figure 6-13, clicking the card opens the app in Microsoft Teams.

Shifts Card

This card allows tracking the shift information for the current or next shift from the Shifts app in Microsoft Teams. This also allows you to clock in and out and track break times.

As shown in Figure 6-14, the card has a simple configuration of card size and audiences to target.

Approvals Card

This card allows you to send and keep track of requests from the Approvals app in Microsoft Teams.

As shown in Figure 6-15, the card has a simple configuration of card size and audiences to target.

As shown in Figure 6-16, clicking the card opens the Approvals app in Microsoft Teams.

Card Designer Card

The “Card designer” card is a kind of low-code card that can be customized to some extent without custom development.

As shown in Figure 6-17, the card has various properties to configure under five sections.

Section 1: Size and Layout

• Template type: The template for a card can be selected as one of the following:

  • Heading: Shows only the heading on a card

  • Image: Shows the heading and image on a card

  • Description: Shows the heading and description on a card

• Card size: Select Medium or Large based on layout.

Section 2: Card Content

As shown in Figure 6-18, this section defines the content of the card with the following properties.

• Title: Specify the title of your card .

• Icon: Specify a custom image or icon to be displayed alongside the title on the card.

• Heading: Specify the heading of the card that appears following the title.

• Description: Specify the description of the card that appears following the heading.

Section 3: Actions

As shown in Figure 6-19, this section helps to specify actions for clicking a card , as well as allows you to define buttons and their actions.

• Card action: Specify the action to take place with a click of a card. You can specify any of the following actions:

  • Show the quick view: You can specify the adaptive card–based quick view to show, which can be configured in the next section.

  • Go to a link: Specify a link to open when a card is clicked.

  • Go to a Teams app: Specify a deep link to the Microsoft Teams tab or channel.

• Primary button: This is an optional primary button to display on the card. You can specify a title and action on a button.

• Secondary button: This is an optional secondary button to display on the card. You can specify a title and action on a button. The secondary button is available only with the large card size.

Section 4: Quick View Layout and Data

As shown in Figure 6-20, this section helps you specify a quick view for a card that opens as another card when the viewed card is clicked. The quick view is created as an adaptive card.

• The section provides a sample template and data JSON as a base.

  • Template JSON : Defines the controls (e.g., TextBlock, button, etc.) on the quick view card.

  • Data JSON : Defines the placeholder data to be displayed in the template JSON. The placeholder in the template JSON is denoted in curly brackets, for example, ${Text}. The value will be replaced with these placeholders from the data JSON at runtime.

Section 5: Audience Targeting

Specify the M365 group, mail-enabled security group, or dynamic group to target the card to display. You can specify up to 50 audiences to target.

The card when configured displays as shown in Figure 6-21.

When clicked a card , it displays the quick view, as shown in Figure 6-22.

Preview and Publish Dashboard

When you are done with adding and arranging your cards on a dashboard , it is always good to preview it to ensure the correct user experience before publishing it.

Figure 6-23 shows the preview and publish/republish experience of a dashboard.

The preview option enables you to preview of the user experience for each of the audiences applied on the dashboard , as shown in Figure 6-24.

Partner Solutions

Viva Connections allows you to extend the dashboard by adding cards. Various partners and ISVs have already created experiences for IT, HR, finance, employee experiences, and other services that can be easily plugged into Viva Connections.

Also, various other popular service providers are making their experience available to the Viva dashboard so that employees can perform their work and take advantage of service provider capabilities without leaving the dashboard . The companies include Moveworks, Limeade, Tribute, LifeWorks, Talentsoft, StandOut, EdCast, Zebra-Reflexis, BlueYonder, Espressive, and many others.

Custom Development

Every organization has various services and systems that are being used by their employees daily. With Viva implementation, organizations are looking forward to having all of the information in one place, i.e., in Microsoft Teams. Presenting employees with the information they need to work effectively can be achieved by developing custom cards on the dashboard.

If you are looking for an experience beyond what is offered by Microsoft’s out-of-the-box cards, as well as the partner solutions, you can ask developers to build customized cards using the SharePoint Framework (SPFx).

SPFx version 1.13 and onward support creating engaging experiences with cards. We will cover more about that process in Chapter 11.

Employee Dashboard Example with Cards

With first-party, partner, and custom-built cards, organizations can build dashboards for employees by showcasing critical apps and useful resources. The dashboard will help employees to get important information and bring visibility to key metrics.

Figure 6-25 shows an example of an employee dashboard with cards .

The cards should be inclusive for both frontline workers and information workers to surface the resources. The categories that can be covered by cards are as follows.

Conclusion

The dashboard acts as a digital toolset for your employees. A dashboard helps employees to stay connected with organization resources. The dashboard consists of medium and large cards to create an enriching experience for employees. Microsoft has made available first-party cards to start creating simple yet powerful card experiences. Card designer is a low-code approach to extend it further. Custom Adaptive Card Extensions can be built using the SharePoint Framework. Various partners are rolling out their powerful experiences with cards.

In the next chapter, we will explore getting the content ready for the feed with SharePoint and Yammer.