Microsoft Viva Connections -
Set up and Extend with SPFx

Agenda

Office 365 Consultant
Speaker | Author | Blogger
Nanddeep Nachan
 Pune, India
 Twitter Handle: @NanddeepNachan
 LinkedIn: /in/NanddeepNachan
 Microsoft MVP, MCT
 SharePoint, Microsoft 365, MS Azure

 Pune, India
 Twitter Handle: @SmitaNachan
 LinkedIn: /in/SmitaNachan
 Microsoft MVP, MCT
 SharePoint, Microsoft 365
Lead Software Engineer @TietoEVRY
Speaker | Author
Smita Nachan

Hybrid working and challenges
Remote and hybrid work
• Employees
• Leaders
• IT
Employee experience
Need for EXP (employee experience platforms)

Microsoft Viva
Overview

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

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

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

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

Set up and launch Viva
Connections

Set up Viva Connections
Image reference: https://docs.microsoft.com/en-us/sharepoint/guide-to-setting-up-viva-connections

Step 1:
Prepare your intranet

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

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.

Features of SharePoint
Information
architecture and hub
sites
Navigation Branding
Publishing Search
Sharing and
permissions
Performance Multilingual

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:

Step 2:
Home Site in SharePoint

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

Demo
Prepare your intranet
• SharePoint lookbook templates
• Plan your home site
• Hub sites

Step 3:
SharePoint App bar and
Global Navigation

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

Demo
Enable Global Navigation
and SharePoint app bar

Step 4:
Create Dashboard

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

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

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

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

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

Demo
Create Dashboard, add
cards

Step 5:
Prepare content for the feed

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

Step 6:
Add the app in MS Teams

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

Step 7:
Choose mobile settings

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

Step 8:
Launch with end-users

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

Build a rich experiences for
Viva Connections
with SharePoint Framework

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

Scaffold Adaptive Card Extensions (ACE) solution

Demo
Viva Connections
Extensibility with SPFx

References

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/

Thank You!
@NanddeepNachan
/in/NanddeepNachan
Nanddeep Nachan
@SmitaNachan
/in/SmitaNachan
Smita Nachan