►
From YouTube: Authoring a Microsoft Viva Connections Dashboard
Description
In this 22-minute developer-focused demo, Luca Bandinelli and John Nguyen introduce viewers to desktop and mobile instances of Viva Connections Dashboard. To create Dashboards, open your Communications site, add a Dashboard web part – a.k.a. Dashboard or Dashboard Authoring Tool, then add cards (apps, links and Card Designer) to Dashboard. Configure each card in property pane. The Card Designer card – allows end-users to create no code custom cards leveraging Adaptive Cards Designer in backend. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 3, 2021.
Notice that the features shown in this video will be released in summer 2021. At the time of the video recording, they were only available for preview program attendees.
Demo Presenters:
• Luca Bandinelli (Microsoft) | @BandinelliLuca
• John Nguyen (Microsoft)
Supporting materials:
• Viva Connections https://aka.ms/VivaConnections
• Register - Register for Viva Connections developer platform updates and private Beta | http://aka.ms/viva/connections/preview/register
• Designer – Adaptive Cards | https://adaptivecards.io/designer/
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
Thank
you
for
being
here
welcome
guys
today,
john
pat,
and
I
will
talk
about
viva
connection,
accessibility,
overviews.
How
do
you
work
and
create
the
extensibility
cards
for
vivo
connection,
dashboard
and
video
connection?
Video
connection
is
part
of
the
new
viva
effort
that
is
being
built
on
top
of
teams
to
be
able
to
have
new
functionalities
and
experiences
in
teams
that
target
specific
areas
on
specific
workers.
For
the
connection
specifically,
we
are,
we
have
more
than
the
dashboard.
A
During
this
conversation,
so
in
terms
of
dashboard
connect
is
basically
one
of
the
solutions
that
have
been
built
as
part
of
viva,
and
it
it
gives
you
the
ability
to
provide
access
to
applications
and
pages
and
resources
that
users
normally
use
during
their
day-by-day
basis.
So
it's
as
you
can
see,
it's
basically
a
solution
that
was
built
primarily
for
mobile
and
for
frontline
workers
or
for
people
that
normally
don't
have
a
desk,
so
they
need
to
be
able
to
quickly
access
to
applications
that
they
use
in
during
the
day-by-day
job.
A
There
is
an
authentic
experience
that
is
very
easy
to
customize
and
very
easy
to
create.
We'll
go
about
that.
In
a
may
note,
it
basically
gives
the
ability
to
link
existing
resources,
as
well
as
through
the
power
of
sharepoint
framework
able
to
create
custom
solutions
that
users
can
use
in
mobile
or
desktop,
and
because
it's
powered
by
sharepoint
and
modern
pages
technologies.
A
All
of
your
users,
then
you
have
the
business
business
units
where,
basically
is
the
one
that
are
is
selecting
the
applications
and
selecting
the
functionalities
that
dashboard
will
surface
to
different
kind
of
users
inside
the
organization
system.
Integrators
and
isvs
can
be
involved
to
basically
create
links
to
existing
teams.
Application,
as
well
as
custom
cards,
we'll
talk
about
that
in
a
second
and
then
the
corporate
communication
role
is
the
one
that
is
in
charge
of
building
the
dashboard
and
create
the
dashboard
by
using
the
dashboard
authoring
tool
and
in
terms
of
dashboarding
tool.
A
A
In
modern
pages
from
there
you
can
select,
put
the
picker
in
the
card,
and
then
you
can
configure
the
card
by
using
a
property
paid
experience,
and
once
you
have
provided
some
kind
of
information
as
part
of
your
card
that
you
will
then
be
able
to
have
the
card
available
in
the
mobile
experience
as
well
as
the
desktop
and
web
and
from
there
the
card
can
have
multiple
functionalities.
The
card
itself
provides
a
quick
glance
of
the
information
that
the
user
can
interact
with
or
consume
very
quickly.
A
A
We
can
support
dynamic
values,
because
this
is
powered
by
sharepoint
framework.
We'll
talk
about
that
in
a
second,
you
can
add
different
icons
and
different
images,
and
we
will
provide
some
kind
of
out
of
the
box
card
just
like
the
ability
to
link
to
sharepoint
applications,
teams,
personal
apps
and
bots,
as
well
as
external
links
and
other
first
party
applications.
B
A
B
So,
just
to
recap,
it's
not
part
of
the
team's
mobile
app
itself.
It's
a
first
party
additional
application,
which
we
configure
from
an
administrative
perspective
to
be
visible
for
our
employees
when
they
open
up
a
teams
mobile.
That
is
correct.
Yes,
just
to
recap
on
that
and
then
there's
a
question:
what
happens
if
we
don't
set
a
home
site
as
part
of
the
suggested
step
of
of
setting
it
all
up?
A
A
So
this
is
the
dashboard.
The
way
I
went
here,
just
you
know,
go
to
my
communication
site
and
when
the
flight
is
enabled,
I
click
on
new.
I
click
on
dashboard,
and
here
it
points
me
to
the
dashboard.
You
can
see
a
blank
canvas
right
now,
because
there
are
no
cards,
but
by
the
time
I
click
edit
voila.
I
can
see
the
dashboard
here
clicking
add
the
card.
I
can
see
all
the
cards
that
are
available
here
in
a
similar
way
that
you
can
also
use
for
adding
weapons
in
a
mobile
page.
A
A
You
will
have
themes
up,
sharepoint
pages
card
designer
you
will
absolutely
have
web
links
and
mob
tasks
and
all
some
of
the
other
first
party
applications
when
they
are
available.
So
let's
start
with
the
sharepoint
page
as
an
example,
so
I
can
add
a
sharepoint
page
here.
The
card
is
ready,
I
can
click.
I
have
configuration
experience
which
is
very
similar
to
modern,
page
weapon
configuration
from
here.
A
I
can
select
the
car
size
and
you
can
see
that
the
card
itself
changed
immediately
in
the
example
of
sharepoint
page
you
can
select,
which
kind
of
site
you
want
to
go
with
here
is
see
so
select
communication
site.
You
can
see
that
this
can
change,
and
then
you
can
select
the
page
here
and
you
can
see
that
search
will
add
complete
and
at
the
moment
you
select
something
you
automatically
go
and
the
card
reflects
your
changes.
A
You
can
also
change
the
title
and
the
description
here,
so
you
can
incorporate
and
you
can
say
your
connection
as
you
can
see,
things
will
change
in
real
time.
You
can
select
the
image
and
then
you
can
talk
about
audience
targeting
where
I
will
talk
about
that
in
a
second,
where
you
can
go
and
target
a
specific
cardboard
specific
set
of
people
so
from
here
I
can
preview
when
I'm
in
preview
mode.
A
A
A
But
basically
what
will
happen
is
that
it
will
open
themes
and
then
it
will
point
out
directly
to
the
application
that
is
being
set.
So
you
can
see
here
it
lands
the
tiny
poles
and
I'm
able
to
use
here
directly
from
the
browser
or
the
rich
client,
wherever
I
am
in
case
of
the
mobile.
If
I
click
on
the
card,
it
will
open
teleports
or
whatever
app
I
set
on
the
mobile.
A
The
other
interesting
card
that
I
want
to
talk
about
here
is
the
close
preview
card
designer,
and
this
is
an
interesting
card
that
we
created
in
order
to
be
able
to
create
custom
cards
without
using
code
as
an
option.
So
here
what
I
can
do,
I
can
use
the
power
of
adaptive
card
to
be
able
to
build
the
quick
view.
Experience
on
my
card,
so
let's
say,
for
example,
that
I've
created
this
card.
I
call
this
a
full
court.
C
A
Select
menu-
let's
put
something
like
that.
I
can
select
another
card
action
so
like
it
means
that
I
can
say
that
the
card
can
do
something
when
I
click
on
the
card
or
do
nothing
in
this
case.
I
want
to
do
nothing
because
I
want
to
have
a
button
that
is,
I
can
put
desk
view
and
one
when
I
put
the
button
what
I
want
to
do.
I
want
to
go
to
a
link,
or
I
want
to
show
a
quick
view
for
the
lack
of
for
this
example.
I
can.
A
A
A
A
It
is
kind
of
an
alternative
for
scenarios
where
you
need
to
create
something
quicker
without
and
you
don't
have
a
developer
environment,
and
you
don't
have
a
developer
handy
that
you
can
use
to
build
some
kind
of
solutions
for
the
card
for
for
the
dashboard.
One
last
thing
that
they
want
to
show
is
the
audience
targeting.
A
As
that
gives
you
the
ability
to
see
what
will
happen
if
you
are
a
different
set
of
users.
So,
for
example,
here
you
can
see
that
I
only
see
two
cards,
but
if
I
select
test
as
a
group
well,
I
can
see
that
every
person
that
will
be
part
of
this
out
of
this
group
will
have
this
experience.
When
you
go
to
the
dashboard,
if
you're
not
part
of
this
group,
you
will
see
that
that's
what
you
see
so
then
I
can
close
the
preview
I
can
go
here.
A
B
B
B
B
You
can
get
access
already
under
early
bits
and
features
and
functionalities
as
long
as
you
sign
into
the
preview
program
and
will
then
enable
the
features-
and
this
is
basically
designed
for
you
to
get
early
access,
if
you're
a
mvp
or
a
person
who
does
videos
or
demos
on
conferences.
You
can
already
demo
the
stuff
as
well
so
and
there
is
no
nda
for
any
of
that.
B
A
So
should
very
interesting
question
slightly
different
questions,
so
I
will
start
tackling
the
later.
So,
yes,
we
are
building
the
ability
to
surface
the
dashboard
in
modern
pages
outside
of
viva
connections.
There
are
still
discussions
in
place
if
we
are
only
showing
the
dashboard
on
your
home
site
or
your
corporate
site
or
if
we
show
the
dashboard
anywhere
else,
but
the
dashboard
it's
something
that
you
will
be
able
to
put
in
modern
pages
in
sharepoint.
A
For
the
other
question
which
is,
can
I
also
put
a
card
yay
john
works?
Can
I
also
put
a
card
outside
of
the
dashboard
in
a
page
similar
to
what
I
can
do
with
web
parts?
This
is
something
that
we
are
actively
considering.
No
decision
has
been
made
right
now,
but
it's
one
of
the
options
that
we
are
considering
for
cards
to
be
also
alive
and
visible
in
pages
outside
of
the
dashboard.
B
B
It
will
be
in
the
recording
summary
tomorrow
in
the
blog
post
as
well
to
be
able
to
get
access
on
early
bits,
which
is
sharepoint
framework
1.13
and
that
we
are
able
to
enable
this
preview
functionality
within
your
tenant,
because
we
need
your
url
to
be
able
to
do
that,
and
the
second
cute
comment
from
tim
duncan
is
me,
shut
up
and
take
my
money,
microsoft?
No!
No!
No!
We
don't
need
it.
Thank
you.
C
Yeah
so
luca
showed
the
dashboard
on
the
web,
and
so
now
I'm
going
to
show
the
dashboard
as
part
of
the
team's
mobile
app.
So
this
will
not
be
available
as
part
of
the
private
preview,
but
we
do
expect
it
to
hopefully
be
available
broadly
later
this
year.
No
specifics
timeline
on
that
yet,
and
so,
like
we've
mentioned,
viva
connections
will
be
available
just
as
a
team's
app.
C
So
that
means
that
you'll
be
able
to
pin
it
and
be
if
your
team's
admin
be
able
to
do
all
the
sort
of
automatic
pinning
as
well
and
we'll
have
branding
support.
So
for
a
lot
of
people
organizations
the
app
itself
may
not
ever
surface
as
leave
the
connections
and
will
hopefully
surface
as
the
organization's
name
and
brain
and
so
we'll
see
all
the
cards
that
luca
had
already
added
onto
the
dashboard
it'll
be
a
lot
of
the
same
functionality.
I
can
go
to
the
tiny
pulse.
C
I
can
go
deep
link
into
the
tiny
pulse
app.
Similarly,
I
can
deep
link
into
all
sorts
of
other
apps
as
well
and
go
right
back
into
my
dashboard.
So
this
is
a
great
place
to
put
all
the
different
types
of
various
functionality
across
teams
into
one
location
and
also
have
the
ability
to
access
quick
snippets
of
info.
So,
for
example,
luca's
food
cart
food
port
card.
I
can
go
and
interact
with
that
as
well,
and
you'll
see
that
I
get
this
rich
experience.
Just
like
I
did
on
the
web.
C
What's
kind
of
pretty
interesting
about
this
whole
setup
is
that
this
is
actually
being
rendered
using
react,
native
and
so
you're
able
to
actually
extend
the
team's
app
natively
using
the
same
javascript
code
that
you're
writing
currently
with
adaptive
card
extensions
on
the
web
and
so
as
a
developer.
A
lot
of
this
is
really
transparent
and
we
do
a
bunch
of
heavy
lifting
to
be
able
to
have
it
render
natively
on
the
web
and
on
the
mobile
app.