►
Description
Viva Connections & SharePoint community call on August 10th 2023. Recap on news and updates from Microsoft and community projects, followed by demos by the community.
✨ Call included three demos:
• Anoop Tatti (Content+Cloud) | @anooptells - Creating a Personal Assistant with SPFx using OpenAI Function Calling and Microsoft Graph
• Hugo Bernier (Microsoft) | @bernierh - Improving your SPFx development process with environment variable
• Daniel Turley (Avanade) - SPFx framework at Microsoft - Accelerator Tooling
Q&A takes place as always in chat throughout the call.
💻 Screenshot summary for this call | https://warner.digital/pnpsummary08242023/
Please see the blog post for details on demos, project updates and activities.
👏 Host:
• Chris Kent (Takeda) | @thechriskent
📃 Agenda
00:00 Introduction
04:26 Latest on the SharePoint Framework
06:49 PnPjs
09:19 CLI for Microsoft 365
11:03 Microsoft 365 Developer Proxy
12:16 Reusable PnP SPFx controls
14:40 Viva Connections Toolkit VS Code extension
15:22 PnP Search web parts
15:47 New samples
17:23 Picture time with Together Mode!
18:34 Anoop Tatti (Content+Cloud) | @anooptells - Creating a Personal Assistant with SPFx using OpenAI Function Calling and Microsoft Graph
32:51 Hugo Bernier (Microsoft) | @bernierh - Improving your SPFx development process with environment variable
47:27 Daniel Turley (Avanade) - SPFx framework at Microsoft - Accelerator Tooling
📝 Learn more
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• OpenAI Function Calling – https://openai.com/blog/function-calling-and-other-api-updates
• Azure OpenAI Function Calling – https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/function-calling
• Sample – https://github.com/pnp/sp-dev-fx-extensions/pull/846
• Rhythm of Business Calendar sample - github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar
• SPFx Solution Accelerator documentation - https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar/documentation
💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home
Sharing is caring! You are awesome! 🧡
A
A
All
right,
I'm,
your
host
Chris
Kent
and
we're
gonna
look
at
all
sorts
of
exciting
things
today,
including
we've,
got
a
bunch
of
updates
on
SharePoint
Frameworks
for
SP
effects.
We've
got
a
bunch
of
project
updates,
we're
going
to
take
an
awkward
photo
during
together
mode
and
then
we've
got
three
awesome
demos
from
you
coming
from
a
Daniel
Turley
and
new
Toddy
and
Hugo.
A
A
A
Awesome
David
that
was
your
One-Stop
shop
to
find
all
of
this
information
find
the
links
to
all
of
these
things,
including
links
to
our
other
calls
and
so
on.
So
you
can
stay
up
to
date
and
informed
so
up
here,
we've
got
all
the
community
calls
we
just
mentioned
here.
If
you
check
out
these
links,
someone
want
to
mute.
Somebody
that'd
be
great,
but
check
out
these
links.
They
will
quickly
join
you
to
the
call
they'll.
A
Add
the
things
to
your
calendar,
you
can
do
all
the
exciting
stuff
and
join
them
and
you'll
be
like
wow.
It's
amazing.
Just
like
that
perfect
all
right
and
then,
of
course,
we
have
our
Power
Platform
weekly
call.
The
next
one
here
is
on
the
29th
of
August,
for
the
next
Wednesday
is
that
right
sounds
right,
perfect.
A
You
would
think
I
would
know
that,
and
yet
all
right,
so
please
sure
to
join
that
all
sorts
of
exciting
stuff
coming
up
here.
We've
got
three
exciting
Dibbles
over
there,
including
for
the
Microsoft
team,
all
right
and
then,
if
you
want
to
present,
if
you
want
to
be
one
of
the
lucky
people
on
this
call,
please
fill
out
this
form.
Everyone
is
welcome
and
we're
happy
to
help
walk
you
through
it.
We're
happy
to
provide
guidance
on
your
presentation
on
the
the
different
ways
to
do
this
stuff.
A
If
you
need
help
with
your
demo,
if
you
want
to
co-present,
we
just
want
to
get
you
on
here.
We
want
to
get
you
involved
in
things
and
I.
Think
you'll
find
it's
way
less
scary
than
you
think
you
do
have
cool
stuff.
You
don't
have
to
show
some
amazing
amazing.
You
know
insane
thing
right.
You've
been
working
on
for
six
months.
It's
just
something
you
think
will
help
other
people
out
that
you
did
that's
cool,
show
it
off
all
right
and
then.
A
C
You
know:
hey
it's:
okay,
I,
like
how
you
put
it,
you
know
a
bunch
of
guys
not
recorded.
You
know
sounds
like
a
time.
Yeah,
all
right,
friends,
yeah
so
sharing
is
caring,
is
a
program
that
we
use
to
provide
Hands-On
guidance.
What
does
that
mean?
Like
Chris
said
it's
a
safe
space?
We
don't
record
these
sessions,
they
are
live,
they
are
Hands-On.
We
work
together.
We
do
things
like
submit
your
first
pull
request
if
you've
never
done
that,
we
explain
things
around
GitHub
and
the
like.
C
That
may
be
confusing
to
you
and
we'll
walk
you
through
it.
So
you'll
leave
those
sessions
feeling
confident
and
ready
to
tackle
your
first
contribution
if
you've
never
done
it.
Even
if
you
just
need
a
refresher,
it's
a-okay
we've
got
a
Power
Platform
samples
contributor
coming
up
next
Wednesday
August
30th
and
you
are
more
than
welcome
to
join.
We
got
a
number
that
are
already
registered.
We're
using
teams.
Webinar
features
so
you'll
get
an
invite
immediately
and
it'll
be
a
good
time.
C
Definitely
join
in
and
let
us
know
if
you
have
any
questions,
we're
going
to
be
scheduling.
Some
more
of
those
as
well
and
you'll,
be
you'll,
be
ready
to
rock
and
roll
to
get
more
involved.
Now,
once
you
have
contributed,
we
want
to
recognize
all
the
work
you're
doing
with
our
recognition
program,
powered
by
correctly.
We've
got
some
fun
themes
coming
up
here
soon,
just
like
I
guess:
Starbucks
kicked
off
their
PSL
today,
so
hey
we're
giving
you
a
little
sneak
preview,
pumpkin
spice
a
lot
of
commits
so
definitely
get
involved.
C
It's
gonna
be
some
fun
themes
coming
up
for
the
the
seasons
and
it
is
absolutely
free
to
get
involved
and
to
register
AK
dot.
Ms
slash,
Community
recognition.
We
want
to
recognize
you
great
way
to
show
off
that
you're
doing
a
little
bit
more
in
the
community
than
maybe
your
competitor
so
great
way
to
get
involved
and
show
that
you're
doing
more
Chris
back
to
you.
A
B
There
is
the
new
templates
on
the
Viva
connection,
there's
going
to
be
a
lot
of
lot
of
river
connection
announcements
coming
up
on
the
Autumn
as
we're
changing
and
improving
that
experience
quite
a
lot,
and
not
only
on
the
dashboard
side,
but
also
on
the
river
connection
side.
Let's
go
to
foreign
slide,
quick
recap
on
the
growth
and
this
is
actually
updated
from
this
week.
So
the
growth
is
looking
incredibly
good.
So
the
usage
has
steady
and
the
growth
curve
is
a
massive.
B
So
we
have
tens
of
millions
of
monthly
active
users
for
custom
spfx
components
all
up
in
Microsoft
365.,
let's
go
to
reflect
site,
we
did
Cover
a
bit
of
the
SharePoint
framework
roadmap
already
earlier
this
week
on
the
Tuesday
call.
So
there's
a
bit
of
a
longer
and
description
and
and
discussion
points
on
that.
B
1.18,
as
mentioned,
is
coming
up
on
September,
so
relatively
new
and
main
focus
is
on
the
river
connection
side
and
we
also
there's
a
relay
related
release
which
we're
going
to
demo
next
week,
which
is
the
river
connection,
Atlant
score
designer,
so
no
code,
low
code,
experiences
for
building
for
viewer
connection,
it's
actually
a
really
really
cool
thing.
A
lot
of
future
stuff
here
as
well.
B
Let's
go
down
for
next
slide
and
these
are
basically
just
additional
slides,
calling
out
some
features
which
are
related
on
SPF
x1.18,
so
announcements
for
Microsoft
field
connection
is
actually
now
partly
out
because
I
can
see
the
documentation
already
in
available
in
the
Microsoft
plan.
So
that's
rolling
out,
there's
a
chat,
I
added,
a
link
on
the
chat
and
then
multiple
viewer
connection,
experiences
and
themes
is
for
multiple
divisions,
who
can
have
a
separate
experiences
for
Frontline
workers,
really
pretty
cool
stuff
and
then
I
guess
it's
time
to
move
to
cover.
B
Oh,
yes
and
then,
of
course,
the
modern
SharePoint
we're
looking
into
announcing
more
and
more
capabilities
and
features.
I
guess
this
will
be
around
ignite
time
frame
more
details
on
this
one.
Some
of
this
one
was
showed
already
Las
Vegas
in
Spring
this
year,
so
there's
going
to
be
a
revamp
of
the
ux
for
SharePoint,
a
lot
of
a
lot
of
cool
stuff,
and
you
can
extend
all
of
this
stuff,
you're
saying
SharePoint
framework,
so
really
really
cool
and
then
we'll
jump
on
the
individual
other
projects.
A
B
A
D
Right
you're,
a
nutcase
and
I
love
it
I'm
here,
for
it
all
right
version,
318
to
be
released.
September
11th.
We
had
not
very
many
updates,
so
we
are
going
to
skip
the
August
release.
We
did
have
a
few
documentation
things
I
merged
those
in
on
821,
so
the
documentation
PR's
are
updated
and
merged
in,
but
we
will
have
no
official
release
in
August
so
that
moves
it
out
to
September
11th.
D
The
rest
of
the
the
team
is
a
hard
work
on
version
four,
so
we
have
that
issue
pin
26.78.
That
is
our
planning
board.
So
it
tells
you
what
is
on
the
docket
for
version
four
and
very
soon
we
will
have
version
4
nightly
build,
so
you
can
start
checking
out
the
early
updates.
We
do
have
a
open
request.
This
is
sort
of
a
speak
now,
I
didn't
put
the
forever
hold
your
piece,
but
it's
pretty
much
a
forever
hold
your
piece.
D
We
are
potentially
going
to
deprecate
the
queryables
extensions
feature.
We
don't
see
much
use
of
it
and
because
it
adds
like
a
layer
into
every
call,
because
we
have
to
check
to
see
if
there's
any
extensions,
we're
kind
of
thinking
that
maybe
this
is
something
that
we
should
remove,
and
so,
if
you
have
any
thoughts
or
are
using
queryable
extensions
and
want
to
give
your
two
cents,
please
submit
an
issue
reach
out
to
us.
D
However,
you
might
want
to
do
that
and
let
us
know
that
you're
using
it
and
that
it's
important
to
you,
because
if
we
don't
hear
from
anybody,
we're
going
to
assume
that
nobody's
using
it
and
we
are
pretty
certainly
going
to
deprecate
it
as
always,
if
there
are
any
PRS
on
the
V3
build,
you
can
check
out.
The
V3
nightly
builds
to
see
navprs
that
were
recently
merged
between
deployments
and
as
always,
you
can
follow
us
on
Twitter,
but
also
LinkedIn.
D
E
Cheers
Chris
so
latest
release
latest
Beta
release
of
sealife
Microsoft
365,
which
is
611
a
bit
of
a
smaller
release
to
today.
So
a
couple
of
commands
for
powerapps
for
updating
user
permissions
to
apps
and
removing
permissions
to
apps
We've
also
got
a
new
command
that
if
you're
using
the
CLI
configuration
so
you're
changing
them.
E
Changing
the
default
preferences
to
things
that
you
like,
and
we've
added
a
new
commands
that
you
can
just
list
all
the
configuration
options
that
you've
actually
changed,
which
is
nice
main
focus
at
the
moment,
has
been
around
the
V7
release,
which
is
currently
in
development.
So
we're
looking
kind
of
like
next
month
time
frame
to
to
release
that
and
we
have
actually
got
a
Beta
release
of
V7
already
available.
E
So,
if
you're
interested
in
seeing
what
comes
next
any
of
the
breaking
changes
that
might
affect
you
or
just
test
the
scripts
that
you've
written
and
then
it's
worth
checking
that
out
now
and
let
us
know
if
you
have
any
issues
so
that
we
can
address
those.
If
you
want
to
use
the
latest
beta.
The
611
then
use
the
next
tag.
If
you
are
installing
from
npm
or
using
our
Docker
container,
and
as
always,
if
you
have
any
questions,
you
know
want
to
discuss
things.
E
So
Chris
next
slide,
please
so
Microsoft
365
developer
proxy,
which
I
don't
have
an
update
this
week
and
just
a
reminder
we
released
V
so
0.10
last
month,
and
so
that
included
a
gallery
for
from
Mox.
So
this
is
at
the
idea
that
we're
going
to
have
a
gallery
of
specific
scenarios
that
you
can
go
and
access
and
you
can
pull
into
your
your
installation
of
proxy.
E
E
So
more
support
for
for
batching
and
yeah
we're
going
to
work
on
on
trying
to
get
these
scenarios
for
the
mocks
into
into
the
Galleries
and
if
you
are
using
the
CLI,
and
you
already
have
mocks
that
you
think
other
people
might
want
to
use
as
well.
Please
get
in
touch
and-
and
we
can
look
at
getting
those
into
the
gallery.
Chris
back
to
you.
A
Thanks
Gary
all
right
we're
talking
about
these
reusable
sdfx
controls.
If
you
haven't
had
a
chance
to
use
these
yet
I,
don't
think
I've
done
an
spfx
project
for
the
past
several
years
where
I
haven't
included
one
or
both
of
these
seriously.
If
you
haven't
looked
at
these
you're
going
to
kick
yourself
for
all
the
things
you've
already
made
that
already
existed
so
go
check
these
out.
There's
several
updates
to
these
right.
So
you
can
bunch
of
stuff
your
property
paying
get
a
bunch
of
stuff
controls.
Stuff!
F
All
right,
thanks
guys
so
like
Chris
mentioned
this
is
the
go-to
place
for
an
espfx
project
to
avoid
building
stuff.
That
is
already
there
reusable
components
that
do
a
lot
of
the
comment.
Scenarios
that
come
up
in
projects
where
spfx
would
be
the
suitable
technology.
We
don't
have
a
major
release.
This
month,
we
had
one
last
month
with
a
fair
amount
of
uploads.
Since
the
release
we
have
been
working
behind
the
scenes,
mostly
on
issues
that
are
there
for
years.
F
So
some
of
the
issues
we
are
addressing
are
trying
to
close,
sometimes
just
trying
to
get
a
response.
Are
there
for,
like
four
years
now,
three
years
and
you're
trying
to
get
to
a
proper
cleanup
status
there
just
a
call
out
to
Mikhail
sure
I'm,
the
strongest
name,
Mikhail
Milo,
which
helped
a
lot
in
the
last
weeks
with
addressing
some
of
those
issues,
doing
a
lot
of
testing
classification
replying
so
heads
up,
that's
well!
No,
just
a
big!
F
Thank
you
for
him
and
like
any
other
initiative
here,
this
is
your
controls.
It's
not
our
controls.
If
you
have
something
to
have
to
them
yeah,
we
would
appreciate
any
pull
requests.
There
was
a
lot
of
work,
also
behind
the
scenes
on
clarifying
how
to
contribute
to
them
or
to
execute
random
Solutions
locally.
So
if
you
have
any
questions,
you
have
no
idea
where
to
start
reach
out
to
us
it's
simpler
than
ever,
and
hopefully
you
have
content
that
you
can
contribute
to
them
as
well.
Thank
you,
Chris.
B
Yes,
quick
update
in
here
and
Vivo
connection
toolkit
is
the
easiest
way
to
build
your
SharePoint
framework
solution,
so
it
does
not
interfere
with
the
out-of-the-box
Microsoft
provided
human
generator.
It
just
creates
a
wrapper
on
top
of
that
and
and
automate
stuff
using
CLI
Microsoft
365.
So,
even
though
you're
super
familiar
with
SharePoint
framework,
please
take
a
look
on
this
one.
It
actually
helps
a
lot
you
can.
You
can
have
a
look
on
easily
access
your
tenant
easily
deploy
do
all
of
those
things
directly
in
the
Visa
Studio.
Please
check
it
out.
B
A
All
right,
so
if
you
have
a
chance
check
out
PNP,
modern
search,
let's
let
Hugo
are
you
talking
about
this.
My
notes
are
all
messed
up.
No
I'll
talk
about
it,
so
this
thing
is
awesome.
So
if
you
look
into
do
any
kind
of
search,
customization
definitely
use
this
I've
been
using
this
a
lot
actually.
This
week
you
can
build
all
sorts
of
amazing
things,
so
check
it
out.
If
you
haven't
and
there
you
go,
that's
all
now
Hugo
you
can
talk
how's
that
well.
G
Thank
you,
that's
very
kind
of
you,
so
the
PMP
spfx
samples
are
repositories
for
web
parts
and
extensions
that
people
share
and
they
are
awesome
you
can
get
to
them
by
going
to
AKA
to
the
mess,
slash
SPF
spfx
Dash
web
Parts.
If
I
could
say
that
I
haven't
had
a
chance
to
process
these
full
requests
yet
because
it
was
busy
working
on
updates
to
the
site.
G
But
we
have
these
four
awesome
samples
that
are
coming
in
an
update
to
the
react
dashboard
by
Kinga,
an
update
to
the
RSS
reader
by
Laurie
and
then
a
new
extension
by
Mikhail,
which
is
managing
unique
list
item
permissions
and
an
update
to
our
sort
of
the
new
Dynamic
site
forms
by
Martin.
We
love
these
samples
and
I
promise.
You
I
will
be
processing
these
samples
as
soon
as
possible.
C
Just
real
briefly,
though,
new
updates
here
Derek
is
out
today
so
covering
for
him,
but
we
open
are
open
for
samples,
so
definitely
reach
out.
There
are
badges
for
this
too,
and,
as
Hugo
mentioned,
we're
actually
doing
the
tiered
badges
now
for
the
spfx
web
parts.
So
if
you've
got
just
a
few,
then
you
can
get
that
five
or
two
star
badge,
three
star
badge,
some
exciting
opportunities
there
same
for
CLI
and
script,
samples
so
check
them
out.
Chris
back
to
you.
A
B
B
Cool
I
guess
we
are
hitting
the
timing
and
running
out
of
the
seats
as
well.
So
let
me
put
the
recording
on
and
let's
do
some
handwearing
everybody
everybody.
We
can
try
to
do
the
same
waves.
You
know
we
can't
actually
really
really
cool.
Thank
you.
Everybody
for
joining,
also
to
have
you
on
a
call,
really
really
cool.
H
Right
thanks:
okay,
so
in
this
session
we'll
be
talking
about
an
spfx
extension
which
is
called
as
personal
assistant
and
this
extension
has
been
developed
using
a
feature
of
openai
called
as
function,
calling
and
we'll
be
using
Microsoft
graph
as
well
quickly
about
myself.
My
name
is
Anup
I'm,
an
MVP
in
the
Microsoft
365
development
category
and
I
work
at
the
coreless
content
and
cloud
based
in
the
UK.
H
H
H
So
what
happens
here
is
using
the
power
of
open,
Ai
and
Microsoft
graph.
We
get
the
information
from
the
calendar
and
then
it
says
I'm,
meeting
Megan
Mohan
next
tomorrow
in
a
meeting
called
Sprint
meeting.
Now,
if
I
ask
another
question,
something
like
am
I
attending
a
webinar
soon.
What
happens
here
again
is
you
know
the
events
are
obtained
from
my
calendar
using
Microsoft
graph
and
open
AI
formats
that
and
shows
it
to
me
in
a
nice
way,
just
to
prove
that
these
are
correct.
H
Called
what
is
SharePoint
happening
on
the
31st
of
August
and
that
sort
is,
is
returned
here
as
well.
Then,
if
I
just
ask
one
more
question
saying
what
are
my
upcoming
tasks
so
what
happens
here
is
again:
Microsoft
class
is
used
to
get
the
tasks
from
the
planner
and
then
those
details
are
sent
to
open
Ai
and
then
the
information
is
displayed,
saying
you
know
what
are
the
tasks
and
when
they
are
Dubai
and
then.
H
So
that's
what
this
extension
is:
nspfx
extension,
which
uses
some
capabilities
of
Microsoft
graph
and
opening
a
function
calling
ad
Returns
the
results
right.
So
that
was
the
demo
now,
let's
understanding
sorry,
let's
understand
What
what
the
scope
of
this
application
is
and
what
are
the
different
elements
involved.
So
firstly,
this
this
this
particular
feature
that
I
showed
just
now
is
applicable
to
both
open
Ai
and
Azure
open
AI.
H
However,
the
sample
only
uses
open
AI
in
the
future,
I'll
be
using
Azure,
open,
Ai
and
submitting
a
pull
request
as
well,
and
the
open
AI
models
that
were
used
or
dopamine
open
air
models
to
which
this
is
applicable
or
GPT,
3.5,
turbo
and
gpt4
right.
So,
let's
understand
what
function
calling
is
so
that
we
come
to
know
why
we
are
using
that
feature
in
this
particular
sample,
so
function.
H
Calling
is
one
of
the
features
provided
by
open
AI,
which
the
way
I
think
of
it
is
is
such
that
it
allows
us
to
extend
the
open
AI
models,
basically
adding
some
extra
capabilities
say,
for
example,
if
we
ask
open
AI
what
the
current
weather
is,
then
the
models
you
know
won't
be
able
to
provide
us
with
that
information,
because
those
models
have
been
trained
until
I
think
September
2021.
So
they
won't
be
able
to
provide
us
that
information.
H
H
So
we
can
tell
open
AI
that
we
have
these
functions
in
our
code
and
then,
if
we,
if
we
pass
the
names
of
those
functions
along
with
what
they
do
to
open
Ai
and
we
pass
the
user's
question
as
well,
then
open
AI
tells
us
okay,
based
on
the
question
you've,
provided
you
need
to
call
this
particular
function
and
then
because
open
AI
tells
us
which
function
we
need
to
call
from
our
code.
The
name
function
calling
now.
Let's
understand
that
in
a
bit
more
detail.
H
So
here
on
the
left,
we've
got
this
personal
assistant
and
let's
imagine
that
this
this
personal
assistant
application
or
be
it
any
other
application
which
uses
open,
AI
API
and
this
application
doesn't
have
function
calling.
So,
as
you
can
see,
if
I
ask
a
question
like
when
am
I
meeting
Megan
next,
then
this
question
is
sent
to
open,
Ai
and
then
open
AI
comes
back
saying,
you
know,
I'm,
sorry,
I
do
not
have
access
to
your
calendar,
which
is
right
so
with
what
we
can
with
the
introduction
of
function.
H
Calling
what
happens
is
when
we
send
the
question
to
open
AI
saying
when
am
I
meeting
Megan
next.
We
also
send
some
of
these
functions
that
we
have
in
our
core.
So
we
have
these
functions
called
get
my
details,
get
my
events
and
get
my
tasks.
The
implementation
of
these
functions
will
be
handled
by
us,
but
we
are
letting
openai
know
that
hey
we've
got
these
functions
in
our
code
as
well.
H
So
this
this
request,
along
with
the
user
question
and
the
functions,
is
sent
to
open,
AI,
open
AI,
then
analyzes
that
and
then
comes
back
saying
you
need.
We
need
to
call
the
function,
get
my
events
and
then
it
also
tells
us
which
argument
you
know
the
the
argument.
What
should
be
the
value
of
the
argument?
We
would
have
sent
this
argument
to
open
AI
as
well
and
open
AI
tells
us.
H
You
know
the
value
of
the
the
argument,
so
in
this
case
is
called
the
function
called
get
my
events
and
use
the
argument
feature
events
as
who,
once
that
is
done.
What
we
do
is
we
call
the
get
my
events
function
on
our
side
and
that
that
get
my
events
function,
uses
Microsoft
graph,
gets
the
events
and
then
asks
us
that
raw
response
back
to
open
AI.
H
So,
as
you
can
see,
I
have
highlighted
over
here
the
the
Json
that
is
passed
to
open
AI
opening
it
then
Analyze,
That
Json,
converts
it
into
natural
language
and
then
sends
the
response
back
and
then
what
we
do
is
in
our
application.
We
just
go
ahead
and
display
that
response.
So
that's
what
function
calling
is
now
that
we
have
understood
what
function
calling
is.
Let's
look
at
the
code
that
that
was
used
for
this
application,
so
all
the
score
will
be
present
on
the
spfx
dev
extensions
repository
soon.
H
So
what
we
do
here
is
we
take
the
message
provided
by
the
user
and
then
put
that
in
an
array
called
as
open,
AI
messages,
so
we
are
using
the
set
open,
AI
messages,
which
is
one
of
the
state
variables
in
in
this
component
and
as
soon
as
we
update
the
openai
messages
array,
what
happens
is
this
particular
react?
Hook
is
trigger,
which
is
the
use
effect
on
this
open,
AI
messages,
and
what
that
does
is
it
goes
ahead
and
calls
open
AI.
H
Ultimately,
so,
as
you
can
see,
on
line
number
218,
we
are
calling
open
AI
with
with
the
messages
that
that
we
had
just
constructed
along
with
that,
we'll
be
also
passing.
This
variable
called
as
functions
now.
How
does
what
does
that
variable?
Look
like
so,
if
I
just
bring
up
this
image,
and
you
can
see
that
what
we
are
passing
to
open
AI?
Is
this
this
message
setting
which
contains?
Firstly,
the
message
provided
by
the
user
and
then
we
will
be
passing
these
functions.
H
H
So
if
we
just
quickly
look
at
the
details
of
one
of
these
functions,
so
this
is
nothing
but
a
Json
object.
So
the
main
thing
is
name
of
the
function
and
then
we
need
to
give
it
a
proper
description,
because
that's
what
openai
will
use
to
understand
what
function
needs
to
be
called
based
on
the
user's
question.
We
also
need
to
provide
an
argument
that
the
function
will
will
expect
and
a
description
for
that
argument
as
well
towards
the
end
of
this
session.
H
I'll
be
sharing
a
link
which
explains
the
details
of
all
these
up
properly
right,
so
we've
got
the
functions
and
we
got
our
message
and
then
we
call
openai
once
when
we
call
openai
openai
takes
that
and
then
responds
with
something
like
this.
It
says
you
need
to
call
a
function
and
then
in
the
function
call
object.
It
says
the
name
of
the
function
and
the
arguments
of
the
function.
H
So
what
we
do
in
our
code
is
we
we
we
take
all
these
details,
the
name
of
the
function
and
the
arguments,
and
then
we
parse
that
Json
so
and
then,
once
that
Json
is
passed,
we
we
go
ahead
and
call
the
particular
function
which
we
need
to
call.
In
this
case
it
is
get
my
events,
so
we've
got
a
class
called
as
use
Microsoft
graph
in
that
we've
got
a
function
which
is
get
my
events
and
that
particular
function
goes
ahead
and
hits
the
me
slash.
H
Events
endpoint
and
then
gets
all
the
events
in
a
nice
Json
format.
Once
we
get
all
those
events,
we
pass
that
particular
response
back
to
open
AI.
This
is
what
we
are
doing
here,
so
you
can
see
that
whatever
result
is
coming
back,
we
are
putting
that
in
a
variable
and
then,
after
that,
we
are
going
ahead
and
setting
the
open,
AI
messages
again
with
that
particular
response
and
then
once
this
happens,
what
we
do
is
again
we
go
ahead
and
call
open
AI
by
passing
these
new
messages.
H
Open
AI
goes
ahead
and
analyzes
that
and
then
replies
saying
we
need
to
stock
the
execution
now
and
then
it
gives
us
the
clean
text
as
well.
So
that
particular
plain
text
which
is
a
natural
language.
We
go
ahead
and
display
in
our
in
our
app
right.
So
in
summary,
function
calling
is
available
in
open,
Ai
and
Azure
open
AI.
We
saw
how
we
are
using
it
using
open
here,
but
similarly
we
can
use
it
in
Azure,
using
Azure,
open
AI
as
well.
H
All
this
code
needs
to
be
moved
to
server
side,
so
what
I'll
do
in
the
future
is
I
will
submit
a
PR
using
Azure,
open
Ai
and
then
that
all
that
code
will
be
server
side,
I'll
be
submitting
a
PR
related
to
that
soon
and
then
another
Improvement
is
there's
no
need
to
pass
these
functions
in
every
request.
We
can
pass
them
only
when
needed.
So
all
that
will
be
taken
care
later,
and
here
are
some
of
the
resources
that
were
used
for
this
demo.
H
A
G
You
so
my
session
today
is
called
improving
your
svfx
development
process
with
environment
variables.
Thank
you,
vesa,
for
making
the
title
a
lot
more
sophisticated.
That
than
I
had
originally
submitted.
I
think
originally
I
said
me,
show
environment
thing,
so
that's
much
better.
So
what
we're
going
to
talk
about
today
is
actually
recommended
by
oops
certificate,
all
right,
I'm,
gonna
use.
My
keyboard
is
recommended
by
two
out
of
three
spfx
developers,
so
this
is
going
to
be
useful
to
you.
G
If
you're
talking
about
you
know,
work
if
you're
working
in
a
team
and
you're
working
with
multiple
developers
who
use
different
URLs
for
their
development
tenant,
it's
also
for
anyone
who's
sharing
their
code,
people
who
are
writing
samples,
and
things
like
that.
You
know.
Obviously,
if
you're
sharing
your
code
and
you're
sharing
a
sample,
you
probably
don't
want
to
show
your
tenant
in
your
code
when
you're
sharing
it
with
other
people
and
probably
people
who
are
working
by
themselves
or
not
really
sharing
their
code
or
maybe
bow.
G
Those
people
would
not
really
care
about
these
kinds
of
this
kind
of
feature.
But
let's
talk
about
how
to
use
environment
variables
so
normally
in
your
SharePoint
framework
project
you'll
have
in
the
config
folder
you'll
have
something
called
serve.json
and
the
recommended
Behavior
here
is
to
go
set
your
initial
page
and
put
the
URL
that
you
use
for
your
environment
and
then
the
cool
thing
about
that
is
when
you
type
gulp
serve.
It
serves
your
sample.
G
It
goes
to
the
page
that
you
specified
in
the
initial
page
and
you
get
to
test
your
webpart.
You
get
to
debug
it
and
do
cool
stuff
like
that.
But
let's
talk
about
team
working
scenario
here,
where
you've
got
maybe
a
whole
bunch
of
developers.
You
know
dev1
dev2
dev3.
They
all
have
a
different
SharePoint
URL,
so
dev1.sharepoint.com,
dev2,
dev3
and
so
on
and
so
forth.
And
then
let's
pretend
that
you
also
have
a
integration
environment.
G
G
So
how
do
you
address
that?
How
do
you
work
with
that?
If
you're
sharing
code
and
you're,
you
know
putting
code
in
Source
control
and
things
like
that,
you
don't
want
to
be
changing
this
every
single
time,
so
one
option
obviously
is
to
type
gulp
serve
dash,
dash
new
browser
that
works,
then
you,
you
know
it
launches
as
gulp
serve,
and
then
you
go
to
your
your
own.
G
Now
the
spfx
team
is
constantly
improving
things
and
they're,
always
adding
new
features,
cool
features,
but
sometimes
it's
hard
to
keep
up
and
sometimes
it's
hard
to
pay
attention
to
all
the
announcements
when
they
do
so
many
cool
things.
So
in
SharePoint
framework
117
in
the
release
notes
they
snuck
in
something
something
that
I
think
is
going
to
be
very
useful.
If
we
look
in
the
release
notes,
oh
we've
got
blurry
see.
If
we
can
clear
this
up,
they
added
something
called
the
ability
to
use.
G
Spfx
surf
tenant
domain,
OS
environment
variables
for
serve
configurations,
and
what
it
says
is
that
you
can
actually
go
in
your
operating
system,
set
an
environment
variable
and
specify
the
domain
or
the
site
URL
in
your
configuration,
and
you
can
use
it
to
cross
usbfx,
Solutions
and
then
anywhere
that
you
need
to
use
in
the
the
page
URL.
Then
you
can
actually
put
squiggly
tenant
domain
as
a
placeholder
and
it
will
automatically
replace
it
in
the
variable.
G
So,
let's
talk
about
that
so
again,
you
have
an
environment
variable
in
your
operating
system,
called
spfx
serve
tenant
domain
I'm,
not
reading
the
underscores
by
the
way,
and
then
in
your
configuration
you
actually
just
get
to
put
tenant
domain
between
squiggly
brackets
in
your
configuration.
So
how
would
this
look
like
if
I
go
to
myserve.json
you
get
to
see
here
that
I
have
the
tenant
domain
now.
The
one
thing
I
should
I
should
make
clear.
Is
that
the
the
default
behavior
is
to
have?
G
G
You
can
also
agree
with
your
team
that
your
environment
variables
could
include
the
https
and
the
the
specific
URL
name.
If
you
wanted
to
you're
allowed
to
do
that,
but
the
one
thing
is,
if
you're
going
to
share
that
code
with
people
outside
the
the
team,
if
you're
going
to
be
sharing
samples,
I
would
recommend
that
you
always
stick
to
the
standard
of
leaving
the
https
and
leaving
the
underscore
layout.
Slash
works
for
slash
workbench.esbx
so
that
it's
just
consistent
for
everybody.
G
G
If
it's
based
spfx
underscore
serve
underscore
tenant
domain
and
then
in
the
value,
you
would
put
your
your
tenant
right.
Your
tenant
domain
again
best
practice
is
don't
use.
The
full
URL
just
use
the
kind
of
doing.
Unless
you
agree
as
a
team
to
do
this,
you
click
OK
and
on
your
next
session
it
will
actually
use
that
environment
now,
one
trick
I
found
is,
if
you
just
run,
Explorer
it'll
actually
refresh
that
so
you
type
explore
it
refreshes
that
now
you
can
actually
do
that
also
using
in
Windows.
G
You
can
use
your
command
line
to
do
this,
that
works
in
either
dos
or
Powershell.
You
can
do
set
X
spfx
served
antenna
domain
and
then
the
value
that
you
want
to
put,
but
it
does
require
admin
privileges
to
do
that.
Unfortunately,
now
the
cool
thing
is
once
you've
done
that
again,
you
just
do
gulp
serve
and
it
will
go
directly
to
your
tenant
and
you'll
see
it's
kind
of
cool.
It
just
puts
in
the
value
that
you're
looking
for
I
know.
G
G
Now,
if
you
wanted
to
actually
set
up
the
variable
temporarily,
because
you
want
to
test
it
somewhere
else,
of
course
you
could
go
and
change
to
serve.json
configuration,
but
that
can
be
annoying.
You
can
actually
just
say
set
instead
of
set
X
and
set
will
set
that
value
temporarily
for
your
session
in
Windows.
You
would
do
that
in
Powershell.
You
would
use
environment.
Spfx
tenant
domain
equals
the
value.
G
G
It
will
run
in
that
in
that
URL
for
you
and
then,
when
you're
done
with
that,
that
environment
variable
will
be
reset
to
your
your
standard
environment
variable
which
is
very
cool,
and
you
can
imagine
obviously,
by
doing
this,
you
can
actually
start
playing
with
your
gulp
command
to
do
this
kind
of
stuff,
but
that's
a
whole
different
conversation
all
right.
So
let's
try
to
wrap
this
up
here.
You
might
also
say
that
well
wait
a
minute
I'm
using
a
a
remote
container
to
actually
develop.
G
It's
like
you
and
I
practiced
this
presentation,
because
you
can
actually
go
to
your
devcontainer.json
and
in
the
dev
container.json
for
your
remote
containers.
You
can
actually
say
you
can
add
this
this
in
here,
which
says
the
remote
environment
variables,
these
remote
environment
variables
will
be
promoted.
So
what
you
can
say
is
I
want
this
environment
variable
spfx
serve
tenant
domain
to
be
pre-populated
by
my
local
environment,
which
is
very
cool
because
then
you
can
just
start
a
remote
container
do
gulp
serve.
It
will
automatically
go
to
your
development.
G
Tenant-
okay,
one
last
little
bit
here,
because,
if
you're
working
as
a
developer-
and
you
have
your
own
developer
tenant-
and
you
have
your
your
work
done
it-
you
might
be
struggling
with
having
to
log
in
and
you
might
be
using
things
like
incognito
mode
or
in
private
mode.
But
there's
a
better
way
to
do
this.
That
will
work
way
better
for
this
and
I'm
using
Edge
here.
But
you
could
do
this
in
Chrome
as
well.
You'll
notice
that
in
the
upper
left
corner,
sometimes
it's
in
the
upper
right
corner.
G
It
depends
on
where
Microsoft
feels
like
that
day.
But
you'll
see
that
you
have
a
kind
of
a
profile
here
and
it'll
say
work
or
personal
or
something
like
that.
But
what
you
can
do
is
you
can
actually
go
to
your
browser
and
if
you
click
on
your
little
browser
profile
thingy,
you
can
actually
go
click
on
other
profiles
and
then
set
up
a
new
work
profile.
G
When
you
do
that,
it'll
prompt
you
to
log
in
so
you'll
say
sign
in
to
sync
your
data.
If
you
don't
want
to
sign
in
to
sync
your
data,
that's
fine!
But
what
I
do
like
to
be
able
to
do
is
any
the
any
workstation
that
I
work
on
I
know
that
when
I
log
in
on
that
profile,
all
my
history,
my
bookmarks,
my
everything,
my
my
preferences
are
configured
and
synchronized.
G
So
I
will
skip
you
or
spare
you
the
part
where
I'm
logging
in
here,
but
once
my
profile
is
created,
it's
going
to
have
a
name
like
profile
3.,
you
can
actually
click
on
the
little
profile
settings
to
change
your
profile
name
so
do
edit
you
can
rename
it
so,
let's
say
I'm
going
to
say
this
is
my
contoso
environment.
You
can
pick
a
gratuitous
image
if
it
if
it,
if
you
enjoy
to
do
so
or
you
can
even
sync
with
your
actual
company
profile
image.
G
But
once
that's
done,
one
of
the
cool
things
you
can
do
is,
if
you
scroll
down
a
little
bit
under
profile
preferences
right
here,
there
you
go,
you
can
actually
go
in
and
you
can
say,
I'm
going
to
add
a
profile
preference,
so
I'm
going
to
say
anything.
That's
got
contoso.chairpoint.com
or
dev1.chairpoint.com.
Whatever
you
want,
you
can
say,
switch
my
profile
to
this
browser
profile
and
the
cool
thing
about
that
is
when
you
do
gulp
serve,
and
let's
actually
go
do
that.
G
G
So
this
is
a
cool
way
to
work
with
teams
to
share
your
code
and
to
really
accelerate
your
development
process,
especially
if
you're
using
application,
lifecycle,
management
and
Automation,
and
things
like
that,
because
you're
never
hard-coded
your
URLs
you're
using
environment
variables
to
do
so,
and
that's
it
for
me.
Thank
you,
everyone
for
your
time.
A
I
All
right,
let's
get
going
again
hi.
My
name
is
Dan
Turley
and
I'm.
A
full
stack
developer
at
avenard
I've
been
working
with
SharePoint
for
over
10
years,
most
recently
as
part
of
the
productivity
studio,
utilizing
SharePoint
framework
to
build
business
apps
today,
I'll
be
showing
you
some
tooling,
that
is
part
of
the
spfx
solution,
accelerator
to
support
development
teams
and
environments,
but
first
it's
always
a
quick
overview
of
the
accelerator.
It's
a
set
of
patterns,
reusable
code
components
and
tools
created
for
building
business
apps.
I
On
the
SharePoint
platform,
it's
evolved
over
the
last
six
years
and
we've
used
it
in
a
productivity
Studio
to
build
a
dozen
business
apps.
Over
that
time.
The
accelerator
is
open
source
and
we
published
a
complete
app
to
demonstrate
its
features.
The
SharePoint
framework
sample
is
named,
react
rhythm
of
business.
Calendar
accelerator
has
the
following
high
level
features.
We
have
guidelines
for
the
solution
structure
to
organize
your
domain
model,
Services
components
and
schema.
I
You
have
a
robust,
empty
domain
model
with
features
like
change,
tracking
validation
and
relationships,
there's
also
a
services
framework
with
provided
services
for
SharePoint
list
data,
time
zones,
users
and
groups
and
more-
and
we
have
Dynamic
provisioning
of
SharePoint
lists
for
app
setup
and
upgrade
experiences.
There
are
react
components
for
view
edit
panels
and
dialogues,
asynchronous
data
live
update,
controls,
wizard
and
more,
and
we
have
tooling
to
support
development
teams
and
environments
and,
last
but
not
least,
live
update,
ensures
your
users
are
always
collaborating
with
the
latest
data
all
right.
I
I
I
If
you're
fortunate
enough
to
have
separate
tenants
for
Dev
test
production
et
cetera,
then
you
don't
necessarily
need
environments,
although
I'd
still
recommend
using
them
to
take
advantage
of
the
package
and
deploy
gulp
commands
for
any
values
in
code
that
are
environment
specific,
but
we'll
get
to
all
that
in
just
a
moment
at
the
root
of
the
solution,
folder
is
an
environments.json
file.
This
defines
all
of
your
environments.
I
I
Well,
if,
for
any
reason,
you're
in
a
situation
where
you
cannot
or
do
not
want
to
spin
up
separate
tenants
for
Dev
test
and
Stage,
for
instance,
maybe
your
app
will
need
to
access
some
documents,
Or
List
data
or
manage
metadata
or
80
user
accounts,
or
anything
really
that
exists
in
your
production,
tenant
that
it's
not
feasible
or
not
allowed
by
policy
to
copy
over
to
a
developer,
tenant
or,
if
it'd,
be
a
pain
to
manage
accounts
and
roles
for
your
project
team
across
multiple
tenants.
Then
I
think
this
feature
is
for
you.
I
If
your
project
is
even
more
restrictive,
say
you're
only
able
to
work
on
one
site
in
the
tenant,
and
you
have
to
do
development
and
test
on
that
single
site.
Then
you
can
even
use
this
feature
to
achieve
reasonable
separation
for
Dev
and
test.
So
how
it
works
is
for
each
environment.
You
can
specify
a
different
name
and
ID
for
the
solution
package,
as
well
as
each
web,
part
and
extension
in
your
solution.
So
that's
what
enables
side-by-side
deployment.
I
I
I
I
All
right,
the
first
thing
I'm
going
to
do
is
run
this
deploy
command
for
the
stage
environment.
We
use
gulp,
deploy,
dash
dash
ship
dash
dash
EnV
stage,
which
specifies
the
state
environment
and
I'm
going
to
let
this
run
in
the
background.
While
we
look
at
some
other
things
and
we'll
check
back
in
a
moment,.
I
I
I
Now,
let's
jump
over
to
the
app
catalog,
this
is
the
tenant
level
app
catalog
and
you
can
do
the
same
for
a
site,
collection,
app
catalog,
where
you
can
mix
and
match
both
levels
in
your
in
your
configuration
you'll
see
here,
there
are
two
different
builds
of
the
app
installed
side
by
side.
One
of
them
is
the
production
version
and
the
other
is
for
testing,
and
you
can
imagine
we
could
have
any
number
of
builds
for
different
environments
installed
side
by
side.
I
This
could
be
a
developer,
tenant
and
I
can
have
the
production
version
of
the
app
installed.
So
I
can
troubleshoot
bugs
reported
by
end
users.
I
can
also
have
the
latest
test
build
and
actively
undergoing
testing.
I
can
have
the
latest
development
build.
That
developers
are
actively
working
on
all
side
by
side.
Clearly,
labeled,
no
accidental
collisions
when
running
the
different
versions.
I
I
Also,
there
is
this
environment
symbol,
and
so
during
build
time,
this
will
do
a
simple
string
replace
in
any
file
named
defaults.ts
in
your
solution.
So
let
me
look
at
bring
up
one
of
those
files,
so
this
particular
one
is
in
our
schema
folder.
So
this
is
for
lists
where
specifically
configuring,
the
names
of
the
lists
that
we'll
be
provisioning
on
the
site
and
line
nine
is
where
we
would
do
the
string
replace
during
the
build.
I
So
this
references
one
of
these
values
from
this
structure
up
here,
which
then
contains
different
prefix
values
for
each
environment
and
down
here,
is
we're
exporting
this
defaults
object,
which
gives
us
access
to
various
titles
for
lists.
So,
if
I
go
over
to
this
events
list,
we
can
see
when
we're
defining
the
schema
for
this
list.
Here's
how
I
might
reference
that
value.
I
I
guess
what
I,
what
I
can
do
is
walk
through.
So
what
we
do
is
for
the
deploy
command.
It
starts
with
the
out
of
the
box
clean
task,
and
then
we
have
several
other
tasks
that
we've
added,
that
let
you
manage
environments
for
spfx
libraries,
any
web
parts
and
extensions
in
your
solution,
and
then
it
modifies
any
defaults,
TS
files
that
you
have
in
your
source
code.
I
I
I
Well,
my
dream
for
years
has
been
to
share
this
with
the
world,
and
last
year
we
were
able
to
publish
it
open,
source
and
I
want
to
thank
Vasa
and
David
and
team
for
all
your
support
and
allowing
me
to
present
this
series
of
seven
demos
over
the
last
I
think
six
months
and
thank
you
to
the
community
for
listening
to
my
demos
and
I,
look
forward
to
where
we
can
take
this
in
the
future.
So
thank
you
so
much.
A
All
right
thanks
so
much
Daniel,
really
appreciate
it
awesome
series
of
demos.
There
greatly
appreciate
it.
Let
me
share
my
screen
as
soon
as
I
figure
out
we'll
head
back
to
these
slides
and
we'll
wrap
it
up
here,
all
right.
So
if
you
enjoyed
today's
call,
please
follow
this
link
and
give
us
some
feedback
if
you
did
enjoy
this
call.
A
Please
follow
this
link,
give
us
some
feedback
and
specifically
blame
Hugo
or
David
Perfect,
all
right,
but
we're
looking
to
see
how
we
can
do
better,
and
we
appreciate
your
responses
on
that
and,
finally,
if
you're
looking
to
get
some
more
immediate
help
right,
so
this
chat
is
open
during
the
calls.
Only
so
if
you
want
to
ask
questions
about
this,
you'll
have
some
links
for
questions
for
our.
A
You
know
specifically
to
our
presenters
today,
we'll
post
it
to
the
chat,
if
you're
looking
for
more
General
help
we're
just
looking
to
have
a
conversation
with
the
community
check
out
our
Discord,
it's
pretty
cool,
all
right
and
then
finally,
thank
you
very
much.
The
recording
will
be
posted
in
24
hours
on
YouTube
and
then
after
that,
we'll
break
down
the
individual
demo,
so
you
can
share
those
out
as
well.
Thank
you
very
much
to
all
our
amazing
presenters
and
for
all
of
you
for
attending
thanks
a
lot
peace.