Szerkesztés

Megosztás a következőn keresztül:


Create a Viva Connections dashboard and add cards

The Viva Connections dashboard provides fast and easy access to information and job-related tasks. Content on the dashboard can be targeted to users in specific roles, markets, and job functions. The dashboard consists of cards that engage viewers with existing Microsoft Teams apps, Viva apps and services, partner apps, custom solutions using the SharePoint Framework (SPFx) framework, internal links, and external links.

Screenshot that shows a Dashboard example for desktop and mobile.

This article includes:

Edit the dashboard

The Viva Connections dashboard can be edited right from Microsoft Teams. You need member or owner level permissions to get started.

Diagram of how to create a Viva Connections Dashboard.

Note

  • When setting up Viva Connections for the first time, you’ll be asked to choose a set of default cards based on the intended audience.
  • You can choose mobile and desktop views interchangeably as you’re authoring.
  • Image recommendations for cards in the dashboard: medium cards should be 300x150 to 400x200 with 2:1 aspect ratio and large cards 300x300 to 400x400 with 1:1 aspect ratio to prevent stretching in the mobile app.
  • Image URLS in card properties must be an absolute URL for the link to work in the mobile app.
  • It's recommended to limit the number of cards to about 20 on the dashboard for the best viewing experience.
  • Users will be able to customize their dashboard on Viva Connections mobile by reordering, hiding, and showing cards. These changes only affect the mobile experience for the user and will not affect their desktop or tablet experience.
  1. Navigate to the Viva Connections app in Teams.

  2. Next, select Edit in the dashboard section.

  3. Select + Add a card.

  4. Select Edit (pencil icon) for each card to edit properties like the label, icon, image, and audience targeting settings where applicable.

  5. Select Delete (trash can icon) to remove cards.

  6. Preview the experience on all devices to ensure usability before publishing or republishing.

  7. Publish or Republish when you're done to share the edits with others.

How to edit the dashboard from SharePoint when you have a home site

If your organization has a SharePoint home site, you can set up and edit the dashboard from the SharePoint home site or in Microsoft Teams. You need edit permissions for the SharePoint home site to make changes.



Note

Images are an important aspect to making your cards rich and inviting. If you're a SharePoint admin, we recommend enabling a Content Delivery Network (CDN) to improve performance for getting images. Consider when storing images that /siteassets is by default a CDN source when Private CDN is enabled while /style library is the default source when the Public CDN is enabled. Learn more about CDNs.

  1. From the SharePoint home site, select the Settings gear at the top-right of the page.

  2. Select Manage Viva Connections.

  3. Select the + Create dashboard or View dashboard button.

  4. Select + Add a card.

  5. Select the type of card you want to add from the dashboard card toolbox and then use the instructions within this article to set up each type of card. As you’re building the dashboard, you can preview its appearance in mobile and desktop for different audiences.

  6. When you're done adding cards and applying targeting to specific audiences, Preview the experience to ensure an ideal viewing experience.

  7. Once you’re satisfied with how the dashboard looks in preview, select Publish or Republish at the top-right of your dashboard to make it available for use on your home site, in Teams, and in the Teams mobile app.

Available dashboard cards

Card Name Toolbox icon Description
Card designer Illustration of the card designer icon. Create your own cards or use quick views for a more interactive experience utilizing the adaptive cards framework.
Approvals Illustration of the approvals card icon. Use Approvals to approve vacation requests, documents, and expense reports.
Assigned Tasks Illustration of the assigned tasks card icon. Use Tasks to manage your team's work, assign tasks, and track tasks.
Assignments Illustration of the Assignments card icon. Display a summary of upcoming and past due assignments for students.
Courses Illustration of the Courses card icon. Display a summary of courses a student is enrolled in.
Events Illustration of the Events card icon. View and join upcoming events within your organization.
News Illustration of the News card icon. Promote news from various sources that you wish to prominently display, including boosted news from SharePoint.
OneDrive Illustration of the OneDrive card icon. View and access recent, shared, and favorite files from your OneDrive account.
People Illustration of the People card icon. Provide an option to look up contact information and directly chat, email, or call with others in your organization.
Quick links Illustration of the Quick links card icon. Provide list of relevant links or files to users selected by admins.
Shifts Illustration of the shifts card icon. Display information about the next or current shift from the Shifts app in Teams.
Stream playlist Illustration of the Stream play list card icon. Display a list of videos to users that can be viewed in Microsoft Stream.
Teams app Illustration of the Teams app icon. Use to open a Teams personal app or bot specified by the dashboard author.
Partner cards Varies Use cards that integrate partner services.
Topics Use Topics cards to encourage knowledge discoverability, engagement, and sharing.
Viva Learning Illustration of the Viva Learning card icon. Provide a link to the Viva Learning app that can be targeted to show to certain audiences.
Viva Pulse Illustration of the Viva Pulse card icon. Provide a short status of a recently sent pulse with a link to the Viva Pulse app for users to learn more.
Web link Illustration of the web link card icon. Access a site without leaving the Viva Connections app

Design your own card with the card designer

Use the Card Designer to create cards that can link to other sites, open media, display a location, open a teams app, and more. Card designer gives users the ability to quickly build "custom" cards without the need for custom code by using a template with the option to create a secondary view, also called a quick view.

Quick view is a powerful tool that enables the card designer to create cards that go beyond the traditional dashboard cards to create something interactive and informative using Adaptive Card JavaScript Object Notation (JSON). You're able to "code" a single quick view by using the power of Adaptive Card markup to make their cards dynamic. The result can be previewed within the card designer before sharing with others.

Note

To design your own cards using quick view, you should be familiar with JSON and Adaptive Card templates. For more information, see Adaptive Cards Templating.

Screenshot showing an example of a large card created with the card designer for celebrating birthdays with a button to congratulate displayed.

Use a card template

The card designer has a set of card view templates that can be used to easily create cards with helpful information, links, and media. The following steps walk you through creating a new large sized card using the image template to create a link for users.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Card designer.

    Screenshot that shows the icon to select to add a Card designer card.

  3. After selecting the Card designer card, select the Edit icon to open the property pane.

  4. As you create your card through selecting options, a preview of how the card looks appears to the left of the options.

    Screenshot showing an overview of the card designer properties pane.

  5. Under Template type, select one of three templates to apply:

    • Heading: Create a card with a simple heading.
    • Image: Create a card with a heading and image.
    • Description: Create a card with a heading and description.

    Note

    Buttons are disabled when selecting the Image template for a medium sized card, but a card action can still be assigned to trigger when the user selects the card.

    Depending on the template type chosen, fields matching the template type populates in the card content section. For example, if you chose the Image template, you can enter values for the Image and Heading properties in their respective text boxes.

  6. Select a card size:

    • Medium: the default card size and allows you to add one button to the Heading and Description templates.
    • Large: takes the space of two medium cards together and allows the use of two buttons.

    Screenshot showing options under the layout and size category in the properties pane.

  7. Under Card icon select one of the following options:

    • Custom image: Select custom image then Change to upload your own image or select an existing image from your site or from an online source (for example, web search, OneDrive, Site).
    • Library: Select an icon from a pre-existing list of available icons. For example, select Library then Change to choose a new icon.

    Note

    When uploading custom images for your icons, we recommend using PNG images between 24x24 and 32x32 pixels.

  8. Enter a Title to be displayed at the top of your card.

  9. Enter a Heading.

  10. Depending on the template type chosen, enter values for the properties corresponding to your selection below the heading field. For this example, the image template is being shown:

    • Image: Select change to upload your own image or select an existing image from your site or from an online source (for example, web search, OneDrive, Site).

      Screenshot showing options under the card content category in the properties pane.

  11. Under card action, select an action to be performed when a user selects the card. Depending on the action selected, more fields appear to customize the action.

    Note

    The card action cannot be disabled.

    • Show the quick view: Select to use JSON code to create a more interactive dashboard card. If selected, the Save button changes to Next, which leads to more settings for customizing your quick view card. For steps on using quick view, refer to add a quick view to a card.

      Note

      One quick view is available for each card, which can be opened as the card action, or by using a button.

    • Go to a link: Enter a URL to direct users to.

    • Go to teams app: the user is directed to the specified teams app by the URL provided (admins can also use the appID to direct users to the appropriate Teams app. For more information, see Deep link to an application.

    For example, selecting Go to a link from the dropdown displays a field for entering the link.

  12. Under Link, enter the URL you wish users to be directed to.

  13. Buttons can be toggled on and off (where available). If enabled, the same values found under card action can be selected for the Primary and Secondary buttons.

    Note

    When using a medium sized card, only one button can be enabled using the heading or description template. The image template will disable the use of buttons when medium size is selected.

    For this example, the Primary button is set to direct users to the same link as the card action. The Secondary button is disabled.

    Screenshot showing options under the actions category in the properties pane.

  14. Under Audiences to target enter one or more groups to target so only those audiences specified see the card in the dashboard. For more information, see audience targeting in Viva Connections.

    Screenshot showing options under the audience targeting category in the properties pane.

  15. Select Save to save the updates to your card.

Add a quick view to a card

Quick view allows you to add adaptive card JSON code to Dashboard cards to provide a more comprehensive, interactive, and engaging experience to users. By using static or dynamic data sources (like SharePoint Representational State Transfer (REST) API or Microsoft Graph API), cards can be created that provide information within the Connections experience, without the user having to navigate away.

To get started, follow the steps in Use a card template up to selecting a Card action.

  1. Under card action select Show the quick view.

  2. Finish setting up your card by enabling or disabling buttons and selecting actions for active buttons.

    Note

    One quick view is available for each card, which can be opened as the card action, or by using a button.

  3. Select Next to display the quick view layout.

  4. A preview of how the card looks on the dashboard displays to the left of the options.

    Screenshot selecting show the quick view from a dropdown of options under the actions category in the properties pane.

    Note

    The Adaptive Card designer tool can be used to help create the JSON Template and Data code for your card. For more information on the adaptive card structure and creating adaptive cards, see Getting Started - Adaptive Cards.

  5. In the Template JSON field, enter your JSON code that contains the structure of your Adaptive Card.

    Screenshot showing the quick view options in the properties pane.

  6. Under Type of Content, select one of the following options for your data set:

    • Static: displays static information and must be manually updated.
    • Dynamic: integrates with data sources from SharePoint API or Microsoft Graph to automatically update content.

    Note

    Selecting Dynamic content will display additional options allowing you to select the data source and API endpoint.

Selecting Static as the type of content

  1. In the Data JSON field, enter your JSON code that contains the data to be displayed within your Adaptive Card.

  2. In the Audiences to target field, enter any audiences you wish to target the card to.

  3. Select Save to your updates.

    Screenshot showing static content selected with the Data JSON field displayed in the properties pane and a preview of the finished card.

Selecting Dynamic as the type of content with SharePoint as the data source

  1. From the Data Source dropdown, select SharePoint API.

  2. In the API endpoint, enter the REST URL endpoint you wish to use.

    For example, if you wanted to retrieve the title of a SharePoint site, you would enter title in the API Endpoint field (since web/ is already part of the default prefix). See this article for more examples of SharePoint REST endpoints.

  3. The Data JSON response preview will open and display the code used. A preview of how the card looks on the dashboard appears to the left of the property pane.

  4. In the Audiences to target field, enter any audiences you wish to target the card to.

    Screenshot showing dynamic content selected with SharePoint API as the endpoint and the Data JSON field displayed in the properties pane.

  5. Select Save to save your updates to your custom card.

Selecting Dynamic as the type of content with Microsoft Graph as the data source

  1. From the Data Source dropdown, select Microsoft Graph.

  2. Select the Graph version from the dropdown (where version is the target service version, usually 1.0).

  3. In the API endpoint, enter the REST URL endpoint you wish to use.

    For example, if you wanted to retrieve the profile and photo of a specific user, you would enter the Microsoft Graph REST URL me/photo/$value in the API Endpoint field. See more common use cases in 1.0 for Microsoft Graph REST API here.

  4. The Data JSON response preview will open and display the code used and a preview of how the card looks on the dashboard appears to the left of the property pane.

  5. In the Audiences to target field, enter any audiences you wish to target the card to.

    Screenshot showing dynamic content selected with Microsoft Graph API as the endpoint and the Data JSON field displayed in the properties pane.

  6. Select Save to save updates to your custom card.

Add the Approvals card

The Approvals card connects to Approvals in Microsoft Teams and is a way to streamline all of your requests and processes with your team or partners. You can create new approvals, view the ones sent your way, and see all of your previous approvals in one place.

Screenshot of an approvals card.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Approvals from the dashboard toolbox.

    Screenshot showing an approvals card.

  3. Select the pencil icon to Edit the card. In the property pane that opens on the right side of the screen, choose your card size from the Card size drop-down list.

    Screenshot showing an approvals card in the dashboard.

  4. Once you’re satisfied with how the dashboard looks in preview, select Publish or Republish at the top-right of your dashboard to make it available for use on your SharePoint home site, in Teams, and in the Teams mobile app.

Add the Assigned tasks card

The Assigned tasks card allows users to create and view tasks from the card or open the Planner app from the card. Task information is retrieved from the Planner app in Teams.

Screenshot of an assigned tasks card.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Assigned Tasks from the dashboard toolbox.

    Screenshot showing a tasks card in the dashboard.

  3. In the property pane on the right, choose your card size from the Card size drop-down list.

    Note

    The size of the card will affect how many buttons are available on the card. The Add tasks and Open Planner buttons appear on large cards (default size), while on medium sized cards only the Add tasks button is shown.

    Screenshot showing how to choose a card size.

  4. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

For more information on using the Planner app, see the articles on how to Manage the Planner app for your organization in Microsoft Teams and Getting started with Planner in Teams, or see the blog post announcing the Assigned tasks card.

Add the Assignments card

The Assignments card displays a summary of upcoming and past due assignments. Students can select the card to view more details on their assignment list and open them in Microsoft Teams.

Note

The Assignments card is only available to Education tenants.

Screenshot of an Assignments card.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Assignments from the dashboard toolbox.

    Screenshot showing the Assignments card in the dashboard toolbox.

  3. In the property pane on the right, choose your card size from the Card size drop-down list.

  4. Enter a Title for the assignments card.

  5. To change the card image, select Change, then select an image or upload your own.

  6. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

    Screenshot showing the assignments property pane.

Add the Courses card

The Courses card displays a summary of courses a student is enrolled in. Students can select the card to view their course list and open them in Microsoft Teams.

Note

The Courses card is only available to Education tenants.

Screenshot of the Courses card.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Courses from the dashboard toolbox.

    Screenshot showing the Courses card in the dashboard toolbox.

  3. In the property pane on the right, choose your card size from the Card size drop-down list.

  4. Enter a Title for the assignments card.

  5. To change the card image, select Change, then select an image or upload your own.

  6. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

    Screenshot showing the courses property pane.

Add the Events card

The events card can help your users stay informed and engaged with upcoming events in their organization, such as webinars, trainings, town halls, and celebrations. Users can view more upcoming events or join via teams via the links on the Events card. The card can be customized and even targeted to specific audiences so only relevant events are displayed.

The Events card is tied to the SharePoint Events web part. Site owners and members need to access their SharePoint site and use the SharePoint Events web part to add events to their site. For more information, see the article on using the Events web part.

Screenshot demonstrating the Events card as it displays upcoming events.

Note

Recurring events are not supported, even if you manually set up a recurrence in the events list that you are using. You'll need to create a new event for each occurrence.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Events from the dashboard toolbox.

    Screenshot of the Events card icon.

  3. Select the edit pencil to the left of the card to open the properties pane for the Event card.

  4. In the property pane on the right, choose your card size from the Card size drop-down list.

  5. Enter a Title for the event card.

    Screenshot of the Events card properties pane.

  6. Under Content, select a Source for your events: Events list on this site, This site, This site collection, Select sites, or All sites. If your site is connected to a hub site, you'll also able to select All sites in the hub or Select sites from the hub.

    Note

    • When you choose Select sites, you can search for the site you want to add, or select one or more sites from Frequent sites, or Recent sites. You can select up to 30 sites.
      • The Select sites option is not available in SharePoint Server, U.S. Government GCC High and DoD, and Office 365 operated by 21Vianet.
    • If there is more than one events list on the site, you can select the one you want. If you don't have an existing list, the Events card creates an empty Events list for you, with the default settings of a Calendar list.
    • If you choose to show events from multiple sites, and don't see all of your events displayed on the page, see How events from multiple sites are found and displayed.
  7. If your list has categories, you can select one by which to filter the events you show.

  8. Select a date range by which to filter your events in the Date range drop-down list. You can choose All upcoming events (the default), This week, Next two weeks, This month, or This quarter.

    Screenshot of the content section in the Events card properties pane.

  9. Under the layout section, select how many events to be shown at once from the dropdown. Up to 30 events can be shown on one event card.

    Screenshot of the layout section in the Events card properties pane.

  10. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), enable audience targeting. For more information on audience targeting, see Audience targeting.

    Screenshot of the audience targeting section in the Events card properties pane.

  11. When finished with your selection, you can close the panel. Your settings will autosave.

Add the News card

Add the News card to the Viva Connections Dashboard to promote news from various sources that you wish to prominently display, including boosted news from SharePoint. If you choose a boosted news post, they'll display in the News card during the boost period.

Screenshot of a News card.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select News from the dashboard toolbox.

    Screenshot of the News card icon.

  3. Select the edit pencil to the left of the card to open the properties pane for the News card.

  4. Add a title and select a card size.

  5. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information, see the section on Audience targeting.

  6. For a news source, select one of the following options:

    • Boosted posts: Displays any SharePoint boosted news posts from the organization's news sites only. The word "Boosted" displays at the top of the card.  

    • From this site: Pulls news from the hub site that the current site is a part of.

    • From all sites in this hub: Pulls news from all sites within your SharePoint hub.

    • Select sites: Pulls news from one or more individual sites (if selected, a list of sites associated with your SharePoint hub displays).

    • Recommended for current user: Displays news posts for the current user from people the user works with; managers in the chain of people the user works with, mapped against the user's own chain of management and connections; the user's top 20 followed sites; and the user's frequently visited sites.

    Screenshot showing the News card properties pane.

Add the OneDrive card

The OneDrive card (previously known as Files) connects individuals to their own recent, shared, or favorite files in their OneDrive account. Users can review files they have access to from their Connections experience and open them from the OneDrive card.

Note

Office files like Word, PowerPoint, and Excel will be opened in their respective Teams app. All other file types will be opened in their respective web or local app.

Screenshot demonstrating the OneDrive card displaying recently accessed files.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select OneDrive from the dashboard toolbox.

    Screenshot of the OneDrive card icon.

  3. Select the edit pencil to the left of the card to open the properties pane for the OneDrive card.

  4. In the property pane on the right, enter a Title for the OneDrive card.

  5. Choose your card size from the Card size drop-down list.

    Screenshot showing card size options in the OneDrive card properties panel.

  6. Select a Source for files to be displayed from:

    • Recent: Recent files the user accessed display.
    • Shared: Files that shared with the user display.
    • Favorites: Files that the user marked as "favorite" display.
  7. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), enter one or more Microsoft 365 groups into the Audience targeting field. For more information on audience targeting, see Audience targeting.

    Screenshot showing file source and audience targeting options in the OneDrive card properties panel.

Add the People card

The People Search card automatically retrieves contact information from members of your organization using Microsoft Entra ID. Users can access the People Search card to look up contact information and can jump into chat, email, or a call with the contact directly from the card view.

Screenshot demonstrating the People card in action looking up contact information.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select People from the dashboard toolbox.

    Screenshot of the People card icon.

  3. Select the edit pencil to the left of the card to open the properties pane for the People card.

  4. In the property pane on the right, choose your card size from the Card size drop-down list.

  5. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

    Screenshot of the People card properties pane.

Use the Quick links card to provide a list of relevant links or files selected by admins to users. Users can select the link to be taken to the respective web page or file.

Screenshot of the Quick links card in action.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Quick links from the dashboard toolbox.

    Screenshot of the Quick links card icon.

  3. Select the edit pencil to the left of the card to open the properties pane for the Quick links card.

  4. In the property pane on the right, enter the title for the Quick links card.

  5. To change the card image, select Change, then select an image or upload your own.

  6. Select a card size for the Quick links card.

    Screenshot of the Quick links properties pane showing card customization options.

  7. Under links, select + Add link to add a URL, SharePoint page, or files. Added links show below the + Add link button. You can add up to 20 links.

  8. Once added, links can be edited in the following ways:

    • Rearrange – Select and drag to the left of the link to reposition it within your quick link list.
    • Delete – Select the trashcan to delete the selected link.
    • Edit – Select the arrow to edit the link URL, title, and thumbnail image.
  9. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

    Screenshot of the Quick links properties pane showing where you can manage links and audience targeting.

Add a Shifts card

The Shifts card shows users information about their next or current shift from the Shifts app in Teams. They can also clock in and out and track break time when Time clock is enabled in Teams.

Screenshot of a shifts card.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Shifts from the dashboard toolbox.

    Screenshot showing a Shifts app card.

  3. In the property pane on the right, choose your card size from the Card size drop-down list.

  4. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

Add a Stream playlist card

The Stream playlist card displays a list of videos to users that can be viewed in Microsoft Stream by selecting an existing playlist from a SharePoint site. For more information, see the article on creating a playlist from SharePoint.

Note

The Stream playlist card is currently rolling out and will be fully available by early September 2024.

Screenshot showing the Stream playlist card in action.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Stream playlist from the dashboard toolbox.

    Screenshot of the Stream playlist icon.

  3. Select the edit pencil to the left of the card to open the properties pane for the Play list card.

  4. In the property pane on the right, choose your card size from the Card size drop-down list.

  5. Under source, select a SharePoint site that has the playlist you wish to display. You can search for a SharePoint site by its title, URL, or select from a list of frequented sites.

    Screenshot of the Stream playlist properties pane showing options for selecting a source from SharePoint

  6. Under playlist, select the playlist from the drop-down of available playlists found from your selected source.

  7. Enter a Title and Description for the selected playlist.

  8. Under sort, select one of the following options:

    • Playlist Order: Videos play in the order set within the selected SharePoint playlist.
    • Last Created: Videos play in order based on the date they were last created.
    • Last Updated: Videos play in order based on the date they were last updated.
  9. Under Image, select Auto-selected or Custom image:

    • Auto-selected: Displays an image for your playlist that comes from your selected SharePoint page.
    • Custom image: Select custom image then Change to upload your own image or select an existing image from your site or from an online source (for example, web search, OneDrive, Site).
  10. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

    Screenshot of the Stream playlist properties pane showing playlist customization options.

Add a Teams app card

A Teams app card allows you to create a card for an existing Teams app.

Screenshot of a teams app card.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Teams app from the web toolbox.

    Screenshot that shows the icon to select to add a Teams app card.

  3. In the property pane on the right side of the page, select your options.

    Teams app property pane.

  4. Select a size for the card from the Card size drop-down list.

  5. Search for the Teams app you want to use, and then select it from the list.

  6. Set the card-display options:

    • Enter a title for the card in the Card title text box. (This title won't change your page title; it's the title that is displayed on the top of the card.)
    • Enter a description for the card in the Card description text box. This description is displayed in larger text under the title.
  7. If you want to target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

Add a partner card or Microsoft app

The Viva Connections dashboard and mobile experience can be extended and customized using cards, which are based on adaptive cards and the SharePoint Framework (SPFx). These adaptive cards are used to display data, complete tasks, and connect to Teams Apps, Websites, and mobile apps on Viva Connections. They provide a low-code solution to bring your line-of-business apps into the dashboard.

To create custom experiences on Viva Connections dashboard and Viva Connections Mobile App, developers must use the SPFx to create custom Adaptive Card Extensions (ACE). To learn more about creating ACE, see the following tutorial: Build your first SharePoint Adaptive Card Extension. Learn more about Viva Connections extensibility.

Add a partner card

There are three ways to get partner apps and solutions integrated with the Viva Connections dashboard. The following image shows an example of a partner card.

Screenshot of a partner card.

Option 1: Discover and request apps from the Viva Connections card toolbox

Partner cards and an entry point to browse more cards in the app store will automatically display in the card toolbox. Depending on your level of permissions, you might need to request the app before it can be used on the dashboard. Learn more about managing partner apps.

Note

  • Site owners managing the Viva Connections dashboard will need to request partner apps before they are available in the card toolbox.
  • Some partner apps require a service plan agreement with your organization.

This screenshot is of the card toolbox section that displays partner cards.

  1. While in edit-mode, select + Add card from the dashboard.
  2. Partner options appear in the Suggested cards section. Select one of the cards displayed or browse more cards by selecting Add more cards.
  3. Request the cards you’d like to add to the toolbox and the requests will be sent to the App Catalog Admin for their approval.
  4. You'll receive an email to confirm if your request has been approved or denied by the App Catalog Admin.
  5. Once your request has been approved, refresh the page to see the new card display in the toolbox.

Option 2: Acquire the app from a Microsoft AppSource or the SharePoint store

  • If you're building a dashboard, you can request the app directly, but you need approval from an admin of the tenant-level app catalog to continue with the installation
  • If you're an admin of a tenant-level app catalog, you can deploy business apps directly. You can acquire apps from non-Microsoft developers by browsing the Microsoft AppSource or SharePoint store (recommended).

Get step-by-step guidance on how to request and deploy an app, and add an app to your site. For tenant admin, learn how to manage apps in the App Catalog.

Option 2: Acquire the app directly from the partner developer

Note

SharePoint administrative permissions are required to complete this task.

You can request apps directly from the Viva Connections partner developers and partners. Admin permissions are required to add the app to tenant level app catalog.

Add a Microsoft app as a card on the dashboard

A Microsoft app card allows you to create a card that links to Microsoft apps (For example: Shifts, Approvals, Task, etc.). Microsoft apps cards are available out of the box when Viva Connections is enabled.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select the Microsoft App you want to add from the web toolbox.

    Screenshot of how to find a Microsoft app in the card picker window.

  3. Select your options in the property pane on the right side of the page.

  4. When you Republish, the card appears on your dashboard.

Add a Topics card

Topics has two different cards. The Topics Contribute card can be used to reach people who are known knowledge managers and are already engaged with topics and knowledge areas. Topics and knowledge areas are dynamically displayed in the card based on the viewers interests, current projects, and expertise. The Topics Discover card can be used to view topics and knowledge areas for people who could be interested in learning more or contributing to a topic.

Learn more about the two different cards.

Screenshot Topics Contribute card.

Add a Viva Learning card

The Viva Learning card provides users quick-links to recommended trainings, and can be set to target specific trainings to certain individuals. Users can easily access their required trainings by selecting the Viva Learning link.

Content in the cards is dynamic and changes according to settings in Viva Learning. The following are three examples of Viva Learning card states that display different information depending on the viewer and Viva Learning settings.

Screenshot of the Viva Learning card displaying general learning opportunities. Screenshot of the Viva Learning card notifying the user of a required training due. Screenshot of the Viva Learning card notifying user of upcoming required trainings.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Viva Learning from the dashboard toolbox.

    Screenshot of the Viva Learning card icon in the dashboard toolbox.

  3. In the property pane on the right, choose your card size from the Card size drop-down list.

    Screenshot of the Viva Learning property pane.

  4. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

Add a Viva Pulse card

Invite managers and team leads to send requests for feedback or view feedback results using the Viva Pulse card. The card provides a way for feedback authors to access and interact with active or recently closed feedback pulses. This provides feedback authors and feedback providers with a direct link to their account in the Viva Pulse Teams app.

Note

  • It’s recommended admins set up the Viva Pulse app for their organization and pin it as an app in Microsoft Teams so users can fully experience the Viva Pulse card. For more information, see the article on manage, install, and pin Viva Pulse in the Teams admin center.
  • Users will only see the Viva Pulse card if their organization is licensed for Viva Pulse.

Content in the card is dynamic and changes according to the users role in Viva Pulse and if a feedback pulse is active. The following are examples of Viva Pulse card states that display different information depending on the viewer’s role and if any active or recently closed feedback pulses are available.

The Pulse card tells feedback authors the number of responses an active or recently closed pulse received and provides a link to feedback results in their Viva Pulse account for the recently closed pulse. When multiple feedback results are available, authors are directed to their Pulses sent tab within the Viva Pulse Teams app.

Screenshot showing two states of the Viva Pulse card.

When no open pulses are available, the card displays send a pulse, which brings the author to the Viva Pulse Teams app where they can create a new request for feedback to be sent out.

Screenshot showing the send a pulse state of the Viva Pulse card.

Note

  • Viva Pulse requires a license to send pulse requests for feedback and to review results. A license is not required to respond to a pulse. For more information on Viva Pulse licensing, see the article on Licensing requirements.
  • The Viva Pulse card requires the Viva Pulse app to be enabled in Microsoft Teams for the card to display information

To add the Viva Pulse card to your dashboard:

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Viva Pulse from the dashboard toolbox.

    Screenshot of the Viva Pulse card icon.

  3. In the property pane on the right, choose your card size from the Card size drop-down list.

  4. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

    Screenshot of the Viva Pulse card properties.

For more information on using Viva Pulse as a feedback author or feedback recipient, see the Viva Pulse documentation here.

Add a web link card when you want your users to go to an internal or external link on a web site.

Screenshot of a web link card.

  1. While in edit mode, select + Add a card from the dashboard.

  2. Select Web link from the web toolbox.

    This screenshot shows the icon to select to add a web link card.

  3. In the property pane on the right side of the page, select your options.

    Screenshot showing how to choose options.

  4. Select a size for the card from the Card size drop-down list.

  5. Enter the URL for your link in the Link text box.

  6. Set the card-display options:

    • Enter a title for the card in the Card title text box. (This title won't change your page title; it's the title that is displayed on the top of the card.)
    • Enter a description for the card in the Card description text box. This description is displayed in larger text under the title.
  7. Under Thumbnail, select one of the following options:

    • Auto-selected: This option when chosen automatically displays an image at the top of your card that comes from your page.
    • Custom image: This option when chosen enables the Change button. You can select this button to choose an image you want to use.
  8. Under Card icon, select one of the following options that enable the icon to be displayed on the left side of the card title:

    • Auto-selected: This option when chosen automatically displays a built-in icon associated with the page.
    • Custom image: This option when chosen enables the Change button. You can select this button to choose an image you want to use.
    • Icon: This option when chosen enables the Change button. You can select this button to choose from a set of stock icons.
  9. To target your card to specific audiences (that is, the card only displays in the dashboard to the audience you specify), select one or more groups to target. For more information on audience targeting, see Audience targeting.

Apply audience targeting to cards

Audience targeting can be applied throughout the Viva Connections experience, including cards on the dashboard. Audience targeting creates a personalized viewing experience by filtering the most important content to specific groups. Use audience targeting to:

  • Create custom views for distinct roles and regions.
  • Generate as many different views as needed to create unique experiences.
  • Ensure the intended audience sees the most important content.

Set the target audiences for a card

  1. If your page isn't already in edit mode, select Edit at the top-right of the dashboard page.

  2. Select the card you want to target to one or more audiences, and select the Edit card pencil from the toolbar on the left.

  3. In the property pane on the right, under Audiences to target, type or search for the audience groups you want to target.

    Note

    If you've selected an audience group that you recently created or changed, it may take some time to see targeting applied for that group.

  4. When a card is successfully audience targeted, a people icon in the lower-left corner of the card appears.

    Screenshot showing the audience targeting confirmation icon.

Preview your dashboard to see how it displays for different audiences

After creating or editing cards on the dashboard, make sure you preview the experience for each audience and on both desktop and mobile devices. What you see in preview mode approximates how the dashboard displays for certain audiences and devices. When you apply audience targeting to cards, you can preview how different people view the dashboard depending on the audience or device. While in preview-mode, make sure:

  • Physical gaps aren't present between cards that might appear while previewing different audiences and devices. If you see gaps, rearrange cards so that every audience and device has a high-quality viewing experience.
  • Icons, graphics, and images are easy to identify and understand.
  • Buttons and links are active and go to their intended destinations.
  • Labels and description text are helpful, easy to read, and make sense for the intended audience.

To preview different audiences

  1. While in edit mode, select Preview on the top right.

    Screenshot showing the audience targeting icon.

  2. Open the Select audiences to preview as drop-down list. (if no cards are audience targeted, you'll see a disabled Audience targeting label).

    This screenshot shows the audience targeting group label.

  3. Search for and select a group. Once added, the group is selected by default. You can select the group again in the Select audiences to preview as drop-down list to deselect it.

    Screenshot showing the audience targeting panel in preview mode.

    • Cards targeted to a specific group display.
    • When one or more audiences are selected, cards that don't have audience targeting applied will also display.
    • If no audiences are targeted, only cards that aren't audience targeted will display. If there aren't any cards with audience targeting applied, none will display.
    • If you aren't part of one of the audiences you've selected, you'll only see cards that aren't audience targeted. If none of the cards are audience targeted, you won't see any cards.

Examples

In the following example, the preview is set for mobile devices and highlights the different views that can be created from a single dashboard.

View 1 View 2
Screenshot of one view created for a specific audiences. Image of a second view created for a specific audiences..

Use the Dashboard web part for Viva Connections

Note

  • After editing content on the dashboard, it may take several minutes until the new content is available in the Dashboard web part.
  • For best results, we recommend placing the Dashboard web part in a right vertical section.

Once a dashboard is authored and published, you can use the Dashboard web part to display it on your Connections site. You can add the web part to any section on your page.

Screenshot of the Viva Connections Dashboard web part highlighted in the Connections site.

When added, it will automatically be populated with the cards from the existing dashboard on your site. You can set the maximum number of cards you want to display. Learn how to use the Dashboard web part.

How URLs and single sign-on works

For some cards, you'll use links to URLs. Depending on the location of the content, links to URLs might display content in Microsoft Teams or elsewhere and Single sign-on (SSO) behavior can differ. Get more information about how links to URLs and SSO behave depending on the location of the content you're linking to.

Note

When SSO is not supported, users will be asked to enter their login credentials.

Opens URL to… On Teams mobile On Teams desktop
Teams App Teams apps (like Shifts, Approvals, or Kudos) open within Teams and user doesn’t need to authenticate again. Teams apps (like Shifts, Approvals, or Kudos) open within Teams and user doesn’t need to authenticate again.
Forms Forms open within Teams, user is asked to sign-in on the first time, and user doesn’t need to authenticate again if they stay signed in. Forms open within Teams, user is asked to sign-in on the first time, and user doesn’t need to authenticate again if they stay signed in.
Viva Engage Viva Engage opens within Teams, user is asked to sign-in on the first time and user doesn’t need to authenticate again if they stay signed in. Opens a web browser session and the user might need to reauthenticate depending on browser and machine settings.
PowerApps PowerApps opens within Teams, user is asked to sign-in on the first time and user doesn’t need to authenticate again if they stay signed in. Opens a web browser session and the user might need to reauthenticate depending on browser and machine settings.
Power Portals Power portals open within Teams, user is asked to sign-in on the first time and user doesn’t need to authenticate again if they stay signed in. Opens a web browser session and the user might need to reauthenticate depending on browser and machine settings.
Stream Stream opens within Teams, user is asked to sign-in on the first time and user doesn’t need to authenticate again if they stay signed in. Opens a web browser session and the user might need to reauthenticate depending on browser and machine settings.
External Links Web view opens within Teams and the user might need to authenticate again (depending on the site.) Opens a web browser session and the user might need to reauthenticate depending on browser and machine settings.

More resources

Step-by-step guide to setting up Viva Connections

Learn more about how to plan a dashboard