►
From YouTube: ACE with a card view and multiple quick views to display Microsoft 365 (Unified) groups in a tenant
Description
In this 18-minute developer-focused demo, Nanddeep Nachan delivers an inside view on building an ACE component with Card View and multiple Quick View cards to display Microsoft 365 (Unified) groups in a tenant of which user is owner or member. The Card View button allows the user to browse to groups. The Quick View card shows group details with buttons to visit associated SharePoint and or Teams sites. Card templates used were Basic, Image and Primary. Developed on SharePoint Framework v1.13.1. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 7, 2022.
Demo Presenter
• Nanddeep Nachan | @NanddeepNachan
Supporting materials
• Sample - My Microsoft 365 Groups | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-My-M365-Groups
• Article - Build ACE for Microsoft 365 Groups Membership | https://nanddeepnachanblogs.com/posts/2022-01-27-ace-m365-groups-membership/
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
So
this
sample
shows
how
to
build
the
adaptive
card
extension
with
the
card
view
and
multiple
quick
views
to
display
microsoft.
365
unified
groups
in
a
tenant
of
which
the
current
logged
in
user
is
a
owner
or
a
member,
and
the
concept
behind
this
sample
is
concentrated
around
microsoft
365
groups,
because
once
you
are
in
a
group,
you
can
be
benefited
from
group
connected
services
such
as
sharepoint,
microsoft,
teams,
yammer
and
planner.
A
A
bit
of
history
behind
developing
this
ace
sample
is
that
our
organization
is
on
journey
to
microsoft,
365
adoption
and
we
are
rolling
out
various
services
to
our
users
and
we
we
have
a
mixed
set
of
users
in
our
organization.
Along
with
it.
We
also
have
users
from
non-iit
departments
like
shipping
and
packaging
and,
like
information
workers
working
from
office,
we
also
have
frontline
workers
using
mobile
experiences,
as
they
do
not
have
access
to
the
machine
all
the
time.
So
there
are
two
reasons
behind
implementing
this
solution.
A
Firstly,
that
to
support
the
needs
of
information
worker,
as
well
as
the
frontline
workers.
We
were
looking
out
to
implement
cards
on
viva
connections
dashboard,
so
that
will
be
able
to
handle
both,
and
secondly,
that,
as
we
are
on
the
journey
to
microsoft,
365
adoption,
we
want
to
promote
the
microsoft
365,
apps
and
services
to
our
users.
We
do
not
want
them
to
restrict
the
creation
of
sharepoint
sites,
microsoft,
teams,
planner
or
yammer
communities.
A
We
want
them
to
explore
them
by
creating
what
they
want.
However,
there
are
again
downsides
to
this
thinking
too,
because,
as
we
do
not
want
them
to
restrict
the
users
from
using
group
connected
services,
we
also
want
to
have
some
kind
of
control
over
it
by
implementing
microsoft,
365
group,
expiration
policy
and
with
the
increasing
usage
of
microsoft,
365
groups
and
microsoft
teams.
The
group
exploration
policy
provides
kind
of
a
way
to
clean
up
the
unused
groups
and
teams
that
we
have
so
microsoft
teams.
A
Another
important
thing
to
consider
is
from
the
content
and
the
user
experience
point
of
view,
because
the
excessive
content
gives
rise
to
a
content
sprawling,
so
the
contents
fall.
That
means
a
situation
wherein
excessive
number
of
abundant
or
real
rarely
used
content
in
the
form
of
microsoft,
sharepoint
sites
or
microsoft
teams
exist
within
the
organization,
and
then
it
will
surpass
your
original
content.
Even
those
kind
of
test
content
will
start
appearing
in
into
your
search
results.
A
So,
for
example,
if
you
have
a
consolidated
view,
something
like
this
edge
solution
that
gives
visibility
into
the
content
to
individual
on
where
they
are
contributing
to
such
as
the
excessive
content
to
avoid
the
content
sprawl.
So
at
least
they
can
self-educate
themselves
and
start
removing
the
content
which
they
don't
want.
So
these
are
the
driving
factors
behind
creating
this
as
solution
so
quickly
about
this.
A
A
So
with
that,
let's
have
a
quick
demo
of
this
sample
and
then
we
will
get
into
the
code.
So
this
is
how
the
sample
looks
like.
So
this
is
the
viva
connection,
dashboard
that
we
have
on
to
the
sharepoint
home
side,
and
this
is
the
s
solution
that
we
have
developed.
So
this
one
is
standing
along
with
other
kind
of
cards
that
that
can
be
placed
onto
the
visual
of
of
a
dashboard.
A
So
once
you
click
on
view,
it
will
give
us
a
basic
information
about
that
group,
the
description
of
the
group
and
then
the
visibility
of
that
group,
whether
it
is
a
public
or
a
private
group,
and
then,
for
example,
if
that
group
is
connected
with
microsoft,
sharepoint
site,
it
will
give
you
the
option
to
open
that
sharepoint
site
like
this
way.
At
the
same
time,
for
example,
if
it
is
connected
with
microsoft
teams,
in
that
case,
it
will
give
you
the
option
to
open
that
in
microsoft
screen.
A
So
once
you
click
on
here,
it
will
take
you
to
the
regular
experience
and,
from
here
you'll,
be
able
to
open
up
that
team
which
is
associated
with
that
side.
So
the
other
thing
that
we
are
planning
to
do
on
on
this
particular
is
solution.
Is
that
we
we
are
going
to
add
the
group
expiration
date
so
that
when
prior
to
group,
expiration
policy
triggers,
we
will
be
able
to
get
the
information
about
when
this
group
is
going
to
expire,
and
then
what
are
the
resources
that
I
am
going
to
lose
because
of
that?
A
A
So
this
kind
of
unconsolidated
view
will
give
you
those
kind
of
an
fixed
view
and
then
from
there
you
will
be
able
to
take
a
very
much
good
decisions,
whether
you
want
to
continue
with
that
or
no
again,
we
are
planning
to
add
a
renewal
kind
of
and
things
right
from
here,
so
that,
once
you
click
on
the
button
here,
the
group
can
be
renewed
from
here
as
well,
by
using
the
graph
api.
So
these
are
at
least
couple
of
things
that
we
have
in
a
plan
to
do.
A
But
this
is
how,
as
of
now,
these
groups
look
like,
and
let's
say,
for
example,
if
even
if
I
again
get
back
into
the
sharepoint
home
side,
this
is
how
it
will
look
when
we,
it
will
get
added
as
a
dashboard
webpart,
and
this
is
the
experience
that
will
be
seen
when
this
particular
web
part
will
added
as
a
dashboard
onto
the
viva
connection.
So
this
one
will
be
available
as
a
card
mostly
can
be
seen
better
with
the
large
view
kind
of
an
large
kind
of
an
setting
onto
the
card.
A
This
is
the
same
experience
that
you
get
so
this
was
the
quick
demo
how
this
works.
With
that,
let's
get
into
the
code
and
see
how
the
code
looks
like
so,
as
I
said,
this
particular
sample
has
been
developed
with
spfx
version
1.13.1,
which
you
can
see
the
reference
in
the
package.json
file.
Then
again,
we
do
have
a
few
of
the
considerations
from
the
permission
configuration.
A
So
we
need
a
few
set
of
permissions
configured
in
the
file
which
is
which
can
be
found
under
the
config
folder
package
solution.json,
and
then
we
need
to
have
certain
web
api
permission
request
specified
here.
So
either
you
can
specify
group
dot,
read
dot,
all
permission
to
read,
group
properties
and
membership,
or
you
can
specify
directory.all
to
read
the
data
in
your
organization's
directory,
such
as
user
and
groups.
And
again
you
will
need
user.all
to
read
the
user
profiles
information.
A
So
these
are
the
three
or
at
least
this
two
combination
of
group.read,
directory.read
and
user.read
will
be
needed
to
run
this
as
sample.
Then
again
we
do
have
a
service
created
under
the
services
folder,
so
this
service
will
help
you
to
get
the
group
related
information,
so
this
service
has
got
two
major
methods
implemented
inside
it.
So
first
one
is
the
get
my
member
groups
which
will
return
the
groups
of
which
the
current
logged
in
user
is
a
member
of.
A
So
we
will
still
have
to
use
owned
object
and
once
we
get
that
at
least
we
will
have
the
entire
information
about
the
groups
where
you
are
a
member
of
and
the
group
where
you
are
owner
of,
and
we
can
use
that
information
in
our
s
class.
So
we
have
this
s
class
here,
which
is
this
file
that
contains
the
definition
of
s
which
extend
from
the
base
adaptive
card
extension
class.
And
then
we
have
a
major
method
here,
called
as
on
init.
A
A
So
this
card
view
will
display
the
group
summary
and
again
it
will
have
a
button
to
open
a
quick
view.
So
this
this
one
will
give
you
the
list
of
all
of
the
groups
that
we
have
and
then
list
a
list
of
the
groups
where
you
are
member
and
owner.
And
then
there
will
be
a
button
to
go
to
that
members
group
or
to
the
owners
group,
and
once
we
click
that
button
there
will
be
another
view,
which
will
be
a
quick
view
that
that
will
be
seen
to
us.
A
So
this
quick
view
displays
the
groups
count
by
the
owner
groups
as
well
as
the
member
groups.
So
again,
this
one
is
supported
by
the
template,
which
is
this
group
summary
view
template
viewtemplate.json,
and
then
this
json
will
render
all
of
the
groups
that
we
have
and
then
again
that
will
be
a
link
next
to
each
of
the
group
to
get
into
the
more
details
of
that
group,
which
is
our
group
listing
view.
A
So,
for
example,
if
I
just
open
up
that
view
again,
so
it
is
the
quick
view
available
which
display
the
groups
based
on
the
selection
from
the
group
summary
view
which
we
have
seen
previously
so
example.
We
can
click
on
the
owner
group
that
we
want
to
see
or
member
groups
that
we
want
to
see
based
on
the
selection
that
we
have
done
on
to
our
previous
quick
view.
This
view
will
take
the
action
and
then
it
will
show
the
information
about
that
particular
groups
where
we
are
owner
or
where
we
are
members.
A
So
it
can
detect
this
detect
from
state
that
which
group
type
we
had
selected,
whether
it
was
owner
group
or
a
member
group,
and
from
there
it
can
go
ahead
and
do
the
more
processing
and
dynamically
here
in
the
on
action.
It
will
make
a
call
to
the
service
again
just
to
see
that
whether
that
particular
group
has
been
associated
with
any
of
the
sharepoint
side
or
if
that
group
has
been
associated
with
any
of
the
microsoft
teams
team.
A
So
from
here
it
will
show
the
information,
a
basic
information
about
that
group,
like
the
display
name
of
that
group,
a
description,
the
visibility
that
we
have
seen,
whether
it
is
a
public
or
a
private
group,
and
then
what
kind
of
an
action
that
we
can
take.
So,
for
example,
if
it
is
associated
with
with
sharepoint
site,
we
will
be
able
to
see
this
option
or,
for
example,
if
it
is
associated
with
teams,
will
be
able
to
see
this
option.
A
So
this
was
basic
about
the
code
like
how
this
code
has
been
developed
coming
to
the
deployment
part.
So
this
one
is
a
pretty
much
straightforward
deployment
that
we
just
have
to
prepare
and
deploy
the
solution
package
by
running
the
commands,
like
bundle
followed
by
the
package
solution,
and
then
we
just
need
to
deploy
the
generated
package
to
the
sharepoint
tenant
app
catalog.
But
the
major
thing
here
is
when
it
comes
to
the
graph
apis.
A
So
after
deploying
the
solution
to
the
internet,
app
catalog,
sharepoint
administrator
needs
to
approve
the
graph
api
permissions
from
the
sharepoint
admin
center
by
going
to
the
advanced
and
then
api
access
blade.
So
I
just
want
to
share
a
word
of
caution
here,
because
the
api
used
here,
which
is
group.all,
is
considered
to
be
a
risky
permission
level,
because
it
allows
the
app
to
read
group
properties
and
membership
and
read
the
calendar
and
conversation
for
all
the
groups.
So
definitely
your
organization's
digital
security
team
will
not
like
it.
A
That
allows
app
to
read
data
from
your
organization's
directory,
such
as
users,
group
and
apps,
without
going
into
the
membership
or
conversation
kind
of
in
details,
all
right
so
away
with
that
here
are
the
references,
the
code
sample
and,
for
example,
if
you
want
to
see
how
this
sample
has
been
developed.
Here
is
my
block
with
that.
Thank
you
very
much,
and
thank
you
very
much
for
giving
the
opportunity
to
present
this.