►
From YouTube: Creating a tab with yo teams
Description
This tutorial will guide you on how to create a customt ab with Microsoft Teams Yeoman generator (yo teams).
Demo presenter: Paolo Pialorsi (PiaSys) | @PaoloPia
Resources:
• More on the Teams Yeoman Generator: http://aka.ms/yoteams
• Build your First Microsoft Teams App - https://docs.microsoft.com/en-us/microsoftteams/platform/tutorials/get-started-yeoman
• Learn more about the Microsoft 365 developer community at: http://aka.ms/m365pnp
A
Welcome
to
this
training
module
about
your
teams,
I'm
powered
LLC
from
pcs,
dot-com
and
I'm,
going
to
explain
you
how
you
can
use
the
yo
team
generator
to
create
a
team
stop.
So
let
me
switch
to
the
common
prompt
and,
let
me
start
your
team
generator.
The
generator
will
prompt
you
with
a
sequence
of
questions.
First
of
all,
you
will
have
to
provide
the
name
of
your
solution.
You
will
have
to
choose.
A
If
you
like
and
I,
will
simply
confirm
the
auto-generated
URL
for
my
team
stub
solution,
then
I
have
to
make
a
choice
if
I
want
to
use
a
testing
framework
or
not
and
for
the
sake
of
simplicity,
I
will
say
no
as
well
as
I
will
not
enable
telemetry
and
I
will
simply
provide
a
default
name
for
my
tab.
So,
for
example,
tab
will
be
my
tab
name.
It
would
be
a
configurable
team
tab
which
will
be
inserted
in
a
team
and
I.
A
Don't
want
to
enable
single
sign-on
again
for
the
sake
of
simplicity
as
well
as
I.
Don't
want
to
be
able
to
host
the
solution
in
SharePoint
Online.
Now
this
coupling
process
is
running,
it
will
take
a
while,
and
then
we
will
have
our
scaffolded
solution.
And
here
we
are.
The
solution
is
ready,
so
we
can
just
run
Visual
Studio
code
by
writing
code
dot
and
we
will
access
disk
folded
solution
here.
There
are
a
bunch
of
files
how
to
generate
it.
A
Is
that
if
you
go
under
the
SRC
folder
in
the
scripts
folder,
you
will
find
a
folder
for
your
team
stop
and
in
there
you
will
find
we
react
components
where
the
main
one
is
the
yo
team,
stuff
dot,
TS
X,
which
is
the
auto-generated
one
for
my
tab,
and
it
is
a
react
component
which
extends
the
team's
base
component
provided
out
of
the
box
and
in
your
custom
component
you
will
simply
do
the
actual.
Rendering
of
your
solution
is
like,
as
you
do
in
any
real
component.
A
So
in
the
render
method
you
implement
the
UI
logic
of
your
solution.
So
before
digging
into
the
code,
let
me
start
the
solution.
Let
me
show
you
how
you
can
run
and
debug
it
in
teams
using
Visual
Studio
code.
You
can
see
piece
a
golf
and
rock
server,
and
this
will
start
a
local
server
on
your
machine,
which
will
be
available
with
the
public
address
thanks
to
the
end
rock
service,
and
you
will
be
able
to
use
this
solution
as
an
extensibility
model
for
Microsoft
teams.
A
I
cannot
be
solution
to
my
current
team
and
as
soon
as
it
will
be
done,
I
can
simply
go
through
the
general
channel,
for
example,
and
I
can
add
a
new
tab.
The
new
tab
would
be
based
on
the
youth
teams.
Tutorial
modules
you
know,
for
which
is
the
name
of
the
solution
I
just
created
I,
will
provide
a
ventrally
custom
configuration
like
my
custom
configuration
here
for
the
team
stop
and
by
clicking
on
the
Save
button.
A
My
custom
tab
will
be
rendered
and
included
in
my
channel,
as
you
can
see
the
configuration
that
provided
is
available
right
here
in
the
team
stuff.
Now,
if
I
go
back
to
visual
studio
code,
just
to
give
you
the
idea
of
what
we
are
doing
here
in
the
component
will
mount
of
my
react
component
I
already
get
the
entity
which
is
the
configuration
setting
for
my
team
table.
A
I
can
eventually
extend
the
state
of
my
component
so
that
I
can,
for
example,
keep
track
of
the
UPN
of
the
car
Reconnective
user,
and,
as
such
I
will
be
able
to
say
that
in
the
state
of
my
component,
I
want
to
add
the
UPN
value.
Reading
that
value
from
the
context
of
the
team
time
in
which
I
am
and,
as
you
can
see,
I
have
a
bunch
of
properties
available,
including
the
UPN
of
the
user.
A
By
doing
that,
I
can
then
say
in
my
render
method
that
this
is
the
configuration
settings
and
I
can
say
that
this
is
running
for
and
I
can
provide
the
UPN
of
the
user,
which
is
consuming
my
team
stuff
I
simply
save
the
source
code
of
my
real
component.
It
will
update
the
component
and
the
web
server
running
on
my
local
machine
and
as
soon
as
it
will
be
ready,
I
will
be
able
to
refresh
my
team
tab
in
theme.
A
So
let's
do
that
ctrl
f5,
and
you
will
see
that
now
my
team
stuff
is
running
for
the
user.
That
I
am
right
now,
so
you
really
have
a
simple
way
of
easily
creating
a
team
solution
which
can
be
a
team
stub.
You
can
run
it
in
Visual
Studio
code.
You
can
do
debugging
and
updates
on
the
fly
simply
using
react,
type,
script
and
business
to
your
code,
thanks
to
the
yeoman
generator
for
teams.