►
Description
In this video we'll walkthrough the steps on creating a complex Microsoft Teams personal apps using SharePoint Framework. Video shows how to use Microsoft Teams App Studio to create a manifest for SharePoint Framework solution which can provide a multi-tab experience and potentially to include also a bot on the personal solution.
This setup is aligning with the design guidance for the Microsoft Teams personal apps to have standard set of tabs for end users. Video demonstrates creation of the solution manifest file manually, rather than taking advantage of the standard "Sync to Teams" synchronization for getting SharePoint Framework solutions also available in Microsoft Teams.
Resources:
- Microsoft Teams Personal Apps - Design Guidance - https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/personal-apps
- Creating manifest manually for SharePoint Framework solutions - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart
- Getting started tutorial on creating Microsoft Teams channel tabs with SharePoint Framework - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab
Learn more about the Microsoft 365 & SharePoint developer community at: http://aka.ms/m365pnp.
A
Hello
in
this
video
we'll
have
a
look
on.
How
can
you
build
a
multi-tap
max
of
teens
personal
application
with
SharePoint
framework,
so
really
building
that
complex
max
of
team
solution
using
SharePoint
framework?
That's
the
UX
layer!
First
of
all,
why
would
you
actually
do
that?
Well,
the
beauty
of
SharePoint
framework
and
from
a
UX
layer
is
that
you
don't
have
to
worry
about
the
hosting
and
deployment
and
all
of
that
management.
A
So
you
not
actually
need
to
create
a
web
application
to
usher
or
somewhere
else,
which
will
then
host
your
UX
we'd
rather
take
advantage
of
SharePoint
framework,
for
example
with
react
or
angular,
and
then
we
implement
our
UX
layer
in
the
personal
application
or
as
a
time
using
the
SharePoint
framework,
and
that's
really
the
key
benefit
here.
So
you
don't
have
to
worry
about
hosting
and
deployment
and
operations,
because
all
of
that
is
automatic
and
doesn't
cost
you
anything.
So
don't
have
to
worry
about
hosting
the
application
as
such.
A
Now,
if
you
do
use,
for
example,
a
boat
and
then
the
boots
are
actually
hosted
in
Azure.
So
from
that
perspective,
if
we
include
a
boat
on
this
complex
solution,
you
still
need
to
figure
out
and
Azure
setup,
but
not
necessarily
again
the
personal
application
don't
have
to
explicitly
have
a
boat,
even
though
that
is
recommended
now
before
we
actually
go
on
the
actual
steps
on
how
to
make
this
happen.
Let's
have
a
look
on
what
we
mean
with
this
terminology.
A
So,
first
of
all,
Microsoft
teams
do
support
personal
apps
and
personal
apps
are
those
which
are
basically
available
from
these
three
dots
on
the
Left
menu
and
if
we
have
a
look
on
the
guidance
related
on
the
personal
apps
they're
slightly
more
complex
than
having
a
single
tab
in
a
channel
which
is
a
relatively
typical
way
of
exposing,
for
example,
shipment
framework
with
parts
or
applications
in
the
Microsoft
game
site.
So
let's
have
a
look
on
this
one.
A
So,
okay,
first
of
all,
you
get
two
personal
apps
from
the
three
dots
and
then
you
can
select
your
personal
application
and
into
personal
applications.
There
are
certain
guidelines
and
recommendations
coming
from
Microsoft,
so
first
of
all,
and
the
the
personal
app
will
have
a
tab.
The
tabs
are
basically
the
ones
where
person
goes
to
see
a
setting
or
see
a
functionality
or
settings
or
health
file
or
additional
views
on
the
information,
whatever
the
application
is
doing
so
as
an
example,
in
this
case
we're
using
the
personal
tasks
as
an
example.
A
So
by
default
you
land
on
this
personal
task,
but
you
can
actually
go
to
the
reason
task
or
all
tasks
to
see
individual
tasks
related
on
that
particular
application
or
the
tasks
application.
In
this
case
now,
if
you
scroll
down
on
the
guidance,
we
can
absolutely
say
that
what
isn't
required,
but
we
can
absolutely
also
have
a
bot
there
as
a
Adel's,
let's
say
they're,
one
of
the
landing
tabs
within
a
personal
application
and
obviously,
if
you
are
using
a
SharePoint
framework,
the
boat
is
still
a
bot
framework
implementation.
A
But
we
bundled
that
in
as
part
of
the
personal
application,
manifest
and
I'll
show
all
of
this
in
practice.
When
we
work
sure
within
the
steps
and
I
like
that,
it
is
recommended
to
have
help
and
potentially
Settings
tab.
So
the
settings
tab
is
there
because
you
might
want
to
have
configuration
options
for
your
persona,
which
are
not
exposed
by
default.
So
when
you're
adding
a
point
default,
a
max
of
teams
tab
to
a
channel,
there
is
the
configuration
option,
but
with
personal
apps
that
option
does
not
exist.
Sir.
A
You
could
expose
those
settings
and
configuration
options
in
your
solution,
but
it's
whatever
is
dependent
on
your
solution.
Good
now,
how
do
we
actually
make
this
kind
of
a
complex
personal
application
using
the
NGO
and
framework
now
by
default?
If
we
use
the
SharePoint
framework,
we
actually
implement
our
solution
using
thing
with
reactive,
UJS
or
angular.
Whatever
is
your
chosen
model,
and
then
we
package
the
solution.
We
put
it
in
the
a
shape
and
amp
catalog.
We
click
sync
to
teams,
and
that
will
also
generate
the
needed
manifest
for
Microsoft
teams.
A
What
are
the
settings
and
all
that,
and
therefore
you
can
actually
also
create
manually
in
the
manifest
which
we
will
then
use
to
deploy
to
say
student
myself
to
her
Microsoft
team
site
now,
let's
actually
work
through
this
process,
because
in
this
case
we
want
to
actually
follow
up
on
the
guidance,
the
design,
guidance
and
implement
a
complex
personal
application,
which
will
have
three
different
tabs.
Three
different
settings:
we're
not
going
to
include
a
boat
this
time,
but
absolutely
possible
as
well,
but
we'll
have
basically
the
the
application.
A
Tab
will
have
the
help,
tab
and
we'll
have
the
settings
tabs
and
how
do
we
actually
make
this
happen?
Let's
walk
through
that
process.
So,
first
of
all
what
I've
done
already
to
save
some
time.
Instead,
I
created
a
solution
where
I
have
three
different
webparts,
so
I
have
our
condo
symmetric
lob.
This
is
our
imaginary
lob
application,
where
I
basically
just
have
a
web
part.
Here
with
the
saying
this
is
the
primary
tab
for
the
experience
it's
just
to
explain
when
we
are
landing
on
this
one
or
watching
this
one,
a
max
of
themes.
A
You
know
that
this
is
the
primary
time.
We
also
have
a
bit
part
for
the
help,
exposure
or
the
help
tab,
which
is
basically
then
having
a
different
text
and
then
the
Settings
tab
and,
in
this
case,
I've
intentionally
kept
the
with
parts
themselves
as
simple
as
possible.
So
we're
not
gonna
concentrate
on
how
to
manage
the
settings.
That
is
a
separate
video
in
future.
Rather,
how
do
we
package
this
sub
personal
application
with
multiple
tabs?
Now?
How
would
we
do
that?
A
Well,
the
easiest
way
on
on
creating
anything
or
Microsoft
themes
is
really
taking
advantage
of
the
app
designer
which
is
available
in
the
Microsoft
themes.
So
let's
have
a
look
on
that
one.
So
let
me
get
back
on
my
tenant
and
let
me
go
back
to
my
developer
talent,
where
I
have
a
one
custom,
tab,
apparently
invisible
here
by
default,
but
I
want
to
actually
open
up
my
apps
to
do
an
app
studio
is
really
there
to
have
a
easy
way
of
creating
the
manifest
file.
A
Obviously,
you
still
need
to
implement
the
solution
to
be
hosted
in
Azure
or
an
SPF
X
solution
or
using
Theo
teams,
but
the
manifest
my
app
studio
is
there
to
create,
for
example,
the
monitor
fests
for
your
solution
and
I
guess:
I
have
some
examples
here,
but
let's
actually
create
a
new
one.
So
we
start
by
creating
the
man
manually
the
manifest
and
then
we'll
modify
that
based
on
the
whatever
is
needed.
So,
first
of
all,
let's
give
it
a
name.
Let's
call
this
contoso
lob
app
and
let's
give
it
a
full
name,
cantos.
A
Well,
we
can
actually
use
the
same
same
setting
here.
We
need
to
have
a
unique
ID
and
let's
actually
generate
that
one.
So
that's
fine!
Let's
call
this
cantos
cantos
personal
hello.
The
app
has
the
package
name,
the
version
being
1.0.
One
doesn't
really
matter
at
this
point
and
will
provide
the
description
as
well,
and
this
is
just
actually
copy
that
went
directly
from
there
and
for
the
full
description
as
well.
A
Obviously,
in
the
real
world
you
would
actually
want
to
explain
what
your
solution
is
all
about,
because
this
information
is
exposed
in
the
About
tab
of
your
solution.
I
will
show
that
one
in
practice
pretty
soon,
but
let
me
do
it
here:
floor
description
without
typos,
hopefully,
and
short
description
in
here
as
well.
Now,
then,
we
want
to
actually
include
the
developer
information
in
my
case
I'm,
going
to
just
use
the
contoso
as
well,
and
then
it's
the
DPS,
it's
a
DPS
condo.
A
So
it's
the
company,
it
was
in
the
in
the
mean,
imagine
Airy
world
creating
out
this
application.
If
I
would
be
a
porter
and
we
would
actually
add
in
the
partner
in
the
NID
in
here
and
in
future
you
might
actually
get
additional
statistics
around
your
solutions
based
on
this
idea.
So
it
is
actually
really
interesting
and
important
to
put
that
one
in,
even
though
it
is
an
optional
value.
Now,
then,
we
have
two
different
interesting
URLs,
which
we
need
to
be
careful
as
well
or
make
sure
that
they
are
actually
properly
written.
A
That's
actually
at
that
one
and
we're
basically
good
to
go
so
that
that's
the
basic
setup,
our
Brown,
the
solution-
and
we
did
this
now
manually
because
the
older
generation
with
sync
two
teams
doesn't
give
you
all
of
these
benefits
and
doesn't
give
you
all
of
the
attributes
which
we
want
to
use
in
this
case.
Now.
No,
it
actually
gets
them
interesting.
So
how
do
we
actually
add
that
additional
capabilities?
How
do
we
create
the
personal
app
using
the
SharePoint
framework
with
parts
behind
the
scenes?
A
What
we
want
to
do
here
is
basically
create
the
tabs
or
sorry
the
personal
yeah,
the
personal
application
tabs,
using
the
manifest
we
kind
of
fix
the
URLs
later.
But
let's
call
this
lob
information.
That
would
be
the
first
tab
where
we
will
expose
one
of
the
web
parts
and
the
idea
is
I.
Don't
it
doesn't
really
matter
content
URL
is
doesn't
actually
matter
either
at
this
point,
we're
gonna
because
we're
gonna
fix
it.
A
Again,
it
doesn't
really
matter
at
this
point
because
we're
not
really
gonna
fix
all
of
this
manually
in
a
second
well,
not
in
a
second,
because
secondary
is
already
done,
but
anyway,
so
pretty
soon,
it's
actually
out
of
one
more
zero
out
there
just
to
be
consistent
with
the
numbering
and
then
we're
gonna
add
a
one
more
personal
app
for
the
third
web
port.
We
third
webpart
waiting
on
the
shape
and
frame
resolution
slide,
and
that
was
settings
which
would
be
then
the
configuration
time
for
your
solution.
A
So
that's
actually
out
there
that
one
and
at
their
controller
and
at
their
contours
as
well
again,
we
kind
of
fixed
those
URLs
in
a
second.
So
now
we
have
three
tabs
in
our
personal
application
and
and
obviously,
if
you
would
like
to
have
a
boat,
if
you
would
like
to
have
any
other
settings,
you
would
be
doing
that
using
the
app
studio
as
well.
Now
we
could
do
domains
and
permissions
using
this
UI,
but
I'm
gonna
actually
do
that
manually
in
a
second.
A
So
for
now,
I'm
going
to
actually
put
here
just
condos
that
come
so
we
get
the
placeholder
a
placeholder
for
the
for
the
valid
domains
and
then
I'm
going
to
actually
update
that
based
on
the
documentation
which
we
have
available
in
here,
cool
I
think
we're
all
done.
We
could
add
that
ID
we
could
add
certain
other
settings.
We
could
combine
this
with
a
boardslide
nation
or
connector
so
mesnick's
nations,
but
in
this
case
we're
going
to
concentrate
on
a
SharePoint
framework
solution
based
the
UX
layer
in
the
solution.
A
A
We
can
access
all
of
that
information
over
say
using
the
team's
10
teams
folder
in
the
solution
side,
individuals
to
their
code
as
well.
So
we
can
see
that
one
over
there
and
there's
our
manifest
and
the
information.
Basically,
knowledge
is
whatever
we
actually
set
in
the
app
designer
in
the
Microsoft
M
site.
But
now
now
we
get
to
the
interesting
part.
A
So
we
want
to
actually
make
sure
that
for
the
individual
tabs,
which
are
the
static
times,
we
can
a
load,
the
content
and
dynamically
from
a
sharepoint
and
the
content
would
be
the
web
part
which
we
actually
have
created
as
part
of
the
solution.
Because
that's
what
we're
going
to
do?
We
want
to
make
sure
that
sharepoint
we
can
take
advantage
of
sharepoint
hosting
the
code
hosting
the
web
part
hosting
the
react
based.
A
Sorry
nonreactive,
the
normal
JavaScript,
that's
implementation
in
this
case,
but
it
could
be
react
or
angular
of
you
doesn't
really
matter
and
automatic
link
again.
The
hosting
is
the
keyboard.
This
way,
do
you
don't
have
to
worry
about
where
the
code
is
being
hosted?
How
to
deploy
that?
All
of
that
stuff
everything
is
automatic
and
taking
care
of
for
you
except
we
need
to
update
the
URL.
So
let's
actually
do
that,
and
so
let's
go
back
one
on
our
documentation
and
we
go
to
our
dog
stuff.
A
So
here's
what
we
should
be
using
as
the
automatic
URL,
and
let's
actually
do
that.
Let's
take
that
one
and
let's
actually
now
I'm
gonna,
take
that
URL
there
we
go.
The
content,
URL
and
I'm
gonna
go
back
in
my
manifest
and
I'm
gonna
actually
update
the
whole
content
URL.
Let's
actually
hide
that
one.
So
we
can
actually
see
what
did
we
get?
Let's
hide
action,
it's
a
tap
as
well.
What
did
we
get
from
the
from
the
document?
A
So
know
why
default
when
we
create
an
is
perfect
solution
inside
of
the
manifest
which
we
generate,
we
are
using
these
kind
of
tags
in
this
particular
case,
because
we
want
to
pin
points
to
a
specific
component
ID,
and
in
this
case
this
is
the
allowed,
the
information
so
domain
a
web
part
or
main
time.
We
need
to
go
and
check
what
is
the
individual,
a
ID
of
that
particular
web
part,
and
let's
actually
do
that.
So,
let's
go
back
on
our
files.
Let
me
save
that
one.
Let's
go
bug
in
the
files:
let's
go.
A
This
is
the
control
metrics
lob,
let's
go
to
it
manifest.
The
manifest
itself
has
a
specific
ID,
and
this
is
basically
unique
ID
of
that
particular
web
part.
So
we
can
now
instruct
SharePoint
to
load
this
Web
part
on
that
particular
tab,
because
the
URL
is
pointing
that
at
the
aspx
file
inside
of
the
of
the
SharePoint.
So
let's
actually
do
it
on.
So,
let's
go
back
in
here.
A
Let's
actually
update
this
section
and
getting
rid
of
one
of
those
priorities
and
pasting
in
the
good
of
that
particular
web
part,
and
let's
actually
do
the
same
for
all
of
the
other
other
webparts
as
well.
So
so
we
get
actually
actually
everything
working,
so
I'm
kind
of
what
I'm
going
to
do
is
that
I'm
going
to
copy
this
one
I'm
going
to
put
that
one
on
the
help
there
we
go
and
I'm
going
to
actually
put
that
one
over
there
as
well.
A
A
So,
let's
copy
that
one
and
let's
go
back
on
the
manifest
and
let's
go
and
update,
and
the
grid
of
that
particular
web
part
which
is
hosted
I'm,
sorry,
which
is
who
loaded
whenever
that
team's
host
aspx
file,
is
being
loaded
and
the
same
for
the
settings
with
word.
So
where
is
some
manifest
manifest
over
there?
Let's
actually
get
to
ID
copied
ID,
let's
go
back
on
the
manifest,
and
it's
getting
here
and
update
that
ID.
A
So
we're
loading
the
right
web
part
under
on
the
right
settings
there
we
go
so
now
we're
basically
pretty
close
ready
to
go,
except
for
one
more
additional
thing,
so
the
valid
domains
is
something
what
we
need
to
double
check.
So,
let's
go
back
on
our
documentation
where
we
actually
define.
How
do
we
create
the
manifest
manually?
Let's
scroll,
all
the
way
down
here,
we
can
say
that
the
valid
domains
should
be
slightly
more
complex
than
that.
A
To
be
honest,
some
of
these
domains
are
I
would've
read
it
doc
used
so
they're,
not
actually
relevant
for
production
usage,
but
it's
fine.
We
can
actually
copy
all
of
those
settings
move
back
in
here
and
paste
in
the
list
of
the
URLs
as
the
valid
domains
for
the
solution,
and
that's
it.
We
are
pretty
much
ready
to
go
so
now.
What
we
need
to
do
is
to
think
how
do
we
package
the
ship
and
framework
solution?
A
So
in
this
case,
then
we
have
treatment
parts
which
are
intended
to
be
personal
applications
and
personal
as
part
of
this
personal
ad
in
the
Microsoft
team.
So
that
means
that
maybe
this
sitting
or
exposing
that
as
a
SharePoint
web
port
doesn't
make
any
sense
now
using
the
supported
host
option.
You
could
actually
also
have
some
additional
settings
like
the
personal
themes,
personal
or
personal
themes,
time,
but
we're
not
interested
on
the
order
generated
option
for
the
manifest.
So,
therefore,
what
we
actually
want
to
do
is
get
rid
of
the
supported
hosts
completely.
A
So
this
way
the
web
part-
and
none
of
these
web
parts
are
being
exposed
as
an
option
in
the
max
of
themes
or
the
sink.
The
themes
option
is
not
visible
in
the
app
catalog
ADA.
So
let's
actually
do
that.
Let's
get
rid
of
those
settings
and
we're
all
good
everything
saved,
let's
close
and
the
files
and,
let's
actually
open
up
the
terminal.
So
we
can
do
some
packaging
we're
good
to
go
from
a
solution
perspective
and
before
we
package
our
manifest
file
and
deploy
that
to
the
teams.
A
We
want
to
make
sure
that
we
have
the
solution
deployed
to
the
SharePoint
with
the
shipment,
we're
pointing
the
URLs
that
the
SharePoint
and
SharePoint
needs
to
have
access
on
those
component
IDs
which
we
created
in
here.
So
let's
actually
do
that.
So,
let's
do
a
gob
bundle.
Does
the
ship
so
basically
making
sure
that
the
typescript
is
getting
trans
compiled
to
a
JavaScript
and
it's
ready
to
get
packaged
doesn't
take
too
long?
A
A
So
let
me
actually
open
up
that
one
and
let's
go
to
the
catalog
and
that's
actually
it's
in
apps
there
we
go
I,
just
remember
the
URL,
so
I'm
two
pointing
jumping
the
Daffy
catalog
of
this
particular
tenant
I'm
now
going
to
apps
to
SharePoint,
because
SharePoint
is
going
to
be
hosting
automatically
in
my
solution.
So
let
me
actually
open
up
again.
The
folder
structure
I
have
quite
a
lot
of
stuff,
apparently
in
here.
A
If
I
go
to
the
SharePoint
folder
solution,
there's
there's
the
pkg
file
and
now
I
can
track
and
drop
that
one
in
it's
going
to
ask
me
to
approve
the
settings
to
do
all
that
stuff.
In
this
case,
we
want
that
to
be
actually
deployed
across
the
tenant
automatically,
so
that
the
loading
of
the
component
ideas
in
the
T
in
the
in
the
dynamic
hosting
is
is
working
any
problems,
let's
actually
click
deploy
and
there
we
go
upload
complete
ends.
A
If
we
go
back
in
here,
if
you
refresh
the
page
should
be
somewhere
in
here
list
of
the
bases,
we
should
be
able
to
see
a
new
solution
to
be
a
visible
a
few
seconds.
There
be
a
multi-tap
personal
app,
and
that
is
the
one
which
is
responsible
of
actually
rendering,
then
the
UX
layer
in
the
Microsoft
themes,
and
now,
since
we
got
rid
of
the
setting
in
the
manifest
file.
A
If
we
go
back
in
here,
we
can
actually
see
that
the
sync
two
teams
option
is
not
available
and
that's
because
the
the
web
part
is
not
set
to
be
available
in
Microsoft
themes
because
we
created
again
the
manifest
manually.
But
now,
let's
do
the
team
side.
So
let's
go
back
on
the
solution
and,
let's
actually
close
the
web
parts,
we're
not
interested
on
those.
We
have
the
folder
in
here,
which
is
the
one
which
we
want
to
actually
package.
We
updated
the
team's
host
apps.
A
We
updated
that
it's
a
personal,
come
with
a
component
idea
specific
and
we're
pretty
much
good
to
go.
So
that's
the
folder
which
were
going
to
actually
package.
So
let
me
go
there
and
reveal
in
File
Explorer
there's
the
folder.
Let
me
get
rid
of
the
old
zip
file.
Let
me
actually
back
it's
that
folder
intent
under
the
center
sent
to
way
too
many
options
that
why
am
I?
A
And
he
so
selecting
sent
to
compress
a
folder
that
was
awkward
not
to
find
that
selection
really
getting
old.
There's
the
contoso
LLP
app
save
file,
and
that's
basically,
now
the
solution
file
for
teams
and
in
the
in
the
Microsoft
Store
in
the
SharePoint
solution
file.
It
did
actually
contain
the
assets.
A
So
in
this
air
here
point
SP
pkg
file,
we
can
actually
see
that
it
contains
all
of
the
JavaScript
files
and
and
outputs
and
also
assets
and
rendering
logic,
but
the
team's
solution
file,
which
is
the
SIF
file,
only
contains
now
what
we
had
within
that
folder,
which
is
basically
the
manifest
and
the
images
for
this
particular
solution,
and
how
do
we
get
this
one
installed?
Well,
in
our
case,
we
have
enabled
site
loading
within
this
challenge.
So
let's
go
back
in
in
the
in
the
team
site.
A
Let's
go
back
in
apps,
let's
actually
go
back
and
build
for
mm
365,
P
and
B,
which
we
would
actually
see
off
the
options
which
are
the
ones
specific
for
this
particular
tenant
and,
in
our
case
well,
didn't
actually
need
me
to
go
there,
but
anyway,
I'm
going
to
actually
upload
the
file
from
the
file
system,
and
let
me
actually
go
back
in
in
here.
Tombo
get
the
URL,
and
let
me
paste
that
one
in
here
and
not
there
there
it's
good
at
the
right,
folder
and
choose
the
lob.
A
So
let's
have
a
look
on
make
sure
that
we're
on
the
right
location,
so
e,
PMP,
multimeric
yeah.
That's
the
one
and
themes
themes
and
that's
the
one
and
that's
the
zip
file.
So
let
me
actually
take
that
one
and
the
manifest
forcing
has
been
failed
now.
This
means
that
I
need
to
actually
have
a
look
on
what
is
wrong
with
in
the
parsing
and
what
is
wrong
with
the
settings
and
I'll
be
right
back
with
a
clarification.
What
went
wrong
and
what
are
the
things
which
we
copied
it
in
the
wrong
way.
A
This
is
actually
very
good,
because
now
we
need
to
do
some
troubleshooting,
which
you
might
actually
find
as
well.
So
the
problem,
what
we
actually
did
here
was
pretty
typical
I've
done
this
so
many
times.
I
said
this
is
good
learning
for
having
add
the
packaging,
and
some
of
you
might
have
actually
noticed
what
I'm
doing
it
wrong.
But
the
problem
really
was
the
fact
that
I'm
actually
having
a
subfolder
a
folder
within
the
zip
file
and
that's
not
how
things
actually
should
be
done.
A
So
what
I
need
to
have
is
a
zip
file
and
let's
actually
do
that
one
more
time
and
send
compressed
zip
folder,
where
the
files
are
actually
within
the
root
of
the
zip
file,
so
they're,
actually
in
the
rich
zip
file,
not
an
inside
of
a
folder
inside
of
the
zip
file.
So
let's
actually
do
that.
Let
me
take
that
name
from
there
and
let's
actually
fix
that
one,
and
here
we
go
and
there
we
go
now.
How
did
I
actually
solve
that
issue?
That's
that's
actually,
probably
quite
interesting
as
well.
A
So
in
here,
when
we
uploaded
the
settings,
we
did
have
an
exception
and
the
exception
had
something
which
said:
can
you
do
you
want
to
copy
the
exception
to
your
clipboard
and
by
doing
that,
I
was
actually
able
to
get
following
a
message.
I'm
gonna
actually
paste
it
in
here,
which
is
error
while
extracting
packets,
please
ensure
that
there's
no
folders
and
you
have
packets
and
that
practice
contents
on
a
manifestation
and
the
two
required
icons.
So
basically,
there
was
an
instructions
how
to
fix
it
in
their
section
methods,
which
is
quite
typical.
A
Actually
it's
a
matter
of
always
reading
the
exception
message
as
well.
So
let
me
upload
the
file
again
so
where
we
are,
we
are
in
the
teams
where
that's
the
folder
there's
the
zip
file
and
let's
see
if
we
can
actually
get
a
name
and
there
we
go.
We
can
actually
see
the
contoso
lob
app
now
available
for
Microsoft,
365
B&B,
and
because
this
is
an
personal
application,
we
can
now
actually
see
it
available
in
here
as
well.
A
So
it
takes
a
while
actually
the
Refresh,
but
we're
able
to
basically
select
that
and
directly
from
the
build
for
Microsoft
365
BMP,
and
let
me
actually
do
that.
So,
let's
click
that
one
well.
If
we
can
actually
see
that
there's
the
full
description,
the
short
description
and
the
settings
which
were
created
in
the
manifest
file
and
that's
the
the
URL
and
the
link
which
is
pointing
to
the
file
and
that's
the
information
which
were
provided
as
a
as
the
name
and
all
of
that
stuff.
A
We
could
actually
fix
the
image
as
well,
if
I
click
and
it's
going
to
install
that
as
a
multi-tap
personal
application
and
we
can
actually
see
it
in
our
web
parts
are
being
properly
loaded.
So
this
one
is
the
primary
tab
for
the
experience
is
my
own
personal
app,
and
this
is
a
main
personal
absolution
experience.
Unlike
that
intentionally
there
was.
A
But
the
key
point
here
is
that
now,
if
I
go
to
the
help
tab,
we
can
see
a
different
web
part
getting
loaded
which
is
helpful,
your
solution
and
then,
if
we
go
to
settings,
that's
the
third
way
part
which
is
getting
loaded,
which
is
called
settings,
and
that
could
be
the
configurations
and
settings
for
your
solution
and
like
that,
based
on
the
guidance
as
well.
We
could
actually
have
also
here
boats
and
everything
else
included
in
the
solution
like
in
the
in
the
documentation
scenario.
A
What
we
have
in
here
and
by
the
way
the
oberursel
links
to
these
articles
are
available
in
the
video
notes
as
well.
But,
like
I
said
now,
we
have
a
multi
tab,
personal
absolution,
where
the
UX
is
being
automatically
hosted
by
SharePoint,
rather
than
demanding
you
to
actually
do
it
hosting
and
creating
a
website
in
Azure
or
some
other
location.
So
this
way
it
is
much
more
cost
efficient
and
you
can
actually
reuse
the
skills
which
you
potentially
have
for
share
one
favor
for
then
in
the
Microsoft
team's
development
as
well.
A
If
you're
not
familiar
with
Japan
framework,
a
SharePoint
framework
actually
supports
react
and
angularjs.
Whatever
is
your
chosen
platform
and
it's
a
pipe
script
based
implementation
and
like
any
modern
development.
Nowadays,
this
for
the
web
stack
are
based
on
the
web,
stack
more
also,
industry,
standard
ways
of
extending
the
UX
of
SharePoint
and
also
UX
of
teams,
and
that's
pretty
convenient
to
have
a
one
way
of
doing
things
from
that
perspective,
again,
multiple
different
tabs
in
a
single
solution
and
about
half.
A
But
that's
all
pretty
big
long
video.
We
even
run
into
that
small
hiccup,
a
hero
issue-related
on
our
solution,
which
is
actually
a
really
good
one.
Because
now
you
understand
how
the
what
was
the
issue
related
on
packaging,
because
I
accidentally
left
that
additional
folder
inside
of
the
of
the
SIF
one
and
pretty
typical
thing,
which
probably
you
will
run
into
sooner
or
later,
when
you're
implementing
the
instincts.
But
that's
all
what
we
going
to
do
in
this
video,
so
this
one
was
really
around.
A
How
do
we
build
and
multi-tab
Microsoft
Dean's
personal
apps
with
SharePoint
frameworks,
they're
really
creating
that
complex
marks
of
theme
solutions
using
the
SharePoint
framers
as
the
UX
layer,
and
we
could
absolutely
include
the
what
framework,
together
with
these
elements
and
the
tabs
and
then
have
a
really
complex
and
polished
personal
application
available
for
Microsoft
themes,
but
thank
you
for
watching
and
please
keep
up
the
feedback
coming.
Thank
you.
Goodbye.