►
From YouTube: Microsoft 365 PnP – General Microsoft 365 Developer SIG community call – 8th of July, 2021
Description
Microsoft 365 PnP Community - General SIG call on June 24th. Demos: Image Column Type formatting in Microsoft 365 and Configure Teams Applications with Azure App Configuration and Azure Key Vault. Summer and Fall community call schedule updates reviewed. Announced PnP Recognition Program, updated Teams sample browser - Teams samples gallery and the new Microsoft 365 tenant – script samples gallery. Sign up and attend an event hosted by Sharing is Caring. One new Teams sample was delivered in last 2 weeks. Great work! The host of this call was Paolo Pialorsi (PiaSys.com) | @paolopia Q&A takes place in chat throughout the call.
Learn more:
• See the full blog post for this call at: https://aka.ms/m365pnp/community/blog
• Download invite for bi-weekly General M365 Dev SIG call: http://aka.ms/spdev-sig-call
• 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
Welcome
everyone
welcome
to
the
microsoft
365
development
by
weekly
call
today,
I'm
your
host,
I'm
paulo
pelorsi
from
pcs.com
and
today
is
the
micro35
development
by
weekly
call
of
july.
The
8th
so
welcome
again
a
quick
view
at
the
agenda.
We
will
go
through
all
of
the
latest
news
about
pmp
framework,
pmp
or
sdk
pmp
powershell,
your
teams
and
graph
toolkit
microsoft
graph
toolkit.
A
As
you
know,
now
we
are
almost
in
the
summer
break,
so
the
format
and
the
timing
of
these
meetings
will
be
a
bit
more
relaxed
than
usual.
So
most
likely
we
might
even
end
the
meeting
earlier
than
usual.
In
fact,
we
just
have
a
couple
of
demos
instead
of
the
regular
three
demos
that
we
are
used
to
have,
but
it's
all
good.
It's
summer
we
have
less
people.
We
need
to
rest
a
bit
and
to
enjoy
the
summer
break,
so
let's
move
to
the
real
content
and
focus
on
the
real
topics.
A
First
of
all,
just
as
a
reminder,
I
want
to
remember
you
that
you
can
contribute
to
the
community
in
multiple
ways
and
for
sure
one
is
to
provide
demos
or
technical
solutions
and
patterns
in
these
calls.
So
if
you
have
something
that
you
want
to
share
that
you're,
proud
of-
and
you
want
to
share
with
the
community-
feel
free
to
reach
out
to
the
pmp
team,
either
using
email,
twitter
or
whatever
you
like
to
use,
and
let
us
know
that
you
have
something
that
you
want
to
share
and
to
present
to
the
whole
community.
A
A
You
can
also
contribute
to
github
if
you
like,
and
you
are
kindly
invited
to
do-
that
there
are
plenty
of
options
and
plenty
of
repositories
on
github
where
you
can
contribute
to,
and
we
are
always
looking
for
people
willing
to
share
their
time
and
their
efforts
with
the
whole
community
to
improve
all
of
the
offerings
and
all
of
the
libraries
and
samples
that
we
have
available
for
free
on
github.
And
of
course
you
can
also
provide
your
feedback
if
you
like.
A
A
That
said,
and
specifically
talking
about
some
of
the
content
that
we
have
available
for
the
community
and
by
the
community,
we
have
a
huge
set
of
videos
available
in
the
markzwa
35
developer.
Videos
youtube
channel.
You
see
here
the
akms
link
to
go
there,
as
well
as
the
microsoft
365
community
videos
available
in
akms,
m265pmp
videos,
plenty
of
open
source
projects
and
solutions,
including
repositories
under
the
sharepoint
organization,
the
pmp
organization
office,
dev
and
microsoft
graph,
one
and
plenty
of
calories.
We
have
been
working
quite
heavily
in
the
last
fiscal
year.
A
I'm
talking
like
microsoft,
folks
do
so
in
the
last
fiscal
year.
So
from
june
last
year
to
june
end
of
june
this
year
we
introduced
quite
some
new
galleries
to
let
people
find
examples,
code,
samples
and
solutions
that
they
take
inspiration
from
in
order
to
build
their
own
solution.
And
if
you
want
to
have
a
recap
of
all
of
the
goods
available
in
pmp
for
sure
you
can
go
to
aka
dot
message,
m365
pmp
and
there
you
can
find
the
entry
point
almost
to
everything
that
we
have
available
for
the
whole
community
as
pmp.
A
We
will
not
have
all
of
the
meetings
that
we
were
used
to
have
during
the
regular
time
frame,
but
we
will
still
have
the
community
calls
on
thursday,
like
we
are
having
right
now
and
starting
from
the
end
of
august.
So
from
early
september
we
will
have
a
new
schedule
for
the
microsoft
teams,
microsoft,
graph
and
sharepoint
monthly
calls.
So
we
will
simply
have
on
tuesday
a
micro35
engineering
call
rather
than
multiple
options,
which
were
also
every
now
and
then
overlapping
one
with
the
other.
A
As
I
was
telling
you
before,
we
have
new
tools
and
websites
available
for
developers
in
order
to
learn
what
you
can
do
with
microsoft,
365
and
how
you
can
do
that
with
microsoft,
365
and,
for
example,
we
recently
introduced
the
micro35
extensibility
lookbook
gallery.
We
introduced
almost
a
couple
of
years
ago,
the
sharepoint
lookbook
site,
where
you
can
see
and
use
sites
and
place
in
the
extensibility
lookbook.
We
have
a
focus
on
how
to
extend
micro25
divided
by
product
by
type
of
application.
A
By
scenario
you
can
search,
you
can
see
what
you
can
do
and
you
can
get
access
to
samples
that
you
can
easily
reuse
or
take
inspiration
from
akms
m365
extensibility
is
the
entry
point
to
get
there.
We
also
have
the
list
of
samples
for
developing
microsoft
teams,
solutions,
so
akms
teams
samples
is
the
place
to
go.
B
B
We
are
an
open
source
and
inclusive
community,
which
means
that
you
can
contribute
back
as
well
as
use
all
the
resources
available
to
you,
but
we
know
that
there
are
some
hurdles
and
blockers
to
that,
so
things
like
how
to
get
involved
with
github.
What's
a
pull
request,
how
do
you
process
it?
How
do
you
use
spfx
and
the
different
versions
of
node?
How
do
you
get
involved
as
a
presenter?
B
Any
one
of
them
we'd
love
to
see
you
and
help
you
get
more
involved
in
the
community
and
just
a
shout
out
next
week
is
the
ask
me
anything
with
the
topic:
themed
teams,
development
with
victor
and
bob
as
our
guest,
so
go
and
join
aka.ms
sharing.
Is
caring,
we'd
love
to
see
you
at
a
future
session
and
david?
Let
me.
A
B
Be
recognized
for
what
they
do.
That
is
an
amazing
question,
paulo
I'm,
so
glad
you
asked.
We
now
have
the
pnp
recognition
program
now
this
is
a
brand
new
first
of
its
kind
in
any
community
powered
by
credly.
It
is
going
to
provide
digital
badges
for
recognition.
These
are
formal
badges
that
are
going
to
show
up
right
next
to
your
microsoft,
certification,
badges
now
this
is
just
getting
started.
B
We
just
have
a
couple
available,
but
we're
going
to
continue
to
have
fresh
campaigns,
exciting
opportunities,
limited
edition,
badges
and
all
that
as
we
get
further
into
the
year.
We
do
need
you
to
opt
in
and
register.
So
please
go
to
ak
dot.
Ms
forward
slash
m365
pnp
dash
recognition
and
be
patient
with
us.
It
is
a
manual
process
right
now,
as
we
start
to
get
all
those
badges
out,
but
we're
really
excited.
This
is
going
to
be
amazing
opportunity
for
the
community
to
get
more
recognition,
and
we
really
appreciate
all
your
efforts.
A
A
We
really
would
like
to
have
some
help
from
the
community
in
this
area,
because
we
introduced
quite
some
new
functionalities
in
the
new
schema,
but
now
the
schema
is
released,
but
we
still
need
to
implement
all
of
the
logic
behind
the
scenes
in
the
provisioning
engine.
So
if
you
have
some
spare
time,
it
might
be
that
in
summer
you
have
some
time
that
you
can
give
as
a
gift
to
the
community.
A
Please
do
that,
reach
out
to
me
or
to
erwin
or
bert
or,
generally
speaking,
let
us
know
through
the
issue
list
in
the
github
repository
of
pnp
framework,
and
we
will
try
to
manage
something
and
to
let
you
help
us
to
develop
the
new
functionalities
in
the
provisioning
engine
in
the
upcoming
weeks.
Of
course,
there
will
be
vacation
time,
but
we
will
take
care
of
poor
requests,
improvements
and
bug
fixing
and
we
are
targeting
to
release
a
new
version
of
pmp
framework
right
after
the
summer
break.
A
The
same
story
applies
to
pmp
core
sdk,
where
we
processed
some
of
the
pr's
and
we
fixed
and
improved
some
of
the
stuff,
but
we
are
also
working
on
improving
the
documentation
and
we
are
working
on
a
refactoring
and
re-architecting
of
the
transformation
framework
or
modification
framework
which
hopefully
will
see
the
light,
at
least
in
preview
in
late
summer
or
early
september,
and
what
about
pmp
powershell?
I
think
my
friend
erwin
is
here
so
please
edwin
yep.
I'm.
C
C
Currently
we
are
prototyping
here
and
there
because
we're
thinking
of
making
some
heavy
changes,
not
that
will
not
affect
you
directly
but
might
affect
you
in
the
future,
and
I
mentioned
it
a
couple
of
weeks
ago,
if
not
longer,
that
we
are
looking
into
changing
what
pnp
powershell
outputs
to
you,
the
type
of
objects.
Right
now,
many
commanders
return
season
objects.
We
want
to
change
that
to
our
own
objects,
for
various
reasons,
but
right
now
csum
is
holding
us
back,
which
is
very
annoying
at
times.
C
C
So
we're
prototyping
a
bit
here
with
maybe
providing
you
with
an
option
to
we're
not
100
sure
yet,
but
an
option
that
you
provide
a
little
switch
on,
connect,
pnp
online,
and
then
you
will
get
the
new
behavior
versus
the
old
behavior
and
that's
something
that
most
likely
gradually
will
be
introduced.
But
before
we
start
to
throw
that
into
the
wild
after
the
summer
in
the
autumn
time
frame
or
if
you're
in
the
southern
hemisphere,
your
spring,
we
will
probably
set
up
a
a
community
call
like
a
one-hour
call
dedicated
to
this
topic.
C
Where
we
talk
this
through
with
you
and
and
gather
feedback
from
you
and
see
how
much
this
would
affect
you.
If
this
would
affect
you
if
it
would
provide
a
work,
workable
solution
for
you
or
not,
it
will
be
an
enormous
amount
of
work
for
us,
because
we
will
have
to
go
through
more
than
500
commandments
and
and
start
to
fix
those
or
update
those.
So
it
will
be
a
major
release.
It
will
not
come
just
in
a
nightly
build,
but
that's
what
we're
working
on
right
now.
A
D
D
Yeah,
so,
as
all
the
previous
speakers
said,
it's
really
nice
weather
here
in
sweden.
So
I
don't
spend
that
much
time
in
the
evenings
here
and
also
it's
been
the
eurosoccer
watching
in
the
evening.
So
there's
not
been
any
big
updates
since
last
time
we
do
have
the
the
previous
out
or
the
final
preview
isn't
really
out
for
the
yo
teams
yet,
but
some
of
the
supporting
npm
packages
are
out
for
with
support
for
universal
actions
in
adaptive
cards
and
there's
some
really
great
blog
posts
out
there.
A
E
But
for
those
of
you
who
don't
know
what
microsoft
graph
toolkit
is
it's
a
reusable
web
component
library
and
authentication
providers
to
help
you
easily
connect
and
work
with
microsoft
graph.
There
are
a
couple
ways
to
help
us
improve
new
things.
That's
coming,
including
adding
upload
file
functionalities
to
mgd
file
list.
A
F
Yeah
we
have
thanks.
We
have
a
really
cool
new
sample
this
week
and
I
want
to
thank
satya
and
forgive
me
if
I
say
the
names
wrong:
satya
ravindran
and
veeravantaka
sai
potan
bota,
who
created
this
sample,
which
really
highlights
something
you
don't
see
that
much,
but
it's
a
huge
power
of
teams,
development
which
is
device
access,
so
this
app
actually
runs
in
it's
a
it's
called
reporter
plus,
and
it's
about
reporting
problems
with
company
assets.
F
So
you
can
go
to
your
asset.
Take
a
qr
scan
of
the
asset
tag.
It
brings
it
up
on
the
screen.
You
can
then
use
the
device's,
camera
and
annotate,
and
even
the
microphone
to
capture
details
about
what's
happening
with
the
device
and
then
there's
a
people
picker
and
an
approval
workflow
for
getting
the
problem
resolved
so
really
really
cool
check
it
out
at
aka
dot.
Ms
slash
app
dash
reporter
plus
and
I'm
working
with
the
team
to
actually
get
them
on
a
future.
F
A
Yeah
definitely
thank
you
bob.
Thank
you.
So
much
so
next
step
for
today
is
the
together
mode
picture.
So
let
me
switch
to
the
together
mode.
Let
me
share
with
the
whole
community
all
of
our
wonderful
faces
and
let
me
start
the
recording,
so
we
are
now
recording
come
on
people
don't
be
shy,
share
your
face,
share
your
hands
and
wave
okay.
So
let
me
turn
on
my
camera
too.
Just
in
case
I
didn't
want
to
get
the
place
of
someone
else.
Okay,
I
think
we
are
fine,
so
wave.
A
Okay,
wonderful,
thank
you
so
much
and
enjoy
the
summer
of
course.
So
let
me
move
back
to
this
screen
and
it
is
now
time
for
all
of
the
demos,
actually
the
two
demos
that
we
have
on
schedule
for
today.
So,
first
of
all,
chris
kent,
let's
make
some
magic
with
list
formatting
feel
free
to
take
the
stage
and
share
your
demo.
G
Thanks
everybody
all
right:
let's
get
started,
I'm
chris
all
right,
so
we're
going
to
talk
about
an
image
column
type
today.
So
traditionally,
we've
had
you
know
if
you
want
to
do
an
image
as
a
column
in
your
sharepoint
list,
right
you're
going
to
do
it's
basically
just
a
hyperlink
column,
right,
you'll,
choose
hyperlink
or
picture,
but
really
all
you're
doing
is
linking
an
image
from
somewhere
else,
whether
it's
in
your
sharepoint
site
or
somewhere
else.
Right.
When
you
do
this,
you
can
set
a
description
right
and
formatted.
G
G
This
is
we're
going
to
upload
those
images
directly
and
they're
going
to
be
stored
in
your
site,
assets,
library
now,
there's
a
ton
of
sub
properties
we
can
get
to
in
the
list
formatting
which
we're
going
to
take
a
look
at
here
and
just
one
thing.
It
cannot
be
edited
in
grid
view
you're
gonna
have
to
edit
that
form
all
right.
G
So
all
that
being
said,
let's
take
a
look
at
how
we
can
take
advantage
of
the
image
column
and
how
we
might
format
that
so
we
head
over
to
our
traditional
warrior
horses
site,
we're
just
going
to
pick
on
a
list,
pick
agents
here,
you
know:
we've
got
a
nice
normal
list
here
lots
of
different
formatting.
Let's
scale
that
up
just
slightly
all
right-
and
let's
say
we
add
a
new
column
and
this
time
we're
going
to
choose
image.
G
So
traditionally
again,
you
would
choose
something
like
hyperlink
right
and
then
you
would
choose
the
type
or
whatever
picture.
I
remember
where
the
option
is
anymore
does
not
matter
because
we're
looking
at
the
image
right.
So
we
choose
image
here.
So
the
images
type
we're
just
going
to
call
this
pretty.
That
sounds
exciting.
All
right
call
it
whatever
you
want,
but
the
idea
is
here
we
add
pretty
image
and
then
we
edit
these
items.
So
again,
if
I
just
kind
of
open
this
up
here,
I
got
a
pretty.
I
can
add
an
image
directly.
G
G
G
One
to
note
is
that
if
you
swap
that
column
out
or
use
the
picture
again
you
the
picture
again
has
been
uploaded
again.
If
you
delete
the
image
off
of
the
the
list
item,
it's
not
going
to
delete
out
of
the
site
assets,
library.
So
that's
just
some
fun
facts
for
you,
okay,
but
what
if
we
want
to
format
this
right?
So
I've
got
my
column
settings
I'm
going
to
format
this
column
and
I've
got
this
beautiful
box
here,
let's
make
it
slightly
bigger
all
right.
What
can
I
do
with
this
all
right?
G
G
So
there's
a
number
of
sub
properties
and
we'll
take
a
look
at
a
minute
like
you
could
say,
like
file
name,
for
instance,
there
we
go
now
we
have
that
file
name
there,
so
we
can
get
that
out
of
the
image.
We
can
also
do
things
like
you
know:
server
relative,
url,
all
right
which
scenario
and
you
can
actually
see
just
like.
G
G
Let's
just
copy
this
thing
out
there,
let
me
text
content
for
an
image
right.
This
might
be
the
traditional
way.
You
would
do
this
all
right.
You
do
something
like
that.
Maybe
you
want
to
be
a
little
fancy.
You
want
to
make
sure
it
works
inside
teams,
you
say
equals
say,
add
current
web
plus
right.
You
can
preview
that
and
oh
we
gotta
add
the
slash,
because
you
know
that
makes
sense.
G
Okay,
so
we
had
a
plus
here,
but
the
idea
here
is:
we
can
do
kind
of
a
traditional
well,
we'll
ignore
what
I'm
doing
here,
there's
also
a
server
url.
We
can
use.
Okay
point,
though,
is
we've
got
several
sub
properties,
but
there's
also
this
whole
other
area
of
sub
properties
called
the
thumbnail
renderer,
which
we're
going
to
take
a
look
at
and
thumbnail
renders
got
things
like
the
sp
item.
Url,
it's
got
a
sponsor
token.
It's
a
file
version
got
a
bunch
of
extra
stuff
that
we
can
use.
G
So
what
if
we
wanted
to
do
kind
of
a
traditional,
we
wanted
to
at
least
map
what
they
were
doing
right.
So
if
you
recall
what
they
were
doing
is
just
a
box
here
all
right.
So
if
we
wanted
to
map
that
or
kind
of
imitate
that
we've
got
a
format
here
and
everything
I'm
pulling
out
here
by
the
way
is
part
of
a
light
box
sample
which
is
put
together
by
let's
say
it
wrong,
jiaofiario.
G
Well,
it
does
mumble
it
enough
and
you'll
get
it
right.
We'll
take
a
look
at
that
sample
in
a
minute,
but
the
idea
here
is:
if
I
do
that
right,
it
doesn't
look
a
lot
different.
All
I've
really
done
is
I've
got
that
same
image.
I
put
a
cursor,
but
instead
I'm
doing
this
fancy
thing
here
where
I'm
accessing
the
thumbnail
render
as
an
sp
item
url
right,
I'm
going
to
the
thumbnails,
I'm
saying
the
first
thumbnail
next
zero
I've
got
a
custom
size
of
48.48,
I'm
going
very
fast
on
all
this
kind
of
craziness.
G
Here
that's
happening.
All
of
this
is
using
the
underlying
sharepoint
version,
2
rest
api,
which
is
really
just
using
graph.
So
you
can
actually
check
out
what's
happening
here
when
it's
getting
that
kind
of
drive
option.
So
if
we
take
a
look
at
what
that
looks
like
here
all
right,
we
just
we'll
update
f12
to
inspect
that
we
had
f12
right.
We
go
to
inspect
that
guy,
which
is
now
very
tiny.
G
You
can
see
the
sucker
all
right,
but
the
idea
here
is:
you
can
actually
see
what
it
generated
right.
So
it's
it's
going
in.
It's
got
that
drives
link.
It's
got
a
bunch
of
ugly
good
type
stuff,
but
all
it
is
is
taking
care
of
all
that.
For
you
and
again
all
I
did
or
all
we're
doing
is
grabbing
this
thunder
renderer
sub
property
and
getting
sub
objects.
G
There
mostly
just
cut
and
paste
this
right,
but
the
idea
here
is:
if
we
look
at
this
api,
we
see,
we've
got
some
different
options,
mostly
around
sizing
all
right.
So
you
see,
we've
got
about
that
guy.
There
we
go
so
we've
got
this
custom
48
by
48.
Here
all
right.
We
could
change
that
instead
of
custom.
G
We
could
say
you
know
just
have
one
of
their
default
sizes,
like
small,
the
cream
that
we're
going
to
see
if
it's
going
to
come
in
at
96
by
96,
but
we've
got
to
cut
off
in
this
box
here.
Just
because
we've
got
the
overflow
hidden,
we
can
do
small,
maybe
small
square.
You
know
jump
up
to
large
there's
a
lot
there.
Let's
take
a
look
at
the
sizes
a
little
more
in
a
second,
because
that's
okay,
what
if
we
want
to
go
a
little
further
right,
so
let's
get
rid
of
that.
G
G
We
want
to
keep
everything
right
here,
so
I'm
going
to
copy
and
paste
another
part
of
this
format,
and
the
only
real
difference
here
is:
we've
got
our
image
the
same
kind
of
thing
here,
but
we
have
a
custom
card,
so
we've
got
a
hover
card
here
and
all
we're
doing
with
the
hover
card
is:
we've
got
an
image
inside
that
hover
card,
and
here
we're
going
to
take
that
and
we're
going
to
go
a
little
more
elaborate.
So
we've
got
the
exact
same
image,
but
now
we're
going
to
go
with
the
medium.
G
So
if
we
preview
that
we
can
see,
we
get
this
interesting,
ignore
the
did
have
a
little
trouble.
The
first
render
there.
It
is
that's
just
because
we're
the
formatting
window
with
that
beak,
but
you
can
see
now
we've
got
a
nice
little
thumbnail
right.
So
traditionally
you
might
want
to
make
that
a
lot
bigger
right.
So,
instead
of
medium
again,
this
is
where
we're
going
to
mess
with
those
all
right,
so
small
is
96
by
96.
Medium
is
176
176
and
large
jumps
up
to
800
by
800.
G
So
not
a
lot
in
between
all
right.
So
there
we
go
now:
we've
got
a
really
big
one
right
and
if
we
wanted
to
do
custom
right,
we
kind
of
saw
it
before
we
type
a
c
and
then
we
type
in
our
width.
So
in
this
case
we're
going
to
say,
I
don't
know
300
and
we're
going
to
say
our
height.
So
if
a
little
x
there
and
our
height
is
also
going
to
say
300.
now
it's
going
to
keep
our
aspect
ratio.
G
So
when
we
preview
that
all
right
we're
going
to
see
that
it's
just
going
to
take
the
longest
side
and
it's
going
to
make
that
300,
pixels
and
then
the
height
is
going
to
be
whatever
now,
if
we
wanted
it
exactly
300
by
300
right.
In
other
words,
we
don't
want
to
care
about
this
aspect
ratio.
We
can
actually
add
an
underscore
crop
on
the
end.
Now,
when
we
preview
that
take
a
look
at
that,
it's
actually
going
to
crop
it.
So
we
have
an
exact
square.
So
you
get
the
exact
same
exact
size.
G
You
want
there.
So
it's
a
lot
of
flexibility
in
this
kind
of
image,
sizing
and
how
it
comes
about.
So
that's
cool
right.
So
what
if
we
want
to
go?
You
know
slightly
further
than
that
right.
What
if
we
wanted
this
to
be
a
little
more
dynamic
our
size
right,
we're
not
quite
sure
you
know
what
what
people
are
dealing
with
right
if
they've
got
an
old
15-inch
monitor,
that's
set
to
you
know
like
800
pixels.
G
Is
this
max
or
whatever
right?
What
if
we
wanted
to
take
advantage
of
that,
so
we
wanted
to
then
set
this
size
kind
of
dynamically.
We
can
do
that.
So
all
we're
really
doing
is
building
the
string.
You
see
these
little
pluses
with
the
single
quotes,
so
we
can
actually
break
that
up
so
instead
of
custom.
Here
we
can
delete
those
guys,
the
key
pieces-
let's
just
add
the
pluses
all
right
just
so
we
don't
lose
any
of
that,
I'm
going
to
get
rid
of
this
crop
there
we
go
now.
G
If
we
want
to
insert
our
own
values
in
here
we
can
so
we
could
say
things
like
ceiling
because
we
don't
want.
I
will
say
this:
one
thing
this
doesn't
do
is:
does
not
accept
decimals,
so
you
can't,
you
know,
have
any
kind
of
piece
there.
So
when
you
seal
and
make
sure
we
have
an
integer,
we
say
at
window
dot
inner
width
right.
So
this
is
going
to
give
us
at
the
time
of
drawing
the
inner
width
of
the
actual
window
and
we're
going
to
say
no
bigger
than
half
that
size
right.
G
Give
that
a
try.
Let's
see
if
we
got
that
right
there
we
go
so
the
idea
here
is,
it
is
constraining
now
it's
hard
to
see
a
little
bit.
So
let's
save
this
and
let's
refresh
everything,
so
we
get
that
new
height
drawn
into
expected
all
right.
So
now
we've
got
this.
It's
kind
of
limiting
the
size
exactly.
G
You
can
do
a
little
more
with
that,
but
if
we
were
to
say
like
f12
this
guy,
so
we
can
get
a
smaller
window,
I'm
going
to
refresh
that
so
it
re-renders
and
has
the
new
window
height.
When
we
click
that
you'll
see
it
is
responding
and
is
automatically
given
to
the
smaller
right.
So
by
taking
advantage
of
those
inner
width
and
inner
height
in
our
custom
sizing,
we
can
make
sure
that
things
you
know
fit
pretty
well
here
now.
G
Normally,
though,
a
light
box
is
used
to
show
you
know
the
full
size
image
right,
but
now
we're
trying
to
constrain
that
because
we
don't
want
to
overwhelm
if
you
have
a
gigantic
image
right.
So
one
of
the
things
we
might
want
to
do
is
provide
a
link.
So
we
could
do
that
as
two
as
two
as
well.
All
right.
So
we're
gonna
grab
this
guy.
We
don't
need
this
part
anymore
and
we're
gonna
just
go
here.
We're
gonna
go
column
set
into
the
form
of
this
column.
G
G
We've
got
all
that
kind
of
coming
out,
but
now
we
have
this
link
we're
going
to
kind
of
absolutely
position
on
the
bottom
right.
That's
going
to
open
it
up
in
a
new
window,
just
like
the
other
one
did.
So
if
we
preview
that
you
can
see
now,
we've
got
this
nice
little
button
and
we
click
that
it's
going
to
open
that
same
image
in
a
whole
new
window
and
the
idea
here
is
now.
G
You
can
do
a
lot
with
these
image
columns
right,
so
the
image
columns
are
are
really
powerful
because
it's
it's
very
hard
to
get
even
strong
power
users
to
understand.
Go
to
a
document
library,
upload
images
copy
that
link
go
to
your
list,
paste
that
link
right,
there's
a
lot
of
steps
there
that
are
very
easy
to
mess
up,
and
especially
if
they
copy
the
wrong
image
right.
They
might
have
copied
an
asset
link
that
works
for
a
day.
But
then
that
token
will
expire
and
now
they're
done
no
longer
works.
G
So
an
image
column
is
a
is
a
huge
step
up
in
terms
of
usability.
So
we
want
to
also
take
advantage
of
that
in
terms
of
our
formatting.
So
by
using
all
these
kind
of
sub
properties,
we
can
have
a
lot
of
power
and
a
lot
of
control
over
all
this.
So
all
of
those
samples
are
available.
Let's
take
a
look
kind
of
wrap
up
here,
all
right,
so
here's
all
of
those
image
sub
properties
right.
G
So
we
mentioned
this
idea
file
name,
which
one
is
the
one
you'll
probably
use
a
lot
and
then,
if
you're,
trying
to
do
any
kind
of
custom
sizes,
you'll
skip
all
the
rest
of
these
and
jump
into
the
thumbnail
renderer
for
examples
of
how
those
links
are
put
together.
Please
take
a
look
at
the
sample.
That's
a
lot
easier
to
take
a
look
at
again.
You
can
also
consult
the
graph
api
for
how
to
get
to
the
content
of
a
drive
item.
Great
okay,
so
drive
thumbnail
sizes
and
kind
of
mention
those.
G
Here
again,
those
are
listed
in
kind
of
the
graph
api
documentation,
and
these
are
these
are
helpful,
but
the
primary
helpful
ones
here
are
these
width
and
height.
Although
keep
in
mind,
if
you
wanted
to
just
do
a
crop
diversion
yourself
of
the
small,
medium
or
large,
you
can
add
square
with
a
capital
s
on
the
end
and
it
will
pump
it
automatically.
Otherwise,
it's
going
to
keep
that
original
ratio,
just
like
you
expected
before.
G
A
H
Today
I
want
to
talk
about
how
to
configure
microsoft
teams
applications
with
azure
app
configuration
and
azure
keyword,
quick
introduction
on
myself.
For
those
who
don't
know
me,
I'm
marcus
meyer,
I'm
a
microsoft,
365,
developer
expert
and
I
work
for
abernath
in
germany
and
you
can
reach
me
on
twitter
or
where
my
blog
posts,
so
let's
quickly
jump
into
the
demo.
H
We
have
a
quick,
simple
messaging
extension
here
and
when
we
kick
this
off,
there
are
several
samples,
also
provided
not
only
by
me
but
also
by
me
on
this
or
that
scenario,
and
here
I
do
it
really
really
simple
in
that
case,
so
we
retrieve
a
bunch
of
files
from
a
specific
location
and
once
we
pick
one,
we
can
post
this
to
the
message
channel
and
we
can
do
further
stuff
with
that.
We
could
also
implement
it
more
and
that's
not
the
real
important
thing
for
today.
H
On
the
one
hand,
you
can
provide
a
site
and
a
list
id
to
get
a
specific
library
being
responsible
for
serving
the
files,
and
the
alternative
would
be
to
say,
hey.
We
want
to
go
with
such
and
retrieve
the
files
with
search
instead
and
all
these
things
once
we
press,
ok,
will
be
configured
in
the
background
and
then
the
sample
can
run
again.
H
H
The
second
thing
is
what
we
are
using,
of
course,
is
the
authentication
and
the
oscillator
authorization
in
the
background,
and
therefore
we
regularly
use
things
like
app
ids
or
application
secrets
and
those
you
would
not
store
mainly
in
a
simple
azure
app
configuration,
but
here
azure
keyword
is
the
way
to
go,
and
this
is
here
but
slightly
the
same
resource,
or
at
least
it
looks
like,
and
in
this
case
we
have
several
options
to
store.
We
can
store
keys,
we
can
store
secrets
or
certificates.
H
In
my
case,
I
have
some
secrets
here
in
that
case,
it's
two
for
this
two
for
this
application.
Here
we
have
the
graph
application
secret
and
one
secret
for
the
microsoft
app
pass.
This
is
connection
to
the
blog
channel.
In
the
background,
how
does
now
the
app
service
use
that
or
access
it?
Yeah?
Here's
my
app
service
where
my
application
is
hosted
and
once
I
click
on
that,
I
can
first
see
a
quick
notation
for
the
keyword.
H
When
I
go
to
my
classic
application
configuration
here.
I
give
you
one
example
where
the
microsoft
app
password
refers
to
the
microsoft
keyboard.
I
will
show
you
that
in
a
bit
better
mode
come
on,
this
is
a
notation
how
you
can
directly
access
the
keyword
from
your
app
service
yeah
there.
You
know
no
piece
of
code
for
that
yeah,
but
I
will
also
show
you
code
when
you
delete
code,
and
I
will
show
you
that
in
in
two
three
minutes.
H
And
the
last
thing
I
want
to
quickly
give
an
introduction
and
explain
a
bit
later:
is
the
authentication
from
this
app
service
to
the
resources
like
keyboard
and
app
configuration,
and
this
takes
place
on
behalf
of
microsoft.
Fire
managed
identity,
and
here
you
have
nothing
else
to
do
then.
On
the
one
hand,
click
on
the
identity,
tab
of
the
service
was
consuming.
H
Enable
the
managed
identity,
and
once
you
do,
that,
you
have
an
object
inside
your
azure
active
directory,
which
you
can
then
grant
access
to
on
the
keyword
or
on
the
app
configuration
file,
and
this
is
what
you
do
here
in
the
access
control,
and
this
is
from
the
demo
site,
just
a
simple
wrap
up
as
an
architecture.
What
we
are
doing
so
we
have
our.
H
We
have
our
web
application
here,
which
is
in
fact
a
whole
teams
application,
and
this
one
is
hosted
in
our
azure
app
service
and
the
configuration
takes
mainly
takes
place
in
the
azure
app
configuration
resource
and
the
secrets
and
credentials
are
stored
inside
azure
keyboard
and
last
not
lead
with
that.
What
we
can
do
is
we
can
authenticate
and
get
our
data
from
microsoft,
graph
and
or
microsoft
365
ecosystem,
if
it,
if
it's
sharepoint,
onedrive
outlook,
whatever
we
need.
H
H
If
the
task
module
submits
the
configuration
back
to
teams
the
on
settings,
function
is
called,
and
here
then
I
persist
my
config.
So
how
does
this
then
look
in
detail?
So
we
have
put
this
to
a
utilities
class
and
we
will
go
now
into
the
details
for
that
in
the
utilities
class
it
has
first
a
retrieve
config
function.
This
first
needs
to
establish
a
client.
H
This
client
is
above
to
grant
access
to
the
resource,
and
once
we
have
the
access,
we
can
simply
retrieve
our
values
with
the
get
configuration
setting
and
providing
a
name
for
that,
and
then
we
have
an
object
where
the
value
is
the
main
interest
which
we
will
use.
In
that
case,
here
we
use
the
site
id
and
the
list
id
and
so
on
and
so
forth
thing
would
be
how
to
establish
this
client,
and
here
I
commented
out
the
easy
way.
H
Yeah
the
easy
way
would
simply
be
to
establish
a
so-called
default
azure
credential
and,
together
with
a
connection
string,
instantiate,
the
app
configuration
client-
and
this
is
the
easy
way
and
behind
the
scenes,
this
default
error
credential
handles
the
different
cases
you
could
have,
because
you
can
have
your
app
running
in
azure,
but
you
can
also
have
it
running
locally
in
debug
mode
or
something
and
those
two
options.
I
show
here
in
the
code
in
detail
below
yeah.
H
So
the
short
explanation
how
this
works
to
visualize
once
again
is:
if
you
have
any
kind
of
resource
you
regularly
need
credentials
to
access
them
and
how
to
store
them.
You
would
regularly
put
this
to
a
credential
storage.
You
do
this
on
your
laptop
as
well
with
keypass
or
something
similar,
and
to
compare
this
with
your
laptop
on
your
laptop
on
your
local
desktop.
You
now
need
a
password
to
access
this
yeah,
but
is
this
a
solution
because
then
we
would
have
a
chain
and
again
and
again
and
to
cut
off
the
chain.
H
It's
able
to
authenticate
itself
against
the
and
against
the
re
con
resource
to
consume,
so
the
app
configuration
store
or
the
key
azure
keyword
last,
not
least
the
opposite
of
get
a
configuration
value.
Of
course,
in
this
case,
would
be
the
safe
configuration
value
but
yeah.
This
is
quite
the
same
as
we've
already
seen
here.
We
already
have
seen
how
to
establish
a
client,
and
then
we
will
use
the
set
configuration
setting,
and
here
we
do
not
only
need
the
name,
but
we
also
need
the
value
to
store.
H
That's
the
only
opposite.
The
rest
is
the
same
as
already
seen
for
this
was
for
azure
ad
configuration
and
for
azure
keyboard.
It's
also
quite
the
same,
there's
only
one
difference
and
it's
the
client
yeah.
So
what's
the
same,
the
same
as
we
have
to
establish
a
client
and
then
we
have
to
get
a
value
by
providing
a
name
which
is
more
or
less
the
same,
and
only
the
client
is
different,
because
this
is
so
it's
not
an
app
called
erase
client
anymore.
In
this
case,
it's
not
a
keyboard
client.
H
There
are
different
clients
for
the
different
resources,
in
my
case,
I'm
using
only
it
for
secrets.
So
I
use
the
secret
client
if
I
would
use
certificates
or
so
that
would
be
an
corresponding
certificate
line,
but
the
authentication
once
again
runs
quite
the
same
and
here's
once
again.
This
is
a
short
version
establishing
a
default,
azure,
credential
and
then
getting
the
client.
And,
of
course,
we
also
need
a
connection
string
for
that.
This
is
this
simply
the
resource
url,
which
you
can
grab
from
your
azure
resource.
H
H
H
This
is
the
following:
endpoint
from
microsoft,
graph,
the
search
query
endpoint
and
in
the
request
body.
I
provide
in
my
case
that
I
want
to
have
list
items
not
drive
items,
because
I'm
using
the
metadata,
then
I
hand
over
a
search
query
and
I'm
asking
for
several
fields
to
be
returned
and
last
or
least
very
important
in
this
case,
although
I
retrieve
only,
I
have
to
post
all
that
stuff
against
microsoft
graph,
that's
it
from
my
side.
H
H
So
the
search
query,
for
instance,
is
not
in
that
yet,
but
I
will
publish
this
soon
takes
a
while,
always
for
me
yeah,
then
some
documentation
on
azure
app
configuration
and
also
how
to
treat
this
in
node.js,
because
it
is
unfortunately
not
directly
linked,
azure,
key
mode
documented
and
then
the
sso
topic
described
by
victor
a
while
ago.
I
know
he's
already
working
on
a
yeah.
H
A
Thank
you
very
much
marcus.
Thank
you
to
marcus
and
chris
for
their
great
demos
and,
as
I
said
today,
will
be
a
more
relaxed
community
call.
So
we
are
not
planning
to
hit
the
hour,
but
most
likely
we
will
give
you
back
a
few
more
minutes
to
rest
or
to
stay
with
your
family
today.
So
I
just
want
to
say
thank
you
to
the
wall
community
and,
of
course,
to
david
for
your
support
and
to
the
other
community
members
for
sharing
the
updates
on
the
tools
and
libraries.
A
Remember
that
the
recording
of
this
video
will
be
available
in
24
hours.
From
now
in
the
match,
certified
community
youtube
channel
and
the
next
microsoft,
65
general
dev
call
will
be
on
july
22nd
at
7
00
a.m.
Pacific
time
next
week
july
15th,
we
will
have
at
the
same
time
so
7
a.m.
Pacific
time
the
sharepoint
framework
community
calls
so
stay
tuned
and
enjoy
these
community
calls
where
you
can
learn
and
share
content
with
the
whole
community.
A
I
also
want
to
remember
you
about
some
of
the
useful
links
that
we
have
available
for
the
community
to
learn
more
about
adaptive
cards.
Micrograph
and
all
the
other
stuff
that
you
can
build
and
develop
on
top
of
microsoft,
365,
and
that
said,
I
think
we
can
get
back
a
few
minutes
and
we
can
go
back
to
our
business
or
to
our
family
and
enjoy
the
rest
of
the
day.
Thank
you.
Everyone.