►
From YouTube: Community demo - Modern “Save site as a template” with SPFx, Azure Functions and Tenant templates
Description
This community call demo is taken from the SharePoint Framework community call recording on on 26th of September 2019. In this video, Alaa Bitar (SERIAL) is showing how to create a modern “Save site as a template” capability with SPFx, Azure Functions and PnP Tenant templates
Presenter - Alaa Bitar (SERIAL)
You can find more details around SharePoint Framework can be found from following location - http://aka.ms/spfx
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
My
name
is
a
Levite:
are
I'm
come
from
Lebanon,
but
I've
been
living
in
Switzerland
since
a
year
and
a
half
now,
basically
I'm
a
SharePoint
addict
since
2007,
so
yes
guilty
as
charged,
but
I'm.
Also
an
office
365
and
SharePoint
consultant
for
a
consulting
company
called
Syria,
which
is
part
of
a
larger
group
in
Europe,
called
the
positive
thinking.
Company
I'm
also
Microsoft
certified
trainer,
and
this
I
can
I'm
sharing
my
github
and
my
linking
in
profile.
A
So
you
have
you
have
like
a
template,
an
existing
SharePoint
site
and
you
want
like
to
clone
it,
but
not
just
okay,
the
look
and
feel
the
pages
and
the
web
parts
inside
inside
of
it,
but
also
the
documents
that
are
in
different
document
libraries.
So
the
solution
that
I
will
be
representing
is
basically
an
SPS
facts.
Web
part
that
is
just
like
a
react
form
that
will
trigger
a
Porsche
as
as
your
function
that
will
use
the
PNP
provisioning
engine
to
do
basically,
three
things.
A
The
first
thing
it
will
save
the
template
for
for
the
selected
site.
Then
it
will
create
like
a
blank
site,
just
a
regular
one,
and
then
it
will
apply
the
safe
template
to
this
side.
So
let
me
show
you
my
amazing
SPF
x4
part,
so
this
is
it
basically,
it
has
to
fill
the
the
name
of
the
site
and
this
drop-down
list
that
is
basically
bound
to
what
are
the
different
sides
that
you
like
tagged
as
ice
templates.
So
you
can
I've
created
like
two
two
two
two
templates
and
I
have
two
two
button.
A
So
if
I
select
the
template,
I
can
open
the
template
just
to
see
how
it
looks.
So.
Basically,
this
template
has
a
welcome
page
with
some
quick
links
and
a
Twitter
web
part.
It
has
a
document
library
where
I
put
a
simple,
simple
PDF.
If
we
take
a
look
at
the
other
template,
the
v1
is
a
bit
different.
A
It
has
like
the
the
the
document
library
web
part
on
the
on
the
page
and
I
created
like
two
two
different
pages:
one
article,
one
Q
and
a
and
I've
created
also
a
document
library
called
invoice
and
with
a
with
a
PDF
inside.
So
basically,
here
I
can
say
like
new
site
template
be
okay
and
I
will
hit
the
the
create
site
button
and
because
this
is
a
test
environment,
so
it
is
a
bit
slow.
A
It
takes
a
couple
of
minutes,
so
during
the
the
provisioning
of
the
other
side,
we
will
go
through
the
the
the
web
part
and
the
the
user
function
so
I'm
just
hitting
the
create
side.
So
I
have
a
loader
stating
that
it
is
in
this
saving
site
template.
Then
it
will
like
create
the
empty
side,
and
then
it
will
display
the
applying
template
and
a
new,
a
new
tab
will
will
will
open
with
the
on
the
on
the
new
site,
new
site
and
be
URL.
So
basically,
the
the
web
part
is
not
like
really
fancy.
A
This
I
have
like
this
here,
the
the
title,
and
what
is
maybe
a
bit
interesting
here,
is
the
drop-down
list
that
is
binded
to
the
to
this
mountain.
Sorry
to
this,
this
that
state
that
template.
So
how
are
provisional
this
this
property
is
basically
I,
have
a
template,
SharePoint
list
where
I
define
my
different.
A
A
So
if
we
go
back
to
the
web
part,
basically
the
the
two
buttons,
the
first
one
open
the
template,
I'm
just
doing
like
a
window
open
for
the
selected
items
in
the
selected
item
in
the
drop-down
list.
But
what
is
interesting
is
this
this
this
one.
This
create
side
button
that
is
binded
to
the
handle
side,
creation
creation
function.
A
So
basically,
basically
I
I
created
like
a
wrapper
for
calling
another
function,
and
you
just
pass
the
JSON
data
that
you
want
to
to
post
and
for
for
this
actual
function,
because
this
this
Azure
PowerShell
function
is
triggered
by
HTTP.
So
you
just
have
to
call
it
with
with
the
post
and
you
just
send
a
JSON
object
in
order
to
do
it
to
do
to
tell
the
error
function.
What
what
you
want
to
do?
A
So,
if
you,
if
you,
if
we
go
to
the
handle
side,
creation
function,
so
okay,
first
I'm
just
said
the
state
to
show
this
loading
message
and
then
I'm
calling
the
actual
function
with
those
those
two.
Those
two
properties
in
the
the
JSON
object,
so
I'm
telling
it
basically
the
destination,
the
URL
of
the
site
that
I
want
to
in
the
moon,
safe
template.
So
in
the
in
the
azure
function,
we
I
will
show
it
to
you
in
a
bit.
B
A
Look,
what
is
the
destination
I'm
connecting
to
this
destination?
Url
and
I'm
saving
the
other
tab,
the
template
for
for
this
destination
URL
then
I'm
calling
the
same
error
function,
but
this
time
with
the
mode
create
site
and
I'm,
just
passing
by
the
the
title
of
the
site
that
I
want
to
create.
So
basically,
here
we
are
creative,
creating
basic,
empty
Tim
site
site
and
then
the
last
thing
that
we
want
to
do
so.
A
No,
not
the
last
thing
that,
before
the
last
one
per
se
is
to
apply
the
template
that
we
just
created,
and
we
are
just
saved
to
to
the
selected
side
that
we
just
created.
This
is
why
we
passed
mood,
apply
template
and
then,
when
everything
goes
as
expected,
we
just
opened
the
the
new
created
site.
So
let
me
just
have
a
look
on
the
okay.
So
now
we
are,
we
passed
the
first
mode,
save
template.
We
passed
the
second
one
create
site,
and
now
we
are
applying
the
template
to
the
new
created
site.
A
So
if
we
have
look
to
the
on
the
azure
poor,
poor
cell
provisioning
function,
so
basically
here
at
first
I'm
just
getting
what
what
has
been
passed
in
the
in
the
body
of
the
of
the
of
the
call
I'm
just
like
preparing
the
the
username
and
the
password
to
create
a
credential
object
in
order
to
connect.
So
here
it
is
the
first
first
case
the
safe
template
so
I'm
connecting
to
the
to
the
side
and
then
and
just.
A
Creating
a
bit
the
safe
directory,
because
what
I
want
is
to
have
four
per
site
so
basically
I'm
creating
a
folder
this
by
the
name
of
the
of
the
title.
So
here
it
is
a
template,
B
or
a
or
I.
Think
I.
Don't
remember!
Let
me
just
check,
it
is
stunted
B,
and
here
it
it
has
finished
so
open
like
a
new
tab
and
hopefully
it
it
will
look
like
almost
the
same,
the
same
site
as
my
template
site.
So
it
looks
good
till
now.
A
Let's
just
see
if
it
is
loading
right,
the
web
part,
but
we
can
we
can.
We
can
come
back
for
it
today.
Maybe
okay
I
will
I
will
come
back
for
it
once
it's
fully
loaded,
so,
okay,
so
I'm
just
specifying
the
name
of
the
the
template
file,
XML
and
then
I'm,
just
like
calling
the
get
PNP
provisioning
templates
and
really
really
I
have
to
have
to
say
this.
Thank
you
for
this
little
guy.
A
This
little
new
new
attribute
include
all
client-side
pages,
because
this
has
been
like
a
new,
a
new,
a
new
attribute
that
you
added
guys,
and
it
saves
us
a
lot
of
a
lot
of
time
so
once
I
provisioned,
once
I
generated
this
this
template,
because
the
mechanism
of
the
PNP
provisioning
is
to
save
the
structure
of
the
site.
But
what
I
wanted
to
do
also
is
to
inject
in
this
template
the
the
different
document
data
that
I
have
in
inside.
A
So
in
order
to
do
this,
I
just
like
getting
the
list
of
the
different
document,
libraries
that
I
have
on
my
in
my
SharePoint
site
and
with
these
two
little
guys
process
polar
and
process
subfolder.
It
is
just
too
to
to
function
that
I
created
and
basically,
what
is
interesting
here
is
this
one
so
I'm
for
every
file
in
a
document
library
and
with
using
the
get
PNP
file
and
downloading
the
file
and
using
this
ad
NP
file
to
provisioning
template
I.
A
It
is
like
you
are
injecting
in
the
template
that
XML
file
the
the
name
of
the
document
and
the
URL
for
for
this
document.
So
later,
when
you
apply
the
template,
so
in
your
template
file,
you
don't
you
you
just
you,
don't
just
have
the
structure,
but
you
also
have
the
documents
and
then
their
corresponding
URL.
A
So
when
you
just
call
the
apply,
PNP
provisioning
template
the
npnp
provisioning
function,
it
will
inject
as
well
in
your
new
site,
the
the
different
documents
that
that
are
that
were
specified
in
the
in
your
template,
the
XML
file,
and
just
basically
here
the
second.
The
third
third
mode
is
create
site.
It
is
I'm
just
like
connecting
to
the
to
the
instance
and
I'm
like
adding
a
sub-site
to
the
to
my
to
my
parent
site.
So
if
we
have
a
loop
here,
so
yes,
it
has
fully
loaded.
I
had
my
little
tags.
A
B
So
Patrick,
if
you
don't
mind,
I
just
have
to
say
that
every
single
time
I
say
that
the
provisioning
engine
to
work
without
any
problems
like
I
still
it
just
keeps
on
amazing,
miss,
Dale
and
I,
know
I,
even
designed
or
original
design,
for
it.
I
don't
write
it
anymore,
but
still,
but
it
is
really
cool
that
you
can
live
and
do
a
runtime
extraction
and
apply
on
an
existing
side.
It's
just
really
great.
The.