►
Description
Viva Connections & SharePoint community call on June 1st.
Three demos: Building a custom Instagram Feed experience with SPFx, Using reusable IFramePanel control in your SPFx solutions, and Viva Connections ACE to display Daily Insights based on ChatGPT OpenAI API.
Project releases: SharePoint Framework (SPFx), CLI for Microsoft 365, Microsoft Graph Developer Proxy, and Viva Connections Toolkit for VS Code.
Actions: Join HackTogether: The Microsoft Teams Global Hack (June 1 – 15, 2023)
Please see the blog post for more details.
The host of this call is Hugo Bernier (Microsoft) @bernierh. Q&A takes place as always in chat throughout the call.
Agenda
00:00 – Intro – Hugo Bernier (Microsoft) | @bernierh
06:03 – SharePoint Framework – Vesa Juvonen (Microsoft) | @vesajuvonen
08:24 – PnPjs Client-Side Libraries – Julie Turner (Sympraxis Consulting) @jfj1997
10:35 – CLI for Microsoft 365 – Garry Trinder (Microsoft) | @garrytrinder
12:21 – Microsoft Graph Developer Proxy – Garry Trinder (Microsoft) | @garrytrinder
13:40 – PnP SPFx Controls – Hugo Bernier (Microsoft) | @bernierh
14:23 – Viva Connections Toolkit for Visual Studio Code – Vesa Juvonen (Microsoft) | @vesajuvonen
15:22 – PnP Modern Search – Hugo Bernier (Microsoft) | @bernierh
15:44 – PnP Samples - Hugo Bernier (Microsoft) | @bernierh
16:07 – Together mode picture
17:19 – Demo – Building a custom Instagram Feed experience with SPFx – Reshmee Auckloo (Pension Protection Fund) | @ ReshmeeAuckloo
29:52 – Demo – Using reusable IFramePanel control in your SPFx solutions – Valeras Narbutas (Macaw) | @ValerasNarbutas
36:34 – Demo – Viva Connections ACE to display Daily Insights based on ChatGPT OpenAI API – Siddharth Vaghasia | @siddh_me
49:08 – Closing
Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
B
To
the
Viva
connections
and
SharePoint
framework
by
weekly
sync,
we
have
a
super
amazing
agenda.
Today
we
have
the
latest
updates
on
the
SharePoint
framework.
We
have
latest
updates
on
community
projects.
We
have
picture
time
so
get
yourself
ready.
If
you
want
to
be
part
of
this
picture
and
then
we
have
awesome
demos
with
two
new
presenters,
two
first-time
presenters,
so
we
have
reshmi
who's
going
to
be
talking
about
building
a
custom,
Instagram
feed,
and
then
we
have
valeras
nervitas
who's
going
to
talk
about
using
a
reusable
iframe
panel
control
in
your
spfx
solution.
B
And
finally,
we
have
Siddharth
coming
back
for
a
demo
on
Viva
connections,
ACA
adaptive
card
extensions
to
display
daily
insights
based
on
chat,
GPT,
open,
AI,
API,
that's
a
lot
of
acronyms,
so
I
would
love
everyone
to
make
sure
that
reshmi
and
valeras
feel
welcome,
because
it's
their
first
time
presenting
please
give
them
the
the
the
PNP
Community
I
love
that
everyone
always
does
awesome.
Okay,
so
we
have
a
whole
bunch
of
initiatives
that
are
available
to
you,
and
so
the
first
thing
is:
we
have
fire
platform
and
Microsoft
365
Community
videos.
B
We
also
have
a
LinkedIn
group
for
discussions.
We
have
open
source
initiatives
on
GitHub,
we
have
some
sample
Galleries
and
you
can
get
all
the
sample
galleries
in
one
place
by
going
to
AKA
on
the
mess
Community
sample,
and
then
we
have
all
our
open
source
initiatives
and
samples
in
one
place
you
can
go
to
aka.ms
community,
slash
home
to
find
out.
What's
going
on
now
we
have
Community
calls
going
on
Microsoft,
365
and
Power.
B
Platform
Community
calls
the
next
or
sorry
the
Microsoft,
365
and
Power
Platform
Community
call
is
going
to
be
going
on
a
summer
break
in
July,
so
the
last
is
going
to
be
on
the
27th
of
June
and
we'll
be
back
on
the
22nd
of
August,
and
then
we
have
the
Power,
Platform
monthly
call
and
the
office
add-in
monthly
call.
And
then,
of
course
you
can
join
us
in
Microsoft
in
365,
365
and
Power
Platform
Community
call
bi-weekly
until
June
27th
and
we
have
the
Viva
connection
and
SharePoint
framework
by
weekly
call.
B
B
C
Boy,
do
we
have
something?
So
yes,
we
have
sharing
is
caring.
Now
this
is
a
program
that
started
a
long
time
ago.
Everybody
is
loving,
it
that's
been
part
of
it.
What
is
it?
It
is
safe
space
opportunities
to
learn
more
together.
That
means
that
we're
going
to
join
sessions
live
in
teams,
calls
we're
going
to
accomplish
tasks
like
contributing
to
GitHub
if
you've
never
done
it
or
perhaps
setting
up
your
spfx
developer
workstation
using
some
of
those
samples
that
are
available.
C
We
know
that
it's
been
Troublesome
trying
to
get
these
scheduled
lately
and
we
are
working
on
that
we're
getting
everybody
that
wants
to
help
out
on
board,
so
we're
working
through
all
those
Logistics
right.
Now,
if
you
let
us
know,
thank
you
we'll
be
getting
back
to
you
here
soon
and
setting
calls
up
to
see
who
can
assist
with
administering.
They
are
absolutely
free.
They
are
safe
space,
which
means
they
are
not
recorded.
So
definitely
keep
an
eye
out
at
ak.ms.
Sharing
is
caring
for
the
latest
updates.
C
Now,
once
you
do
contribute
to
to
the
community,
we
want
to
recognize
you
for
all
the
amazing
work
that
you're
doing
this
is
our
recognition
program
powered
by
the
community
for
the
community
and
is
powered
by
credly.
So
a
lot
of
us
know
that
credly
that
you
get
when
you
get
Microsoft
certified
or
used
to
they.
They
ended
that.
So
we
just
want
to
make
sure
that
everybody
knows
that
this
has
not
changed.
For
us.
The
community
recognition
program
is
an
independent
relationship
with
credly.
C
We
just
renewed
in
fact,
and
we're
looking
to
create
even
more
campaigns
for
everybody.
New
badges
have
just
gone
out
yesterday
for
a
bunch
of
community
contributors,
so
thank
you
all
definitely
get
signed
up.
We
moved
over
to
a
MailChimp
to
try
to
manage
all
of
the
registrations,
so
you
just
need
you
to
opt
in
AK
dot,
Ms,
slash,
Community
recognition,
and
we
will
continue
to
track
the
amazing
contributions
you're
doing
and
and
recognize
you
for
them.
You
go
back
to
you.
B
D
No,
no
quick
update
on
a
from
an
engineering
site
related
in
our
SharePoint
framework,
so
1.17.3
version
went
live
yesterday.
Actually,
yesterday
evening,
my
time
at
Pacific,
Time
morning
time,
we
announced
that
our
social
media
pushed
it
out
earlier
today.
It's
basically
two
to
three
different
bucks
or
small
issues
which
we're
not
actually
impacting
anybody
in
1.17.2
or
so
on.
D
It's
more
on
us
fixing,
gradually
things
and
getting
it
out
there
rather
than
waiting
past
the
summer
for
1.18
and
all
of
that,
let's
go
to
the
following
slide,
and
this
shows
you
a
the
adoption
curve,
which
is,
by
the
way,
amazing
it's
a
mind-boggling
to
see
how
consistently
a
SharePoint
framework
usage
is
growing
worldwide.
We
have
tens
of
millions
of
monthly
active
users
for
SharePoint
framework
on
the
custom
components,
of
course,
on
the
Autobots
components
which
we
use
framework
building
those
as
well.
Those
have
hundreds
of
millions
of
users.
D
Now,
let's
go
to
the
following
slide
and
nothing
too
much
grammatical
on
the
roadmap
side.
At
this
point,
I
can
share
too
much
and
news,
but
we're
looking
into
now
to
identifying.
What's
in
1.18,
that's
going
to
be
scheduled
on
the
third
quarter
of
this
fiscal
year
at
sorry
calendar
year
which
meaning
between
July
and
September.
You
can
assume
that
that's
in
scale
of
that,
so
roughly
in
September.
D
The
new
thing
which
is
coming
pretty
soon
is
the
bot
driven
Viva
connection
cards,
and
this
is
not
taking
over
the
spfx
Viva
connection
cards,
it's
more
as
a
new
option
for
those
partners
and
who
have
built
already
bot
driven
capabilities,
so
they
can
use
the
same
but
the
power
with
a
connection
cards
and
the
future.
But
that's
a
quick
update
from
engineering
site.
Let's
move
on
the
open
source
side
awesome!
Thank
you.
Chips.
B
B
E
Thank
you,
Hugo
we
released
version
3.16
on
or
excuse
me
3.16
is
to
be
released
on
June
9th.
We
have,
as
always
various
documentation,
updates
and
fixes.
There
is
a
bug
fix
for
a
issue
with
a
circular
reference
on
the
webs
object
that
got
introduced
in
3.15,
so
that
fixes
in
so,
if
you
are
experiencing
that
issue,
you
can
go
and
use
the
nightly
build
in
the
meantime,
until
3.16
drops
that
will
get
you
over
that
hump.
E
We
have
a
fix
for
uploading
files
with
apostrophes
in
the
file
name
and
fixing
the
prop
Field
properties
for
multi-choice
field
creation.
The
other
big
thing
that
I
wanted
to
announce
or
talk
about
or
bring
up
is
that
we
have
just
under
started
way
on
version
4
planning.
So
there
is
a
pinned
issue,
2678
that
links
to
introduces
the
concept
and
links
to
a
project
planning
board
where
Bo,
Patrick
and
I
have
put
together
all
the
things
we
could.
Think
of
that
might
be
useful
to
address
in
V4.
E
So
if
you
will
are
interested
in
the
project
at
all,
even
if
you
are
not
a
someone
who
feels
they
can
contribute
directly
to
the
project,
absolutely
contribute
your
ideas,
so
go
check
out
that
issue.
Look
at
the
planning
board.
Look
it
over.
If
you
have
any
feedback
comments,
other
ideas
that
aren't
on
that
planning
board.
Please
put
a
comment
in
that
issue
2678
and
we
will
take
it
into
consideration
and
I've
already
mentioned
it,
but
don't
forget
about
those
nightly
builds.
E
B
F
Thanks
Hugo,
so
yeah,
it's
end
of
the
month
was
end
of
the
month,
so
we
released
a
new
version
of
CLI
for
Microsoft
365.
So
this
is
the
6.8
version
tons
of
new
commands
that
we've
added
into
this
release
a
couple
of
things
just
to
kind
of
highlight.
We
now
have
a
AI
assistant
in
the
command
line.
So
if
you
remember,
we
had
the
AI
powered
search
for
our
docs
added
about
a
month
ago.
F
The
same
technology
is
now
available
in
the
command
line,
so
you
can
just
ask
the
CLI
questions
and
it
will
return
the
answers
in
the
command
line
if
you're
ever
stuck,
and
you
don't
want
to
go
to
the
docks.
So
we
have
that
we've
also
had
a
docs
refresh
as
well.
So
if
you're
going
to
the
doc,
you
might
see
that
it's
it's
slightly
different.
So
we've
updated
the
technology
that
we've
used
in
our
docs
there.
We
have
a
tons
more
and
now
enhancements
as
well.
F
F
Okay,
so
again
end
of
the
month,
we
have
a
new
release
of
the
Microsoft
graph
developer
proxy,
so
we've
just
released
version,
0.8
included
in
this
release.
We
have
a
minimal
permissions
guidance,
so
this
is
a
new
feature
where
you
can
start
recording
all
of
the
requests
that
your
application
makes
to
Microsoft
graph,
and
we
will
return
you.
The
minimal
amount
of
permission,
Scopes
that
your
app
needs
to
to
to
actually
function
correctly,
which
is
great
for
auditing.
F
Just
to
make
sure
that
you,
you
know,
you're
not
giving
out
too
many
permissions
than
actually
needed.
We've
also
introduced
guidance
for
caching
as
well.
So
if
you're
making
the
same
request
at
multiple
times,
we
might
suggest
that
you
implement
some
some
cache
behavior
in
there
and
we've
also
updated
the
throttling
behavior
and
now
what's
going
to
come
next
month
for
the
next
release.
B
Thank
you,
and
so
to
talk
about
the
spfx,
reusable
controls.
We
have
two
types
of
controls
right:
the
react
controls
which
are
meant
for
the
body
of
your
webparts,
and
so
we
have
on
419
2023
release
version
3.14
with
spfx
117
One
support.
We
also
have
the
react
property
controls
which
will
go
into
property
pane,
so
version
3
13.0
was
released
on
the
same
date.
D
There
you
go
now
it's
okay,
so
the
video
connection
is
an
extension,
a
wrapper
on
top
of
the
SharePoint
framework,
human
generator.
So
for
those
who
want
to
use
this,
this
is
actually
on
top
of
the
German
generator.
It's
kind
of
a
usage,
German
generator
behind
us
the
scenes-
and
there
is
a
general
availability
version
out
of
this.
So
this
is
Community
Driven
Community,
created
together
with
Microsoft
and
helping
and
doing
an
abstraction
layer
on
top
of
the
human
generator
we're
looking
contributors
here,
we're
looking
feedback
in
here.
D
It
already
integrates
and
helps
the
development
enormously.
So
if
you're
not
super
familiar
with
human
generator
and
all
of
the
options,
there
have
a
look
on
this
one.
You
can
use
samples
and
scenarios
a
starting
point
and
all
of
those
sorts
of
stuff
within
the
extensions,
and
we
do
have
a
nice
set
of
videos
explaining
all
of
the
features
as
well.
That's
it
for
this
one!
Please,
please
give
us
feedback
awesome.
B
Thank
you
now,
the
PMP
modern
search.
We
have
a
version
4.9
coming
soon.
The
Beta
release
will
be
released
next.
This
week
and
again
we
love
to
hear
your
feedback
and
thank
you
to
everyone
for
contributing
and
I
think
Casper
yeah.
Thank
you.
Everyone
for
your
help
on
the
spfx
samples.
We
have
repositories
for
samples.
We
have
extensions,
webparts,
adaptive
card
extensions.
We
love
to
see
new
samples.
B
Please
don't
hesitate
to
to
submit
your
samples
and
I
have
some
samples
that
I
need
to
actually
share
with
you
very
shortly,
but
thanks
everyone
all
right.
So
let's
get
started
for
our
optional
picture
time.
If
you
would
like
to
show
that
you
are
here,
and
you
want
to
spread
the
the
love,
there's
your
chance
and,
of
course,
we'll
add
more
Mark
Anderson's
by
the
magic
of
AI,
all
right,
we're
going
to
take.
D
B
B
G
B
D
And,
let's
start
the
recording
three
two
one
and
let's
do
some
hand
faving
everybody.
Thank
you
for
joining
once
again
awesome
to
have
you
on
call.
This
is
actually
super
fun
to
do
always,
even
though
they
don't
take
too
long.
That's
great
to
have
you
in
a
call,
and
it's
great
to
say
the
real
people,
not
just
the
audio
and
videos
behind
those
things,
excellent
and
you
even
yes,
you
people
in
the
back
row
or
third
row
that
somebody
was
talking
to
myself.
So
even
me,
yes,
even
here,
yeah
excellent.
Thank
you.
Everybody.
B
H
Thank
you
very
much
hello,
everyone,
hopefully
I'm
Audible,
and
now
you
can
see
my
screen.
It's
all
yours,
yeah
thank
you
yeah.
So
today,
I'm
going
to
talk
about
how
to
get
Instagram
feed
into
SharePoint
using
spfx.
So
a
little
bit
about
me,
so
my
name
is
currently
work
as
software
developer
in
other
company
called
fashion,
production
fund
and
I've
been
contributing
to
the
community
for
a
couple
of
years,
and
these
awesome
of
a
awesome,
badges
have
received
and
yeah.
H
This
is
my
Twitter
handle,
so
you
can
reach
out
anytime,
even
after
the
presentation
or
for
any
other
things.
The
solution
was
originally
developed
by
Bruce
Cara.
So
that's
why
I
got
a
slide
about
her
say
it's
based
on
her
blog
post,
which
is
on
medium,
so
I'll
put
the
link
in
there,
and
these
are
our
contact
details
which
she
kindly
share
it
with
me.
H
So
what
I've
done
so
I've
upgraded
the
solution
from
spfx
111
to
spfx
116,
so
my
Approach
was
to
start
from
scratch.
Scaffolding,
a
new
solution
using
the
latest
spfx
1.16,
obviously
there's
a
new
version,
spfx
117,
but
yeah
that
was
done
like
three
months
ago
and
added
all
the
libraries
ensuring
the
latest
were
being
used
using
the
npm
install
and
copied
the
the
web
part
code
from
the
old
solution
to
the
new
solution
and
refactoring
all
the
code
to
ensure
compatibility
with
the
latest
Library
as
we're
using
react.
H
You
can
go
across
all
the
posts
that
you
own
and
when
you
over
over
each
other
posts,
you
have
a
caption
from
the
Instagram
which
get
displayed
and
then,
if
you
click
on
any
other
posts,
it's
going
to
open
it
onto
Instagram.
Okay,
let's
have
a
look
at
some
of
the
properties,
so
the
most
important
property
for
that
particular
weapon
to
work
is
a
user
token
and
we
use
a
token.
H
You
need
to
have
all
an
Instagram
and
a
Facebook
account
to
be
able
to
generate
the
user
token.
So
the
GitHub
repository
where
the
web
pod
is,
with
some
instructions
how
you
can
generate
a
user
token
and
the
rest
of
everybody,
like
the
name
account
name,
your
Instagram
account
icon.
If
you
want
to
show
the
icon,
yes
or
no
and
the
layout
one
third
right
is
just
to
change
your
aspect.
H
Ratio
of
the
image
here,
I've
got
a
second
web
part,
but
just
with
the
properties
being
filled
so
I
have
to
show
you
the
Instagram
icon
and
then
here
it's
kind
of
change.
The
aspect
ratio
of
the
image
to
a
bit
smaller
and
to
display
the
name
yeah
say
but
and
then,
if
you
click
on
one
particular
post,
so
it
would
just
opened
the
Instagram
post
directly
onto
Instagram,
where
you
can
engage
with
a
post.
If
you
need
to
say
no,
let's
go
back
to
the
demo
yeah
so
in
in
the
code.
H
The
most
important
bit
is
the
call
to
the
Instagram
and
point
here.
It's
calling
the
phonecraft.instagram.com
and
I'm
passing
the
user.
Token
I've
set
the
web
part
property
and
and
then
based
on
this
status
of
a
call.
Sorry
I'm
just
calling
a
function
to
handle
success
and
want
to
enter
failure
and
behind
the
scene.
What
it
does
is
just
set
up:
B
properties
for
any
particular
arrows
or
just
load
the
feeds
and
then
I
do
have.
If
I've
ever
status
quo,
it
is
not
200
or
4
or
4.
H
It
will
do
a
recursive
Loop
to
try
to
get
the
data
until
it's
successful,
but
maybe
it
could
be
improved
just
to
add
a
maximum
of
try
of
five
yeah.
So
that's
it
and
forget
data
a
kind
of
function,
I
loaded,
one
of
the
company
dismounted,
but
in
that
case,
because
I'm
using
react
hook,
I'm
kind
of
calling
it
under
the
use
effect
function.
H
H
That's
where
but
control
this
wipers
that
I
come
from
and
then,
depending
on
the
media
type,
whether
it's
a
video
or
image,
I'm
kind
of
using
the
correct
control,
whether
it's
a
video
or
else
I'm,
just
displaying
an
image
and
then
finally,
just
having
like
a
swiper
parent
control
to
which
I'm
passing
the
child's
sideboards
that's
control
to
get
the
display
that
I've
shown
earlier
in
the
demo.
So
one
of
the
things
that
need
what
you
need
to
bear
in
mind.
H
What
solution
is
currently
using
the
Instagram
basic
display
API,
which
has
the
endpoint
crafted
instagram.com
and,
as
a
name
kind
of
implies.
It
just
allows
you
to
to
do
basic
functionality
like
retrieving
basic
profile.
Information
photos,
videos
from
the
user's
Instagram
account,
so
it's
not
very
feature
Rich
and
in
case
you
might
want
to
do
something
much
more
advanced
like
allowing
your
user
to
engage
within
your
app.
Maybe
consider
something
like
the
what
we
call
the
Instagram
graph
API
and
the
end
point
is
a
little
bit
different
craft.facebook.com.
H
But
for
my
scenario,
very
comments
was
quite
simple:
to
just
have
the
Instagram
feed
onto
a
SharePoint
page
with
no
Advanced
features
with
number
one
limitation,
which
is
it
has
a
limit
of
calls?
You
can
do
per
hour
per
user
per
app,
but
was
something
which
I
needed
to
find
a
solution
around
it,
because
if
you
have,
if,
if
you're
planning
to
deploy
the
application
for
500
users,
we
example
and
if
all
of
them
wants
to
use
it
up
at
the
same
time,
there's
a
high
chance.
But
it's
not
going
to
work.
H
50
of
the
time
say
what
I've
done
is:
I've
used
essential
power
to
meet
flow.
Now,
there's
a
template.
If
you
want
to
go
and
check
it
out,
it's
called
V
get
Instagram
feed
into
shareboard
lists,
save
power
automate.
If
create
a
flow
and
look
for
it.
It
will
come
up
and
then
you
can
use
it
and
configure
it
to
point
to
the
correct
SharePoint
list
and
you
can
set
residual
even
if
you
set
it
five
every
five
minutes.
It's
not
going
to
reach
with
240
calls
per
hour.
H
240
calls
per
hour
limit
and
the
other
advantage
of
using
power
to
mate
for
the
yeah
I'm
using
I
have.
But
template
uses
the
independent
publisher
connector.
So
when
you
create
a
connection
to
the
connector,
you
can
specify
the
access
token,
and
in
that
way
it
kind
of
keeps
the
access
token
secure
as
well
and
in
the
end
I'm
just
using
some
view.
Formatting
view
formatting.
You
know
this
is
just
Json
mixed
with
HTML
ncss.
H
H
Otherwise
yeah
the
alternative
could
have
been
like
using
Azure
function.
To
do
the
back
end
call
on
a
scheduled
basis
and
using
spfx
to
improve
a
design,
but
for
me
yeah,
just
a
local
kind
of
solution.
Kind
of
work
in
the
end
yeah,
so
this
is
a
list
of
references
if
you
want
to
look
more
into
the
Instagram
basic
display,
API
documentation,
as
well
as
Instagram
graph
API
documentation
and
see
which
one
work
and
I've
put
I
think
to
the
independent
publisher
connector.
H
If
you
want
to
have
a
look
and
I'll
say,
thank
you
like
to
Andre
large,
because
I've
used
one
of
these
sample
and
simplified
it
to
be
able
to
achieve
it,
create
like
structure
and
yeah
and
then
in
the
link
in
the
end
is
a
blog
post
which
recently
got
published,
but
it
kind
of
go
through
this
test,
which
you
can
go
through
to
implement
using
other
code
solution
yeah.
So
that's
it
from
me.
B
Thank
you
that
was
a
fantastic
demo
and
again
there's
a
lot
of
hard
work
that
went
into
this
many
contributions
and
also
thank
you
for
recognizing
and
working
with
the
contributions
of
others.
So
that's
wonderful
and
again,
everyone
please
give
a
warm
hand
to
Rich
me.
It
was
her
first
presentation
there
you
go.
Thank
you
David,
now,
speaking
of
first
presentations,
let's
move
on
to.
C
B
G
You
hello
hello,
so,
as
I
mentioned
in
the
chat,
Adrenaline
Rush,
not
usually
speaking,
to
a
big
crowd
of
the
specialists,
so
it's
me
I'm,
valeras,
I'm,
soft
developer,
working
at
MaComb,
currently
based
in
Vilnius
in
Lithuania,
and
looking
at
my
hashtags,
basically
I
try
to
cover
what
my
hope
is
is
our
expertise
and
I'm,
basically
building
things
with
SharePoint
from
SharePoint
second
version
2003,
so
I'm,
one
of
those
that
still
remember
how
it
looked
and
well
my
credentials
are
on
the
bottom
and
most
of
the
my
career.
I
was
also
infrastructure
engineer.
G
So
that's
related
to
to
my
example.
Actually
why
I'm,
you
know
was
a
bit
surprised
to
learn
something
new,
so
I
will
share
it
with
you
guys
so
how
it
started
for
me:
I,
usually
not
the
one
who
is
very
good
in
ideas
and
always
envy
people
to
submitting
samples
in
in
in
those
repos
I,
usually
just
get
one
and
upgrade
it's
easier
for
me
than
to
think
on
our
idea.
But
someone
asked
for
their
help
in
issues
and
it
was
like.
G
Can
you
help
me
just
use
spfx
controller
iframe
panel,
which
was
not
working
so
I
thought?
Why
not
and
started
working
on
that
one
and
it
was
for
me
as
a
developer.
Of
course,
it
was
not
very
complicated
and
I
won't
be
sharing
much
of
the
code,
because
there
is
none,
but
result
was
pretty
nice
I
will
I'm
I'm
already
using
that
quite
extensively.
So
this
is
second
part.
G
This
is
how
a
description
of
implementation
looks
like
in
spfx
Dev
controls
about
the
shield,
and
you
can
see
it's
not
much
of
a
code.
It's
just
one
component
with
some
properties
which
I
used
in
the
code,
and
this
is
my
code
as
you
can
see.
It's
those
components
that
were
as
primary
button
and
iframe
panel,
basically
doing
all
the
magic
and
what
is
what
magic
is
about.
So
what
I
didn't
know
when
you
use
iframe
like
this
with
this
control,
you
could
use
that
to
display
list
item
with
all
the
actual.
G
G
It's
a
bit
uglier,
sorry
about
that,
but
let's
check
what
is
the
setup
of
that
part?
For
me,
it's
very
very
simple
one.
Just
one
URL
you
want
to
open
with
this
button
right
so
and
I
posted
just
list
edit
form,
for
example,
and
I
was
really
surprised
that
you
can
get
all
the
actions
here
without
any
hassle
out
of
the
box,
and
it
was
really
nice.
I
can
also
think
a
lot
of
solutions
that
you
can
use
it,
for
example.
G
Well,
when
we
were
talking
about
search
extensibilities
and
the
content
query
the
part,
for
example,
all
those
results
that
you
you
use
handlebars,
you
can
use
that
for
the
document
preview
or
edit
item
from
the
results
from
the
search
result,
which
is
neat.
Sometimes
people
need
that
so
check
this
out
list
preview,
wow
document
preview:
this
is
just
opening
document
and
you
can
edit
it
saving
again
with
all
the
ribbon.
Pretty
nice
list
view
with
all.
D
G
B
That's
fantastic,
thank
you,
and
for
for
those
of
you
who
are
wondering
hey,
you
know,
I,
don't
I
I
want
to
contribute
to
the
committee.
I
just
don't
know
where
to
get
started.
This
is
a
great
example
of
valera's.
Looking
at
the
issues
list
in
the
PMP
samples
gallery
and
then
looking
for
sometimes
you'll
see
items
marked
as
Help
Wanted.
B
As
you
can
see
this
one
here,
you
can
actually
volunteer
anything
that
says
help
wanted
is,
is
open
for
contributions,
and
the
other
thing
too,
is
we'll
often
Mark
things
that
are
a
bit
simpler
to
get
started
as
a
good
first
issue,
and
that's
what
you
see
the
the
purple
one
there
good
first
issue.
So,
if
you're
looking
for
inspiration,
that's
a
great
place
to
do
and
valeris.
Thank
you
for
your
for
your
demo.
Again.
Everyone
please
put
your
hints
together
for
valerz.
B
A
Thanks
a
good
thing,
thanks
thanks
everyone
today,
I'm
going
to
talk
about
an
Adaptive
card
extension
where
we
can
display
a
daily
Insight
with
open
your
API.
This
was
one
of
the
sample
which
I
had
collaborated
and
developed
with
kunj.
Also
so
before.
I
start
the
demo
little
bit
about
myself,
I'm
siddharthasia
I
am
Microsoft
MVP
and
I
love
working
on
SharePoint
teams
of
development,
Power
Platform,
Etc
I
am
an
active
contributor
in
PNP,
where
in
the
contributed,
various
SPF
examples,
teams,
app
samples
and
Sample
script.
A
A
A
So
the
it
started
with
an
kind
of
an
idea
on
where
invents
the
open,
API
jtpd,
open,
API
started
appearing.
You
know
people
were
finding
different,
different
use
cases
different
different
ways
to
explore
the
open
API.
So
this
was
one
of
my
driving
Factor
wherein
I
thought
you
know.
Let
me
just
see
what
we
can
do
with
the
open
API.
A
So,
ideally,
we
thought
of
having
something
wherein
we
can
kind
of
create
an
Adaptive
card
extension,
which
would
be
which
would
use,
chat,
GPT
or
open
API,
open,
AI
API
to
get
the
response
and
display
them
in
the
format
right.
So
the
another
driving
factor
is,
you
know
like
if
we
can
make
some
use
case
out
of
it.
It
would
be
great.
So
what
we
did
was
we
started
with
some
prompt
engineering
to
use
the
GPT
to
see
what
kind
of
response
it
is
giving.
A
So,
in
terms
of
summary,
this
adaptive
card
extension
solution
can
be
configured
to
show
different
kinds
of
things
like
you
can
get
quote
of
the
day.
You
can
get
fact
of
the
day
tip
of
the
day.
What
has
happened
in
today
in
the
history
grammar
tip
motivational
words
see.
These
are
some
of
the
problems
which
are
done
in
terms
of
configurable
options.
You
we
have
an
option
to
configure
the
API
key,
which
is
basically
the
open,
open,
AI,
API
key.
A
Then
you
would
be
able
to
select
different,
prompts
and
categories
based
on
which
the
Adaptive
card
extension
would
make.
The
API
call
get
the
response
and
put
it
in
the
quick
view
format.
You
can
also
specify
maximum
token.
This
is
very
important
because
of
the
open,
AI
rate
limit.
You
know
how
much
tokens
you
wanted
to
use
for
a
particular
request
for
that
you
would
be
able
to
configure
it.
If
you
want,
you
know
250
tokens
or
500
tokens
to
be
used.
A
A
A
Though
this
is
a
sample
and
we
are
using
and
calling
the
open
API
from
the
client
side
as
in
Sample,
but
it
is
not
advisable
to
do
it
because
your
API
key
would
be
exposed
to
anybody
who
can
use
the
network
tab.
So
don't
don't
use
this
sample,
as
in
production,
try
to
create
a
middleware
using
Azure
function
or
some
server
side
apis
through
which
you
would
be
able
to
do
similar
kind
of
usages.
A
So
I
had
added
this
adaptive
card
extension
here,
so
this
is
the
one
which
we
are
talking
about
today
and
if
you
see
it
says
you
know,
card
title
and
card
description
and
once
you
click
on
explore,
it
will
just
basically
give
you
the
quote
of
the
day.
What
you
can
do
is
you
can
click
on
next
and
you
can
get
the
next
quote
of
the
day.
A
Also,
this
is
what
I
was
talking
about
for
you
to
easily
navigate
and
get
next
part
of
the
day
for
the
user
right
in
terms
of
configurable
options.
So
if
we
go
here
and
if
we
edit
it
so
this
is
the
maximum
token.
This
is
the
API
key,
then,
which
kind
of
model
we
are
using
to
get
the
charge
BPD.
So
it
is
also
configurable
and
then
these
are
the
different
prompts.
A
A
So
yeah,
so
it
says
according
tape,
when
writing
a
code
use
meaningful
variable
names.
This
will
help
you
to
make
code
easier
to
read
and
understand
right
and
then
again
you
can
click
on
next
So.
Based
on
this,
you
would
be
able
to
use
this
adaptive
card
extension
to
give
some
customized
daily
insights
to
the
user
in
your
Viva
connection,
dashboard
using
chatgpt,
open,
API,
okay.
So
now
let
me
go
to
the
code
to
do
Code
walkthrough,
so
it
is
a
typical
adaptive
card
extension.
A
We
have
one
car
view
and
one
quick
view
and
other
than
that,
whatever
we
are
doing,
we
are
just
using
and
dynamically
replacing
the
content
within
the
card
view.
First,
let's
start
with
the
property
pin
configuration.
So
if
you
see
here,
these
are
the
configurable
properties
which
are
available
including
model
maximum
token
API
key
Etc.
One
thing
which
we
have
to
understand
is
the
prompts
okay.
A
So
basically,
this
is
kind
of
an
key
value
pair
of
the
prompts
and
the
actual
text
which
we
are
sending
to
open
AI
this
this
for
some
of
them
it
might
be
very
similar,
but
just
to
make
it
in
human,
readable
format.
Some
of
them
are
changed
like,
for
example,
grammar
tip.
The
text
to
be
displayed
is
grammar
tip
of
the
day.
A
Motivational
wisdom
is
motivational
quote,
so
this
is
how
kind
of
a
simple
prompt
engineering
we
have
used
using
chat
GPT
to
see
what
kind
of
responses
it
is
getting
based
on
what
prompts
we
are
sending
to
the
open
AI.
So
this
is
the
kind
of
the
response.
This
is
the
kind
of
the
prompts
which
we
are
sending.
A
Then
in
the
extension
we
have
a
state
object
wherein
we
are
setting
the
inside,
which
is
basically
a
string
which
is
written
from
the
response.
Then
we
have
an
error
if
there
is
any
error
to
handle
the
error
and
then
there
is
a
next
counter,
which
is
the
number
on
init
method.
It
is
very
similar,
init
method,
where
we
are
registering
the
card
View
and
the
quick
view.
This
is
the
setup
code
which
comes
when
we
are
creating
an
Adaptive
card
extension
and
then
in
init
method.
We
are
loading.
A
The
data
right,
so
load
data
is
the
method
which
is
basically
doing
all
the
magic
of
calling
the
open
AI.
If
your
API
keys
and
everything
is
not
configured,
what
it
will
do
is
it
will
just
give
you
kind
of
an
error
saying
there
is
a
missing
configuration.
So
please
check
with
the
admin
in
terms
of
storage.
We
are
getting
the
data
from
the
storage
key.
A
If
we
find
something
we
are
using
that
as
an
Insight,
so
that
if
the
user
is
clicking
again
or
if
user
is
refreshing,
it
gives
you
the
same
Insight
which
has
loaded
to
save
the
request.
If
not,
we
are
making
an
API.
So
basically,
we
are
using
completion
API,
where
we
are
passing
the
API
key
as
in
Bearer
token,
and
once
we
have
that
we
are
passing
model,
we
are
passing
the
prompt.
A
A
Next,
we
are
in
the
card
view,
so
card
view
is
very
simple:
the
primary
text
in
the
description.
What
we
have
is
we
have
the
primary
text.
If
it
is
configurable,
then
it
will
show
it
from
the
configurable
property,
if
not,
it
will
just
display
by
default.
You
know
daily
insight
and
click
explode
to
view
the
category
which
has
been
selected.
This
is
how
the
description
is
made.
A
A
A
Sorry,
so
what
we
have
is
we
are
having
inside.
We
have
category
and
we
have
the
next
counter
right,
and
this
data
is
passed
to
the
quick
view,
template
Json,
which
we
will
see
in
a
while,
but
basically
it's
just
NPR
text
which
has
been
written
from
the
response
now
on
click
of
next.
What
we
are
doing
is
we
are
again
calling
it
again
as
this
was
a
sample.
This
can
be
added
into
a
proxy
or
a
service
provider
class
and
can
be
used
from
there.
A
But
ideally
we
just
put
it
here
towards
for
the
Simplicity
of
the
sample.
Again,
we
are
calling
the
API
getting
the
next
data
and
setting
the
state
object
to
the
choices
which
we
get
from
the
API,
and
then
we
are
setting
the
same
Insight
in
the
local
storage
key.
So
this
is
when
the
user
clicks
on
the
next
button,
then,
in
the
template
method
we
are
loading.
The
template,
Json
template
Json,
is
very
basic.
B
Thank
you
and
it's
worth
pointing
out
that
this
actually
was
a
last
minute
replacement
for
our
speaker.
So
thank
you
for
for
jumping
in
and
doing
an
awesome
presentation.
The
other
thing
to
point
out
is
the
code
sample
that
sudarth
is
showing
uses
a
code
tour,
which
is
something
that
allows
you
to
to
walk
through
the
code
yourself,
which
is
what
so
Dr
used
today.
Some
of
our
samples
actually
use
code
tour.
If
you,
if
you
are
interested,
we
posted
the
link
in
the
chat.
B
So
thank
you
again
to
reshmi,
valeras
and
sidharth
for
your
awesome
demos
again.
We
we
always
welcome
new
speakers,
and
you
know
if
it
was
any
example
race
me
and
valeras.
You
know
new
speakers
do
an
awesome
job.
Thank
you
all
right.
If
you
want
to
give
us
feedback
on
the
calls,
you
can
rate
the
call
content,
you
can
provide
input
on
how
we
can
improve.
B
You
can
go
to
ak.ms,
slash
Community,
slash
calls
feedback,
maybe
when
your
feedback
can
be
to
have
less
slashes
in
our
aka.ms
and
you
can
join
our
official
Discord
server
as
well.
That's
right
we're
using
Discord
because
we
are
cool.
You
can
share
your
knowledge,
ask
questions
and
stay
up
to
date
on
the
latest
trends
in
development.
There's
a
QR
code
there
or
you
can
go
to
aka.mslash
community,
slash,
Discord
and
we'd
like
to
thank
everyone.
The
recording
will
be
available
in
24
hours
on
the
YouTube
channel.
B
Please
don't
try
to
download
the
the
recording,
because
it's
only
available
for
Microsoft
employees.
You
can
follow
us
on
Twitter
at
Microsoft,
365
Dev
or
at
Microsoft
365p
at
M365
PNP
and
our
next
Viva
connections
and
spfx
call
is
going
to
be
on
June
15th
at
7
A.M
Pacific
time.
Our
next
Microsoft
65
Empire
platform
call
is
June
8th
at
7am
Pacific
Time.
Now,
of
course,
all
the
community
calls
are
available
at
aka.ms,
slash,
Community,
slash
calls,
and
with
that.
Thank
you.
Everyone.