The Viva Connections Dashboard is probably my favorite feature of the entire Viva Suite… Topics is a close second but that’s another blog post.
With Viva Connections Dashboards and the Adaptive Card Extensions (ACEs) of the SharePoint Framework, your developers can VERY quickly and easily create custom experiences for your users. Because ACEs use the Adaptive Card Framework and JSON to generate the UI, developers can really focus all their efforts on the business logic and users will get a very consistent experience with these cards on every device from every developer.
HOWEVER… as much as I like Viva Connections and the Viva Connections dashboard, there’s one gaping hole I see in the experience. You spend all of this time creating a visually stunning Home Site where your Viva Connections Dashboard lives and as an added bonus you can quickly and easily get to your Home Site from within in the Teams desktop App which means employees no longer have to switch context to get to your Home Site… but…
In the Teams mobile experience, there appears to be no quick way to get to that Home Site you spent all of the time building? Users have to either use the SharePoint App or you have to take up precious space somewhere else in Teams just to show your Home Site on mobile. Your Home Site should be more front and center!
Fine…I’m being nitpicky.. but it’s a valid frustration.
That being said, this created an excellent opportunity to create a walkthrough on creating a useful ACE for your organization. Within a matter of minutes, you can create a custom ACE using the SharePoint Framework that solves this problem and introduces users to some key concepts for developing ACEs.
In the video below I walk you through how to create an ACE that employees can click on to open your Home Site. Now they can easily get to the Home Site on their mobile devices. But we don’t want this ACE visible when the user is not on a mobile device! Your dashboard is valuable real estate, so this solution will also show you how to make a card that is conditionally visible and will only show on mobile devices. It turns out to be a super simple solution and a great intro to creating your first ACE. So, let’s jump in.
To recap, in the video I showed you how to create your first ACE that actually does something useful. We walked through:
- Creating an ACE
- Using the state property to update the card
- Using SharePoint Rest to get the URL to your Home Site (/_api/SP.SPHSite/Details)
- Using the react-device-detect package to determine if we were on a mobile device
- Using isVisble to conditionally hide/show the ACE.
You can download the source code for this solution yourself from my github at mrackley/ExampleACE: Example solution that highlights some key ACE features (github.com)
And to learn more about getting started building ACEs check out Build your first SharePoint Adaptive Card Extension | Microsoft Docs.
And finally, to REALLY learn more about Viva Connections and the entire Viva suite, join us in Branson, MO or Online October 12-14 for The North American Collaboration Summit for three days of deep-dive workshops, interactive sessions, and a lot of fun. Registration starts at just $50 and early bird pricing ends soon. Hope to see you there!
