►
From YouTube: TeamsFx .NET - Current Updates - April 2022
Description
In this 24-minute developer focused demo, Thomy Gölles delivers a run-down on the latest in Teams Fx (Microsoft Teams Framework) - a .NET library encapsulating common functionality and integration patters for developers building apps hosted in Microsoft Teams. Use .NET (server-side) and React (client-side) languages, CLI, built-in SSO, GraphClient Auth provider, Blazor templates, extended by Teams Toolkit in VS 2022 (preview). See scaffolding out a project (create personal tab) using Microsoft Teams App template in VS 2022, add Teams Toolkit, Razor Class Library. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on April 14, 2022.
Demo Presenter
• Thomy Gölles (Solvion) | @thomyg
Supporting materials
• Repo - Microsoft Teams Framework (TeamsFx) | https://github.com/OfficeDev/TeamsFx
• Tool – Blazor - Build client web apps with C# | https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp
A
Hi,
my
name
is
tommy,
I'm
a
team
lead
at
solvion.
These
are
some
ways
to
reach
me,
but
it's
not
about
me
today.
It's
about
the
content
and
the
content
of
the
next
couple
of
minutes
is
the
microsoft
teams,
framework
teams
fx,
and
we
are
today
looking
at
the
net
side
of
things.
I
tried
to
create
this.
I
would
say
slide.
I
think
cool
kids
now
call
it
infographic
or
something
else
to
to
make
clear
some
of
the
pretty
nice
choices.
Microsoft
did
in
terms
of
naming
meaning.
A
There
is
teams,
fx,
there's
teams
toolkit
and
if
you
read
through
documentation
or
read
through
twitter
or
read
through
a
different
blogs,
you
will
see
a
lot
of
mixture
of
all
those
different
names,
and
this
thing
here
tries
to
make
it
a
little
bit
clearer.
What
is
part
of
teams
fx
and
what
are
the
yeah
components
of
it?
So
teams
of
x
actually
is
a
library
that
targets
more
than
one
language
teams,
effects,
targets,
react
and
net,
so
not
only
the
client
side,
but
also
the
server
side,
and
that's
just
the
state
of
today.
A
There
is
no
no
fixation
on
only
two.
Those
two
platforms,
I'm
pretty
sure
there
are
already
ideas
on
on
how
to
get
different
text
text
decks
also
into
this
team's
framework.
But
the
idea
is
that,
as
a
developer,
I
get
something
where
I
can
start
already
with
this
yeah
the
need
of
authentication
all
those
things
that
we
would
need
to
do.
Anyways
all
the
time
we
create
enterprise
applications
that
this
is
already
done
in
a
library
and,
of
course
this
is
available
for
react.
A
That's
basically
what
victor
was
referring
to
compared
to
the
pinpio
teams
generator.
So
all
those
scaffolding,
all
those
creation
of
elements
and
the
architecture
of
the
teams
framework-
is
that
that
there
is
a
cli
in
place
where
currently,
the
team
is
working
on
making
like
one
cli
to
be
able
to
use
it
on
multiple
platforms
and
multiple
technology
stacks.
So
in
react
and
in.net
you're
not
there,
yet
as
in
general,
just
to
to
keep
that
in
reference.
A
We're
still
talking
about
something
that
is
in
preview,
we
are
hoping-
or
we
are
like
kind
of
waiting
for,
build
and
hopefully
fingers
crossed.
There
is
a
release
of
teams,
fx
in
in
my
case,
for
net
coming,
and
we
will
see
later
today
that
there
is
were
some
changes,
apparently
this
week
with
teamsfx.net
so
kind
of
good
feeling
that
there
will
be
something
in
the
coming
weeks
that
will
be
released.
A
But
then
there
is
the
writing
of
the
team's
toolkit
and
the
team's
toolkit
basically
is
just
the
extension
that
you
use
in
visual
studio
code
for
react
or
visual
studio
for
net
and
blazer
programming,
as
we
will
focus
on
on.net
today.
The
path
is
that
you
will
see
this
sample
application.
That
is
basically
in
there
out
of
the
box.
So
what's
in
the
box
and
of
course
there
are
seven
points
for
all
that
don't
get
the
reference
with.
A
What's
in
the
box,
there
are
seven
points
here,
listed
f5
experience,
you
open
up
visual
studio,
press,
f5
and
you're
good
to
go,
and
also
the
framework
already
comes
with
tools
and
comes
with
configuration
options
to
create
azure
id
application,
but
also
to
create
azure
resources
and
to
deploy
them.
You'll,
see
that
in
the
demo,
so
there's
a
pretty
much
thinking
already
there.
How
to
really
deploy
stuff
not
only
run
it
locally
on
machine
single
sign
on,
is
basically
built
in
and
ready
to
go.
We'll
see
that
and
how
is
that?
A
A
There
is
a
built-in
microsoft
graph,
authentication
client,
so
that
we
can
use
the
sso
token,
for
teams
to
then
make
our
calls
through
microsoft,
graph,
for
example,
and
they
changed
a
little
bit
the
way
how,
on
the
net
side,
you
install
the
team
toolkit,
it
used
to
be
a
extension.
That's
the
thing
when
you
open
up
virtual
studio
click
on
extensions,
and
then
you
browse
through
basically
like
the
the
nuget
feed,
all
the
possible
extensions
that
are
available
and
they
moved
it
to
components.
A
Of
course,
there
are
laser
templates
at
the
moment
for
a
bot
in
the
tab
and
that's
basically
what
we
are
looking
at
it
right
now.
So
I
open
up
with
your
studio,
22
preview,
that's
important,
because
we
are
looking
at
the
latest
and
greatest
so
we
are
looking
at
the
version
that
is
available
since
two
days
with
the
latest
and
greatest
also
from
the
team's
toolkit.
Remember
preview,
so
we're
looking
at
stuff
that
you
should
not
use
in
production
yet,
but
I
think
it's
important
to
already
know
what
will
be
available
in
the
future.
A
A
Okay,
create
and
then
that's
already
a
screen
that
changed
multiple
times
through
the
journey
of
this
toolkit.
We
are
now
asked
for:
do
we
want
to
include
a
tab
and
a
bot,
or
both
we
will
start
with
a
tab.
It's
way
simpler
and,
of
course,
you
can
then
create
a
bot
as
well,
if
you
want
to
later,
but
let's
start
just
with
a
tab,
and
I
click
on
create,
takes
a
couple
of
seconds
and
then
visual
studio
hopefully
opens
up
with
our
new
solution
and
project.
A
Here
we
are,
and
now
we
are
seeing
basically
yeah
outlined
the
structure
of
the
the
project.
We
will
walk
through
the
structure.
First,
then
we
do
a
short
demo
and
look
at
all
the
options
that
are
available
in
terms
of
what
we
get
from
the
from
the
scaffold
project.
So,
first
of
all,
that's
a
blazer
server
application.
So
there
are
a
couple
of
artifacts
that
are
already
known,
probably
to
everyone
that
already
created
the
blazer
server
application,
important,
not
wasm,
not
web
assembly.
We
are
talking
blazer
server
here.
So
we
have
our
program
cs.
A
We
are
using.net
six,
so
it's
all
the
greatness
of
dotnet
six
and
the
minimal
stuff
you
need
with
namespace
global
using
all
that
stuff
is
possible,
but
of
course
there
are
razer
files
and
then
there
are
pages
and
components.
So
what's
the
the
first
thing
we
have
our
page
here
we
have
a
tab
and,
as
you
probably
already
can
think
of,
let
me
check
here.
A
I
want
to
do
that
first,
because
it's
not
existing,
I'm
careful,
there
is
a
tab.
So
that's
basically
the
first
thing:
the
first
endpoint
that
we
want
to
reach
because
that's
the
end
point
of
the
application
that
we
want
to
work
in
teams
with,
but
before
we
do
that
there
is
a
nice
getting
started,
a
text
file
that
basically
guides
you
through
through
all
the
steps
takes
care
of
ngrok
if
you're
using
the
bot
part,
because
you
need
tunneling
to
for
the
bot
framework
to
recognize
your
endpoint.
A
You
don't
need
that
in
our
case,
because
we
are
only
working
with
a
tab
here,
so
there
is
something
we
can
skip
to
step
three.
Let's
do
that
and
then
here
we
see
select
project
teams,
toolkit
and
that's
new
in
that
release
that
we
can
go
to
teams
toolkit
under
project
and
click
on
configure
microsoft
teams
app.
I
will
do
that
right
now.
That's
important
that
used
to
be
part
of
the
automatic
scaffolding.
So
what
is
the
team's
toolkit
now
doing
it's
creating
an
azure
id
registration,
app
registration?
A
You
see
that
now
in
my
in
my
console
here
and
creating
manifest
files
and
all
those
kind
of
things
that
we
need
to
be
able
to
run
our
teams
application
and
it's
very
cool
that
it's
now
on
click
and
not
automatically
when
we
create
stuff.
So
we
would
have
the
option
to
yeah
prepare
something
to
set
something
up
in
the
way
that
we
want
it
and
not
automatically.
A
Something
gets
created,
that's
important,
so
I
don't
like
templates
or
solutions
they
let
go.
Take
my
just
initial
information
and
go
to
the
cloud
and
do
something
there.
If
you
have
another
question
how
the
heck
does
the
toolkit
now
know
what
account
to
use?
That's
because
I
already
used
it
yesterday
and
it
remembered
the
account
if
you
do
it
the
first
time
you
basically
get
a
login
screen
from
azure.
That
says:
okay,
pick
your
account.
A
A
Let's
wait
for
a
couple
of
seconds
and
the
browser
should
start
with
the
yeah
app
install
screen
or
the
add
an
app
screen.
I
don't
want
to
call
it
with
our
demo
here
here
we
are
so
you
see
the
name
pnp
demo,
our
current
date,
that's
the
artifact
or
the
the
name.
We
gave
it
through
the
wizard.
It
says
local
debug
click
on
add,
and
then
I
will
get
a
static
tab
with
yeah.
A
super
simple
starting
page
in
here.
A
A
That's
the
first
thing
and
the
second
thing
is
yeah:
that's
basically
the
code
line,
but
we
will
have
a
look
at
the
code
in
a
couple
of
seconds.
Second
thing
is:
I
can
click
on
authorize
here
and
then
I
will
see
the
consent
screen
because
in
the
back
end
the
authorized
button
basically
wants
to
make
a
call
to
microsoft
craft.
To
get
my
user
picture,
my
email,
I
think
that
something
the
app
has
permission
to
it,
but
it
needs
to
be
consented.
A
First,
I'm
using
my
microsoft,
365
developer
tenant
here,
so
with
the
same
account,
I'm
of
course
a
global
admin.
I
can
consent
on
behalf
of
my
entire
organization
click
on
accept
and
I
will
get
my
picture
back
technically.
What
happened
now
is
that
for
the
first
run,
just
the
initial
load
of
the
tab,
the
team's
toolkit
used
the
sso
token.
It
got
from
teams
to
get
my
basic
information
and
in
the
second
run
it
used
that
sso
token
to
get
a
graph
token,
and
let's
have
a
look
at
the
code.
A
What
actually
was
happening
right
now
here?
First
of
all,
we
opened
up
the
tab.
Tab
is
pretty
pretty
straightforward
and
I
will
make
it
a
little
bit
fonts
a
little
bit
bigger.
So
hopefully
this
is
readable
for
everyone.
I
have
my
component
here
and
there's
a
welcome
component,
so
the
project
already
shows
you
like
the
laser
way
of
working
with
using
components
very
simple.
A
I
have
components
here
and
I
can
define
basically
what
is
part
of
my
welcome
component
and
you
see
here
a
couple
of
fluent
tabs,
because
it's
already
using
microsoft,
fast
components
fluent
ui,
that's
a
blazer
wrapper
from
the
fluent
team
and
that
is
available
and
built
in
through
nuget
packages
already
in
the
project,
so
yeah
a
couple
of
examples.
How
you
can
also
use
the
fluent
ui
already
built
in
in
the
project.
Remember
I'm
on
the
screen
right
now.
There
are
a
couple
of
tabs.
A
It's
those
things
here
that
are
defined
in
those
fluent
types
here
and
then
there
is
one
thing,
another
component
that
is
just
called
graph,
nothing
more!
So
we
have
a
graph
component
over
here
and
that
basically
takes
part
or
takes
care
of
the
part
in
the
code
that
we
saw
first
here
with
the
button
and
that
no
now
shows
us
our
proof,
a
profile
photo
because
you
see
here,
we
show
the
fluent
button
that
we
clicked
on
to
click
to
authorize.
A
If
we
need
consent,
if
we
have
consent-
and
we
are
loading-
we're
just
showing
the
profile
card
and
if
we
already
have
a
profile
loaded,
then
we
show
the
profile
card
with
parameters.
How
do
we
get
those
parameters?
How
is
that
connecting
or
how
is
the
connection
working
here?
That's
typical
blazer
way
of
doing
things
and
I
will
stop
the
debugging
for
a
second,
because
I'm
pretty
sure
there
are
people
on
the
call
that
are
like
what
is
he
doing
here.
A
A
Visual
studio
realize
that
okay,
it
needs
to
be
under
the
eraser
component.
Here
I
get
a
short
error
message,
because
I
need
to
make
that
a
partial
class,
because
how
blazer
is
working
bill
that
or
blaze
is
basically
building
on
top
of
the
razer
file,
already
a
code
behind
file,
and
there
is
a
class
already
present
that
is
not
shown
in
visual
studio.
A
A
Yep
everything-
and
I
mean
everything
here-
we
are
and
move
that
over
to
my
deck
and
file.
That's
basically
the
idea
how
you
can
of
course
separate
your
implementation
of
the
ui
and
your
code
behind
files.
There
are
now
a
couple
of
yeah
using
that
I
would
need
to
add.
Let's
do
that
for
a
second,
but
if
we
go
through
the
code
first,
there
are
parameters.
Okay,
then
we
have
the
the
user
profile,
that's
basically
microsoft,
graph
component.
A
So
you
see
that
our
microsoft
class
from
the
from
the
microsoft
graph,
client
sdk
and
we
see
simple
laser
lifecycle
class
here
on
initialist
async
we
are
starting.
We
are
questioning,
has
the
user
permissions
for
a
current
scope
over
here
user
read
and
if
that's
the
case,
we
are
showing
the
profile.
So
it's
typical
c
sharp
code
now
but
of
course
using
what
the
themes
toolkit
basically
offers
us.
So
you
see
here
profile
is
a
request.
A
A
For
you,
that's
super
important.
How
is
that
done?
Basically
they're
using
the
javascript
interop
options
that
you
that
are
available
just
in
blazer,
because
if
we
have
a
look
in
here,
there
is
of
course
some
kind
of
javascript.
I
hate
to
admit
it.
You
need
a
couple
of
lines
to
make
that
work.
But
if
you
have
a
look
here,
there's
javascript
file
that
yeah.
A
In
the
background
and
through
the
javascript
sdk
that
we
are
all
familiar
from
teams,
we
get
the
token
and
basically
so,
it's
going
through
the
whole
yeah
chain
coming
back
to
my
graph
file,
so
that
I
can
say
here:
okay,
get
the
new
graph
authentication
provider,
make
that
work
and
okay
get
the
client
and
do
the
simple
thing
here
and
make
a
profile
a
picture
request
and
you're
good
to
go
so
in
case.
We
want
to
take
that
a
little
bit
further.
What
we
can
do
is
now
just
need
to
make
that
reference
again.
A
Of
course,
we
could
add
now
our
own
calls
to
microsoft
graph,
our
own
yeah.
Let's
say
we
want
to
load
multiple
teams,
or
we
want
to
have
a
look
at
some
options:
some
some
data
endpoints
in
microsoft,
graph,
no
problem-
you
just
can
call
it
from
here
and
use
what
you're
already
familiar
with
in
terms
of
the
net
sdk
client
from
graph,
but
be
aware,
if
I
switch
over
to
my
azure
tenant
for
a
second
and
let's
reload,
that.
A
And
search
or
create
that
filter
that
so
you
see
that's
basically
the
azure
app
registration
that
got
created
when
I
clicked
on
project
microsoft,
teams
toolkit
and
create
the
stuff,
and
of
course
I
would
need
to
add
more
api
permissions
in
here.
So
if
I
want
to
make
additional
calls
to
graph-
and
if
I
want
to
make
additional
parts
working
here,
I
would
need,
of
course,
to
add
scopes.
A
Add
permissions
in
here,
because
if
I
just
would
call
the
graph
now-
and
let's
say
I
want
to-
I
don't
know
list
all
the
teams
that
I'm
part
of
it
would
get
an
authorized
error,
because
the
application
in
the
back
end
using
the
on
behalf
of
flow,
isn't
scoped
to
that
resource.
And
then,
of
course
I
would
not
go
to
in
there
and
change
that
in
the
api
partitions.
A
A
Yeah
good
for
me,
you
see
adding
now
a
new
project
in
my
solution
here
I
go
in
here
and
make
a
reference,
a
project
reference
just
for
the
sake
of
the
demo
to
that
component
library,
and
that
would
allow
me
to
reuse
yeah
common
components
in
my
team's
application.
We
will
do
that
now
for
a
very
short
and
simple
use
case,
but
just
think
of
it
you
could
extract
all
the
components
from
the
demo,
take
them
to
your
own
razer
library
project
and
then
with
the
things
that
are
coming
with
with.net.
A
Now,
for
example,
there
is
something
that
is
called
laser
hybrid.
You
can
use
laser
components
to
create
applications
for
the
desktop
for
android,
for
ios,
for
yeah
teams,
so
to
speak
with
the
same
component
library,
so
that
opens
up
a
lot
of
options
for
for
the
developers
in
the
future
to
create
stuff
only
once
and
reuse
it
and
we
want
to-
or
I
want
to
show
a
short
use
case.
What
that
can
look
like.
I
have
something
prepared
over
here.
A
A
Let's
add
that
in
here
as
well,
so
we
have
a
component
that
is
just
our
proper
background
and
that
basically
just
wraps
whatever
we
are
putting
in
the
component
with
a
class
or
in
a
div
with
a
class
and-
and
I
have
a
razer
file
that
says
okay,
I
want
that
to
be
part
of
that
folder
in
here.
Let
me
double
check.
I
need
to
move
that
file
over
here
to
the
www
folder.
Here
we
are
and
then
I
would
go
into
my
tab
page
only
pages
tab.