How to add apps to Viva Connections dashboard

Viva Connections is the new gateway to other Viva services within Microsoft’s new suite of employee experience tools and resources. The Dashboard, specifically, shows users little summaries of other Viva services as a way conveniently track one metrics and jump right into relevant resources.

Making a custom Adaptive Card is easy by adding a Card designer Card to your dashboard

Administrators can create their own Cards for the Dashboard, by adding Card designer Cards to the Dashboard. These take any Adaptive Card schema that you can make yourself from scratch or by editing one of the many templates that are available.

However, this built-in Card designer Card has no way to connect to any data sources from apps like Salesforce, ServiceNow, Github, Jira etc. So in this article we’re going to take a look at how you can integrate any of your favorite workplace apps for Viva Dashboard.

Related: The best apps App Source apps for Viva Connections dashboard

Adding apps to your Viva dashboard

The magic word is App integrations. This is another Card that’s similar to the one that’s built-in, but actually draws in live data from your apps. Simply add it from the App Source store to your SharePoint instance, and then add the Card maker Card to your dashboard.

Once you’ve added the Card, click the pencil icon to enter the configuration pane. You will see that there is a Generate a Card Share URL button that will generate a unique ID for your Card. Click that and you’ll be brought to the (so far empty) Adaptive Card designer. In the next steps we’ll now focus on ways you can bring in your apps into this Viva Connections.

Option 1: Browsing apps that have built-in Adaptive Cards

To start the easiest option would be to add an app that already comes with a fully thought-out Adaptive Card. All you do with any of them is link them with your account and you’re done. Browse available apps →

Let’s say for our example we go with Github, so we go to that app listing and click on Install now. This will put the Github Card on your Digital Assistant Board, where you then click on Link accounts to sign into your Github account.

How to connect to an app

This will show you one of those familiar authorization screens that you need to complete. For other apps, the process would be similar.

Then you’re back to your Board and your Card should now show some Github issues that are assigned to you. Now you have a choice, either you refine your Card design in the Adaptive Card designer, or you take the Card as is.

If you choose to edit it, click on the ··· button in the top right-hand corner of the Card and then on Edit in Designer. If you’re happy with the way it is, simply click Share.

This will generate the Card Share URL you will need to copy and then paste into the configuration pane of your Viva dashboard Card maker Card.

And that’s it, your first Adaptive Card connected to a 3rd party app on Viva dashboard.

Option 1½: Refine the Adaptive Card

If you above you elected to Edit in Designer, you will be entering the Adaptive Card designer where you can make modifications (see how in this guide). This designer also has the same Share menu that lets you copy and paste the unique Card Share URL to your Viva Connections dashboard.

Option 2: Start with an Adaptive Card template instead

Apart from apps with built-in Adaptive Cards, you can also make your own Cards and then pick a Connector. This gives you more options of interactive Cards that you can customize even further to create a bespoke experience for your users. To start, browse from over 20 available templates and then click Open this Adaptive Card below whatever Card best suits your needs.

Then, once in the Adaptive Card designer, just click on the Connect to data source button and select your desired app to connect with. If not connected already, you’ll be prompted to do so automatically.

All the Adaptive Card samples support the Card view (called Summary view) and Quick View that Viva Connections dashboard supports. You can browse available apps from the App Directory.

Option 3: Generate an Adaptive Card from Zapier

Another alternative to get Adaptive Cards from your favorite apps into Viva Connections Dashboard is to pick one of the thousands of apps the automation platform Zapier offers. You can generate Adaptive Cards lists in Zapier using the Digital Assistant Zapier app. Just use this as the “action” block when editing your Zap and any app can be transformed into an Adaptive Card list.

Once your trigger app gets triggered the first time, your new Adaptive Card list will automatically show up on your Digital Assistant Board. As above, you can simply invoke the Share menu, receive your Card Share URL and paste into a new Card maker Card on your Viva Connections dashboard.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts
Read More

How to create a Botpress workplace chatbot using business data

Botpress is an unusual offering in the landscape of AI chatbots; it’s free, and it’s open-source, which immediately puts it at the top of the list for many people. Not only that, but it can be hosted on your own equipment – a big plus for organizations that want to keep tight control over where their chatbot requests go. But if you’re planning to use Botpress for an internal office chatbot, will the open-source nature of the platform be a hindrance or an advantage? I’ve created my own AI chatbot using Botpress and documented the process, so you can follow…
Read More

How to build an Adaptive Card web part or ACE [Updated 2024]

Adaptive Cards are a standardized “recipe” for writing a Card. While Viva Connections has a built-in Adaptive Card “app”, in SharePoint you need to first download a web part from the SharePoint store. In this tutorial, we’ll go through the installation process and cover how you can make your own Adaptive Cards. Get the web part There is a handy-dandy web part called App integrations that lets you embed Adaptive Cards on any SharePoint page. So to start, go to Microsoft App Source and get yourself the web part. Once you click on Get it now you need to follow…
Read More

23 free Adaptive Card templates for businesses (Updated Apr ’23)

Adaptive Cards are a standardized UX for business use cases, such as displaying Adaptive Cards in SharePoint, or to build Adaptive Cards . With the wide range of input types and the flexible layout they are a great way to make portable snippets of information. Related: Building with Adaptive Cards? Here’s what you should consider If you’re considering to build Adaptive Cards for your business, then these free examples could help you get there more quickly. Our free Adaptive Card samples show a great range of designs and layouts with images, approve/decline buttons and expanding sections. Adaptive Cards for Employee…
Read More

Introducing the Copilot in M365 CoE Dashboard: A hub for driving Copilot adoption

At adenin, we are excited to unveil our latest offering, the Copilot in M365 Dashboard, a powerful, free tool designed to enhance your Microsoft 365 experience with Viva Connections Adaptive Cards. This tool is an invaluable resource for organizations aiming to establish a Copilot Center of Excellence (CoE) and maximize their ROI. Key Features Why Choose adenin’s Copilot in M365 Dashboard? Get Started Explore the Copilot in M365 Dashboard on GitHub to get started with this powerful tool. Enhance your Microsoft 365 experience today and lead your organization’s journey towards a robust Copilot Center of Excellence. Installing this dashboard in…