Microsoft Viva Connections - Set up and Extend with SPFx
•Download as PPTX, PDF•
1 like•421 views
Viva Connection integration with SharePoint enables a dynamic, engaging, and personalized employee experience for your organization. These innovations power the intelligent workplace, where teams can collaborate and streamline workflows, organizations can engage employees and communicate effectively, and individuals can be more creative and productive with experiences and insights powered by artificial intelligence (AI). In this session we will dive into setting up Viva connections using SharePoint and integrating with Microsoft Teams. We will explore how the Developers can extend Microsoft Viva Connections for building engaging experiences with the widely adopted SharePoint Framework (SPFx).
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Microsoft Viva Connections - Set up and Extend with SPFx
Similar to Microsoft Viva Connections - Set up and Extend with SPFx (20)
More from Nanddeep Nachan
More from Nanddeep Nachan (20)
Recently uploaded
Recently uploaded (20)
Microsoft Viva Connections - Set up and Extend with SPFx
- 1. Microsoft Viva Connections - Set up and Extend with SPFx
- 2. Agenda
- 3. Office 365 Consultant Speaker | Author | Blogger Nanddeep Nachan Pune, India Twitter Handle: @NanddeepNachan LinkedIn: /in/NanddeepNachan Microsoft MVP, MCT SharePoint, Microsoft 365, MS Azure
- 4. Pune, India Twitter Handle: @SmitaNachan LinkedIn: /in/SmitaNachan Microsoft MVP, MCT SharePoint, Microsoft 365 Lead Software Engineer @TietoEVRY Speaker | Author Smita Nachan
- 5. Hybrid working and challenges Remote and hybrid work • Employees • Leaders • IT Employee experience Need for EXP (employee experience platforms)
- 7. Microsoft Viva Viva Connections The gateway to your employee experience Viva Insights Balance productivity and wellbeing Viva Learning Empower people to gain targeted skills Viva Topics Discover knowledge and expertise
- 8. Viva Connections mobile experience The Viva Connections mobile app is optimized to provide a fast, native, and branded experience focused on Dashboard, Feed, and Resources It is a Teams application that is branded with your company name and logo The experience in the Viva Connections mobile app is anchored around three key concepts: the Dashboard, the Feed, and Resources Image reference: https://docs.microsoft.com/en- us/sharepoint/viva-connections-overview
- 9. Viva Connections desktop experience Image reference: https://docs.microsoft.com/en- us/sharepoint/viva-connections Key capabilities of the desktop experience for Viva Connections Global navigation and way finding Navigate intranet resources within Teams Search for intranet content Share intranet content Dashboard Feed
- 10. Viva Connections - Branding Matching your company or organizational brand is integral to your employee’s connection with your company's values and goals The branding you apply in Teams to the Viva Connections app – including your logo and colors – is automatically applied to the mobile app Image reference: https://docs.microsoft.com/en-us/microsoftteams/customize-apps
- 11. Set up and launch Viva Connections
- 12. Set up Viva Connections Image reference: https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections
- 13. Step 1: Prepare your intranet
- 14. Prepare intranet navigation design and content Prepare your intranet by ensuring intranet content and the flow of information is in order A well-planned and well-executed intranet, hub, or site are important elements in ensuring you get the best from Viva Connections Plan Prepare Prepare home site and global navigation design - To ensure that your navigational design is a success, review best practices on how to design and set up your SharePoint information architecture Modernize Modernize sites and pages - Only modern SharePoint sites and pages can be viewed in Microsoft Teams, otherwise they will open in a separate browser window Consider Consider whether you will need a multilingual experience - You'll need to start by enabling your home site with a default language
- 15. Modern SharePoint Experience The modern experience in Microsoft SharePoint is designed to be compelling, flexible, and more performant. The modern experience makes it easier for anyone to create beautiful, dynamic sites and pages that are responsive.
- 16. Features of SharePoint Information architecture and hub sites Navigation Branding Publishing Search Sharing and permissions Performance Multilingual
- 17. Planning for Hub Sites Image reference: https://docs.microsoft.com/en-us/sharepoint/planning-hub-sites Hub sites complement the search experience by helping you discover information in context • Benefits • Pay and compensation • Talent acquisition or recruiting • Performance management • Professional development or training • Manager portal As an example, HR often encompasses the shown sub-functions:
- 18. Step 2: Home Site in SharePoint
- 19. Designating a home site in SharePoint A home site is a SharePoint communication site that acts as the front door to your organization’s intranet and has special capabilities such as the ability to prioritize news posted from the home site across the rest of the intranet When you deploy Viva Connections, your SharePoint home site becomes the intranet-landing experience inside of Microsoft Teams Plan 1.If your organization does not already have a home site, plan a home site. 1.Then, set the home site in the SharePoint admin center 1.Make sure you share the home site with everybody in your organization
- 20. Demo Prepare your intranet • SharePoint lookbook templates • Plan your home site • Hub sites
- 21. Step 3: SharePoint App bar and Global Navigation
- 22. Enable SharePoint app bar and customize global navigation The SharePoint app bar allows users to find important content and resources, and dynamically displays personalized sites, news, and files Viva Connections uses elements from the SharePoint app bar and global navigation for the desktop and mobile experiences SharePoint app bar elements will display in Microsoft Teams and includes global navigation, followed sites, and recommended news On mobile devices, Viva Connections uses global navigation for the Resources tab
- 23. Demo Enable Global Navigation and SharePoint app bar
- 25. Create Dashboard, add cards The Dashboard provides a personalized landing experience and is designed to be the central destination where everyone can discover your organization's resources and complete daily tasks Apply audience targeting to dashboard cards to give your users an experience tailored to their role and interests Once you set up the Dashboard, you will be able to use the Dashboard web part on the home site
- 26. Viva Connections Dashboard The Viva Connections Dashboard enables you to create a curated experience using Dashboard cards that give your employee's access to their most critical content and tools These cards are designed to enable quick task completion either by interacting with a card directly or by opening a quick view in the Dashboard Image reference: https://docs.microsoft.com/en- us/sharepoint/viva-connections-overview
- 27. Anatomy of a dashboard Image reference: https://docs.microsoft.com/en- us/sharepoint/viva-connections-overview • A dashboard is made of medium-sized and large- sized cards which users can interact with to get information or complete a task. • Users can select cards or click the buttons on cards to do things like: • Displaying a quick view with more information or an input form • Navigating to a SharePoint page • Accessing a Teams app • Accessing a site in the browser
- 28. Dashboard authoring A Dashboard is authored in a SharePoint home site on a Dashboard page. A site editor can create the Dashboard, add cards in the size and layout of choice, and target the cards to specific audiences Image reference: https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview
- 29. Dashboard cards The Viva Connections Dashboard comes with an initial set of built-in cards, but is also designed to enable SaaS providers, system integrators, and in-house development teams create their own cards to meet their business needs Image reference: https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview
- 31. Step 5: Prepare content for the feed
- 32. Getting content ready for your Feed with SharePoint news and Yammer Image reference: https://docs.microsoft.com/en- us/sharepoint/guide-to-setting-up-viva-connections 1.In Yammer, target the conversations you want to display in the Feed by using Yammer’s Boost and Featured options on Yammer community pages 1.Use News boost to elevate SharePoint news and announcements into a priority position in the Feed 1.Use Video news links in SharePoint to create an engaging viewing experience in the Feed 1.Use the Feed web part to display personalized news and announcements to viewers on the home site
- 33. Step 6: Add the app in MS Teams
- 34. Enable the Viva Connections app in the Microsoft Teams admin center 1.Add the Viva Connections app in the Teams admin center 1 1.Then customize app settings like the app name and logo and decide user policies 2 1.Finally, make the app available to end users 3
- 35. Step 7: Choose mobile settings
- 36. Choose settings for your mobile Viva Connections app The Viva Connections app creates a custom app in Microsoft Teams that fits the needs of your organization Your organization’s custom app will appear as a branded company app in the Microsoft Teams app center Once the app is added, your organization’s icon will appear in the Teams app bar in the desktop and mobile Microsoft Teams experience Image reference: https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections
- 37. Step 8: Launch with end-users
- 38. Let your users know how to access and use Viva Connections Help make end users aware of this new resource and provide guidance on what icon in the Teams app bar is your organization's instance of Viva Connections Then, help end users understand how to use the desktop experience Image reference: https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections
- 39. Build a rich experiences for Viva Connections with SharePoint Framework
- 40. SharePoint Adaptive Card Extension Image reference: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension • Basic Card Template • Image Card Template • Primary Text Template
- 41. Scaffold Adaptive Card Extensions (ACE) solution
- 43. References
- 44. References • Microsoft Viva https://www.microsoft.com/en-us/microsoft-viva • Overview of Viva Connections https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview • MS Learn: Extend Microsoft Viva Connections https://docs.microsoft.com/en-us/learn/paths/m365-extend-viva-connections/ • Configure Viva Connections for MS Teams Desktop https://nanddeepnachanblogs.com/posts/2021-10-28-configure-viva-connections/ • Build Adaptive Card Extension with SPFx https://nanddeepnachanblogs.com/posts/2021-09-21-build-ace-spfx/
Editor's Notes
- The Viva Connections mobile app is optimized to provide a fast, native, and branded experience focused on Dashboard, Feed, and Resources. It is a Teams application that is branded with your company name and logo. Dashboard, Feed, and Resources The experience in the Viva Connections mobile app is anchored around three key concepts: the Dashboard, the Feed, and Resources. Dashboard: The Dashboard is your employee’s digital toolset. It brings together the tools your employees need, enabling quick and easy access whether they are in the office or in the field. The Dashboard uses dynamic cards that employees can interact with to do things like complete simple tasks or review critical data. It’s authored in SharePoint and published to the Viva Connections Teams mobile app. Cards in the Viva Connections Dashboard are based on adaptive cards and the SharePoint Framework (SPFx). They provide a low-code solution to bring your line-of-business apps into the Dashboard. In addition, in Viva Connections for Desktop, the experience uses SharePoint home sites, which can be extended using SPFx web parts and extensions. Feed: The Viva Connections Feed delivers updates to the right people at the right time with powerful targeting and scheduling capabilities. It is tightly integrated with Yammer, SharePoint news, and Stream to display a personalized feed, based on post-level targeting of the groups that employees belong to. It supports both centralized corporate communication scenarios and democratized news scenarios. It is available in the Viva Connections Teams app on mobile, and will be available as a web part on desktop. Resources: The Viva Connections Resources experience enables way finding across platforms. It uses navigation elements from the SharePoint app bar, which can be audience targeted. https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview
- The Viva Connections mobile app is optimized to provide a fast, native, and branded experience focused on Dashboard, Feed, and Resources. It is a Teams application that is branded with your company name and logo. Dashboard, Feed, and Resources The experience in the Viva Connections mobile app is anchored around three key concepts: the Dashboard, the Feed, and Resources. Dashboard: The Dashboard is your employee’s digital toolset. It brings together the tools your employees need, enabling quick and easy access whether they are in the office or in the field. The Dashboard uses dynamic cards that employees can interact with to do things like complete simple tasks or review critical data. It’s authored in SharePoint and published to the Viva Connections Teams mobile app. Cards in the Viva Connections Dashboard are based on adaptive cards and the SharePoint Framework (SPFx). They provide a low-code solution to bring your line-of-business apps into the Dashboard. In addition, in Viva Connections for Desktop, the experience uses SharePoint home sites, which can be extended using SPFx web parts and extensions. Feed: The Viva Connections Feed delivers updates to the right people at the right time with powerful targeting and scheduling capabilities. It is tightly integrated with Yammer, SharePoint news, and Stream to display a personalized feed, based on post-level targeting of the groups that employees belong to. It supports both centralized corporate communication scenarios and democratized news scenarios. It is available in the Viva Connections Teams app on mobile, and will be available as a web part on desktop. Resources: The Viva Connections Resources experience enables way finding across platforms. It uses navigation elements from the SharePoint app bar, which can be audience targeted. https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview
- Matching your company or organizational brand is integral to your employee’s connection with your company's values and goals. The branding you apply in Teams to the Viva Connections app – including your logo and colors – is automatically applied to the mobile app. https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview
- Prepare your intranet by ensuring intranet content and the flow of information is in order. A well-planned and well-executed intranet, hub, or site are important elements in ensuring you get the best from Viva Connections. When you set up Viva Connections, global navigation in the SharePoint app bar and navigation on the SharePoint home site will impact the overall Viva Connections experience. While working to prepare your intranet, align with stakeholders to define top scenarios that can be supported through Viva Connections. Focus on tasks and scenarios that can be easily completed on a mobile device. Organize the Viva Connections dashboard around these key scenarios. After you launch your first iteration of Viva Connections, you can always add new scenarios and content as you gather insights from user feedback and usage analytics. Audit, modernize, and prioritize content related to your Viva Connection scenarios. Get started Prepare home site and global navigation design - To ensure that your navigational design is a success, review best practices on how to design and set up your SharePoint information architecture. Modernize sites and pages - Only modern SharePoint sites and pages can be viewed in Microsoft Teams, otherwise they will open in a separate browser window. Learn more about how to modernize SharePoint sites and pages. If you are not using modern SharePoint yet, review the Guide to the modern experience in SharePoint. Consider whether you will need a multilingual experience - You'll need to start by enabling your home site with a default language. Permissions SharePoint administrators (or higher) can create home sites and hub sites. Site owners of the home site (or higher) can enable and customize global navigation. Site owner and site member permissions are required to customize site-level navigation. https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections
- A home site is a SharePoint communication site that acts as the front door to your organization’s intranet and has special capabilities such as the ability to prioritize news posted from the home site across the rest of the intranet. When you deploy Viva Connections, your SharePoint home site becomes the intranet-landing experience inside of Microsoft Teams. Consider using The Landing template in the SharePoint look book to get a head start. Important A SharePoint home site is required to set up Viva Connections. Home sites are generally high-traffic sites that should be optimized for performance Get started If your organization does not already have a home site, learn more about how to plan a home site. Then, set the home site in the SharePoint admin center. Make sure you share the home site with everybody in your organization. Permissions SharePoint administrator (or higher) can create a home site. https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections
- The Viva Connections Dashboard enables you to create a curated experience using Dashboard cards that give your employee's access to their most critical content and tools. These cards are designed to enable quick task completion either by interacting with a card directly or by opening a quick view in the Dashboard. Think of the Viva Connections Dashboard as a digital toolset for your employees. The Viva Connections Dashboard is available on mobile platforms (iOS, Android) in the Viva Connections Teams app, and on the desktop as a web part. This web part can be integrated into a SharePoint Home site, which then is exposed as part of the Viva Connections for Desktop experience in Teams. https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview
- A dashboard is made of medium-sized and large-sized cards which users can interact with to get information or complete a task. Users can select cards or click the buttons on cards to do things like: Displaying a quick view with more information or an input form Navigating to a SharePoint page Accessing a Teams app Accessing a site in the browser A card can also reflect dynamic content that refreshes based on a user action or other event. For example, users can see new tasks assigned to them when they open the dashboard. As the users mark the tasks as complete, the card updates to reflect their new number of tasks. The dashboard experience has been designed to be consistent across mobile platform and desktop, but there are some differences: Element Mobile Desktop Dashboard Displays as the default tab in the Viva Connections app in Teams. Can be added to your home site as a web part. Dashboard layout Fixed in portrait mode. Card sizes can be medium (which shows two cards on one row) or large (which shows one card on a row). Can be portrait or landscape with varying numbers of cards on each row depending on whether the web part is used in a 1-, 2-, or 3-column page section layout. Card UI Native HTML based Card order Same as in Desktop Same as in Mobile Card reflow Same as in Desktop Same as in Mobile How many cards are shown All cards without audience targeting plus audience-targeted cards where the viewer is part of the targeted audience. The number of cards to show can be specified in the Dashboard web part settings, but which cards are shown may vary depending on audience targeting. https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview
- A Dashboard is authored in a SharePoint home site on a Dashboard page. A site editor can create the Dashboard, add cards in the size and layout of choice, and target the cards to specific audiences. The layout of the dashboard, including the size of the cards (which can be individually set as medium or large), is set up by the person who authors the dashboard. The cards in the dashboard reflow based on the screen real estate of the Dashboard. These cards may look different depending on whether the Dashboard is used on mobile or in the Dashboard web part on the home site. https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview
- The Viva Connections Dashboard comes with an initial set of built-in cards, but is also designed to enable SaaS providers, system integrators, and in-house development teams create their own cards to meet their business needs. Cards in the Viva Connections Dashboard are based on adaptive cards and the SharePoint Framework (SPFx). They provide a low-code solution to bring your line-of-business apps into the Dashboard. In addition, in Viva Connections for Desktop, the experience leverages SharePoint home sites, which can already be extended using Web parts and SPFx. The initial set of cards available are: Card Name Description SharePoint page Access a SharePoint modern page without leaving the Viva Connections app Web link Access a site without leaving the Viva Connections app Card designer Create your own cards and quick views using the adaptive cards framework Teams app card Use to open a Teams personal app or bot specified by the dashboard author Tasks Use to open the Teams Tasks app Shifts Use to open the Shifts app in Teams (upon General Availability release) These cards are available in the Dashboard toolbox when authoring a Dashboard, as shown in the following image: https://docs.microsoft.com/en-us/sharepoint/viva-connections-overview
- In the Viva Connections app, users will see a Feed that is personalized with relevant content personalized to them. The Feed automatically balances fresh and engaging content with corporate communications to keep users engaged, while also ensuring that the users see the most important messages. The Feed requires usage of modern SharePoint and either SharePoint news or a Yammer community. For the best and most engaging experience, use both. We recommend creating or using an existing organization news site so that users get the most important news. If you are not already using SharePoint news or Yammer, learn how to use them by referring to the following articles: SharePoint news: Create an organizational news site Use SharePoint news Yammer Welcome to new Yammer Join and create Yammer community Stream (built on SharePoint) Video news links on organization news sites Video in a SharePoint news post https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections
- After you have prepared your intranet for Viva Connections in SharePoint, you are ready to add the Viva Connections app in the Microsoft Teams Admin Center. Add the Viva Connections app, and then customize app settings to add your organization's logo, pre-install, and pre-pin the app for end users. Get started Add the Viva Connections app in the Teams admin center. Then customize app settings like the app name and logo and decide user policies. Finally, make the app available to end users. Permissions Teams administrator (or higher) permissions are required to add the Viva Connections app to the Teams Admin Center (TAC). https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections
- Note A Dashboard is required to customize settings for the mobile app. Mobile settings guidance The Viva Connections app creates a custom app in Microsoft Teams that fits the needs of your organization. Your organization’s custom app will appear as a branded company app in the Microsoft Teams app center. Once the app is added, your organization’s icon will appear in the Teams app bar in the desktop and mobile Microsoft Teams experience. Users won’t see the app by default if you don’t pre-install and pre-pin. https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections
- End user guidance Help make end users aware of this new resource and provide guidance on what icon in the Teams app bar is your organization's instance of Viva Connections. Then, help end users understand how to use the desktop experience. https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections