►
From YouTube: Community demo - Building custom multilingual solution for modern pages with SharePoint Framework
Description
This community call demo is taken from the SharePoint Framework community call recording on 9th of May 2019. In this video, Julie Turner (Sympraxis Consulting) demonstrates a custom solution for providing a multilingual experience with modern pages.
Presenter - Julie Turner (Sympraxis Consulting) - @jfj1997
Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-9th-of-may-2019/
Used solution sample is available from https://github.com/SharePoint/sp-dev-solutions/tree/master/solutions/MultilingualPages
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
I'm
planning
on
only
doing
a
demo,
because
there's
a
lot
of
a
lot
of
work
here
and
not
spend
very
much
time
at
all,
looking
at
code,
but
basically
we're
talking
about
in
the
SP
dev
Solutions
repo,
the
multilingual
pages
solution,
and
so
there's
a
big
long
ravine.
Here,
that's
going
to
go
through
a
lot
of
what
I'm
going
to
demo
today,
but
that's
what
we're
talking
about,
and
so
the
other
thing
I
want
to
just
point
out
before
I
lose
time
on
it
is
at
the
sharepoint
conference.
A
In
a
couple
of
weeks
I
will
be
demoing
this
again
and
vcpr
from
microsoft
will
be
giving
some
roadmap
for
Microsoft's
plans
on
multilingual,
so
I
just
wanted
to
sort
of
give
a
shout
out
to
to
that
session,
because
I'm
sure
for
the
people
who
are
really
interested
in
multilingual.
That's
going
to
give
you
a
lot
of
insight
to
what's
what's
happening.
Okay
so-
and
this
is
a
SharePoint
framework
solution
built
on
the
1.7
version
of
the
framework
or
we
have
not
updated
it
yet.
This
was
originally
built
for
the
shire,
slash
Takeda,
Pharmaceuticals
merger.
A
That
happened.
This
last
fall
where
they
had
a
a
need
for
multilingual
and
so
between
David
Feldman
who's,
another
MVP
and
myself.
We
designed
this
solution
and
then
I
built
the
extension
and
another
guy
named
Scott
Hillier,
who
many
of
you
probably
heard
of
built
the
redirector
web
part
that
goes
with
this
solution.
So
basically,
once
you
add
the
application
to
your
site
collection,
it
builds
itself
out
by
adding
some
site
columns
and
to
the
site
information
panels.
A
So
let
me
go
show
this
whew
all
site
settings
and
if
we
go
into
site
columns,
we
can
see
that
it
adds
some
site
columns
that
support
this
multilingual
solution.
So
you
have
a
language
folders
so
which
folder
is
the
page
in
which
variants
of
the
languages
does
this
page
support?
When
was
it
last
synced
from
the
page
that
is
defined
at
the
master?
What
is
the
master
translation
pages
ID
if
there's
a
redirector
page?
What
is
that
URL?
A
And
then
we
added
all
those
site
columns
to
the
site,
page
content
type
in
here,
so
that
every
page
in
your
site,
pages
library
gets
those
properties,
and
so
this
is
done
on
a
site
collection
by
site
collection
basis,
and
so,
if
I
come
back
to
my
home
here
and
then
go
into
pages
library,
the
other
thing
it
does
is
then
provision
these
folders.
Now
these
folders
come
from
a
tenant,
app
property
that
has
a
JSON
blob
that
defines
the
languages
and
I'm
hoping
I
can
quickly
come
up
with
this
whoops.
A
Storage
entity
and
so
we're
getting
the
storage
entity,
which
is
the
language
configuration
and
you
can
see
the
value
in
here,
has
a
JSON
blob
that
defines
all
the
languages
we're
going
to
support
in
this
tenant.
Okay,
so
shutting
that
down,
we've
got
a
folder
for
every
language
and
right
now
this
is
a
pretty
empty
site.
A
Kalaiy
Brera
I
only
have
the
home
page
in
here,
but
I
also
did
go
ahead
and
I
have
the
all
pages
library,
where
I
added
my
property,
so
I
could
see
it
and
then
I
also
created
a
flat
view,
so
that
I
could
see
it
flattened
by
library
and
that
sometimes
helps
so
that
you
can
see
what
pages
you
have
going
on.
So
now,
if
we
go
ahead
and
create
a
new
site
page.
A
So
what
I
can
do,
then
is
decide
what
the
master
language
is
for
this
particular
page
and
move
it
into
that
folder
and,
like
I,
said
I
I
speak
English,
so
I'm
gonna
start
with
the
English
translation
and
then
I'm
gonna,
say
I
want
to
move.
The
page
can't
confirm
so
I
want
to
move
the
page
and
I
put
it
over
into
that
folder.
A
So
by
default,
every
page
gets
tagged
with
all
the
languages
you
support
and
if
we
come
back
over
here,
we
can
now
see
that
we
have
this
multilingual,
not
configured
indicator
down
here
and
if
I
go
into
edit
mode.
I
get
a
language
details
button
when
I
get
the
language
details.
I
can
then
see.
Okay,
we
haven't
started
a
translation
of
this.
We
are
identifying
this
page,
the
master
translation
as
English,
and
we
can
get
more
information
about
this
page
like
that.
A
It
knows
based
on
the
settings
either
the
regional
settings
or
the
tenant
settings
or
the
user's
personal
language
settings
and/or.
It
falls
back
all
the
way
to
the
browser
settings
of
which
language
the
user
wants
to
see,
and
if
there
is
a
translation
that
matches
their
language,
it
will
redirect
them
to
that
translation.
Otherwise
it
will
stick
to
the
master
translation,
so
we're
gonna
go
ahead
and
hit
apply
language
changes,
and
this
can
take
a
few
minutes
fast
today,
and
so
now
we
have
some
translations
out
there.
A
A
We've
want
to
that's
not
really
important
right
now,
but
they,
the
user
experience
for
users
that
come
to
this
page,
would
be
that
they
get
this
selector
that
allows
them
to
switch
languages
if
they
want.
So
it
shows
them
what
language
they're
in,
but
if,
for
whatever
reason,
maybe
their
language
settings
are
set
to
English
but
their
native
Japanese
speakers,
they
want
to
see
the
Japanese
translation,
they
can
come
down
here
and
say:
okay,
well,
I
want
to
go
to
the
Japanese
translation.
A
Okay,
so
you
can
tell
now
that
I'm
in
the
Japanese
folder
here
and
because
I'm
an
editor
I'm
going
to
edit
this
page
and
I
can
now
say
this
is
the
Japanese
page
and
I
could
do
something
else
too,
to
sort
of
make
it
stand
out
so
that
we
can
really
see
that
this
is
a
different
page
and
so
I
can
make
that
change.
And
let's
save
that
as
a
draft
and
just
let's
even
publish
that,
and
so
now
we
can
see
we're
on
the
Japanese
page.
A
But
if
I
come
back
over
to
the
English
page,
excuse
me
and
we
edit
this
page,
we
can
see
on
the
language
details
under
the
Japanese
version
that
this
version
has
been
modified
since
the
last
time
it
was
synced.
It
is
published
and
we're
seeing
this
new
translator
comments
section
here.
So
what
the
functionality
is
here
is
that
if
we
want
to
change
the
English
version
and
say
and
change
this
and
save
it,
and
then
we
decide
that
we
want
to
open.
A
If
we
want
to
retranslate
it,
we
can
then
just
say
you
know
changed
text
he's,
read
translation
and
that's
not.
Well.
That's
because
ok,
so
we
can
do
that
and
what
will
happen
then
is
for
the
German
page,
because
we
haven't
changed
it.
It
actually
will
replace
the
German
page
and
for
the
Japanese
page
it's
gonna
send
an
email
to
this
person
here
with
the
translator
comments
in
it,
letting
them
know
that
the
the
the
trans,
the
page,
the
master
page,
has
been
changed
and
that
we
need
some
read
translation.
A
There
is
also
the
ability
to
replace
all
existing
pages.
So
if
you
have
a
massive
redo
of
a
page,
you
could
just
override
all
of
the
changes
and
apply
it
to
every
single
translation.
So
if
I
apply
this
change
and
it
doesn't
take
too
long
and
we
publish
yeah
I,
know
and
then
I
come
back
over
to
the
Japanese
version.
We're
gonna
see
where
we're
still
in
the
way
the
Japanese
version
was.
A
But
if
we
go
to
the
German
version
you
we
can
see
that
it's
still
unchanged
and
that
we
haven't
really
done
anything
with
that.
So
if
we
come
back
to
the
English
version,
one
more
time,
I
go
into
edit
mode
and
I
add
a
redirector
page.
We
can
see
that
we're
gonna
get
a
URL
here
that
is
in
the
root
of
the
site
pages
library,
so
I'm
gonna
apply
this
change
and
I'm
gonna
wait
and
I'm
gonna
wait.
A
This
actually
takes
a
little
bit
of
time
because
it's
actually
using
the
awesome
code
that
Patrick
we
reverse
engineer
to
do
the
client
pages
library
and
the
p.m.
PJs.
So
that
was
super
helpful
I
was
ecstatic
to
see
that
he
had
done
all
that
work
for
me
and
I
didn't
have
to
do
it.
So
now,
if
I
put
this
page
in
we're,
gonna
see
a
quick
blink,
but
then
it's
taken
me
to
the
English
version
of
this
page.
A
If
I
put
this
back
in
here
and
put
stay
equals
true
in
here,
then
the
web
part
knows
to
stay
on
the
page
and
I
can
donations
yes,
I
know,
I
should
absolutely
donate
to
you,
because
that'd
save
me
a
ton
of
time.
So
now
I
can
see
that
this
webpart
started
telling
us
what
we
what
it
was
trying
to
do,
what
it
was
trying
to
take
us
to
him.
We
can
edit
it
and
look
at
what
the
redirects
are
and
can
see
that
for
Japanese.
A
It's
gonna
try
to
take
you
to
the
Japanese
page
for
German.
It's
gonna,
take
me
the
German
page
and
for
everything
else,
it's
gonna
to
stay
it's
going
to
redirect
back
to
the
English
page.
So
this
is
a
way
that
you
can
have
a
link
to
one
page
that
will
take
you
to
whatever
language
for
whatever
users.
So
if
you
need
to
have
a
link
in
like
a
navigational
menu
or
something
like
that,
this
is
a
handy
way
to
make
that
work
so
that
you
can
get
the
redirects
to
the
right
pages.
A
You
can
also
add
this
webpart
manually
to
any
page
and
and
then
configure
it,
but
the
web,
but
the
extension
will
configure
it
for
you,
so
you
don't
really
have
to
know
how
to
do
this.
I
just
wanted
to
show
what
it
was
doing
under
the
covers
that
this
was
getting
created,
but
the
users
don't
have
to
know
about
this.
They
don't
have
to
configure
it.
It's
all
done
by
clicking
that
little
slider
in
the
extension
to
send
them
to
the
redirector.
So
where
was
life
so
over
here
back
over
here?
A
It's
all
managed
through
this
redirector
page.
So
as
I
add
new
translation
and
apply
those
changes,
because
this
redirector
page
is
here,
the
redirector
page
will
get
updated
with
the
new
translations
and,
as
you
take
things
off
and
add
things
on
that,
all
will
just
happen
so
yeah
there
was
I've
got
two
minutes
and
there
was
one
other
thing
I
wanted
to
show.
There
is
it's
from
a
code
perspective.
Let
me
see
if
I
can
get
up
here.
So
this
is
the
the
code
base.
We
have
the
multilingual
extension.
We
have
the
redirector.
A
The
one
thing
I
wanted
to
point
out
on
this
extension
is
that
there
is
on
the
init.
There
is
some
code
in
here
to
handle
some
issues
that
are
in
in
SharePoint
framework
about
page
loads
across
site
collections,
now
I
sort
of
understand
this
was
supposed
to
be
fixed,
but
I
am
currently
not
seeing
it
be
fixed.
A
So
let
me
just
minimize
this
again
and
show
I've
got
this
second
multilingual
site
and
you
can
see
that
it
loaded
here
and
let
me
just
refresh
the
page,
really
quick,
and
so
it's
loaded
here,
but
if
I
make
navigate
to
my
original
multilingual
home
page.
You
notice
we're
getting
twos
in
here
and
what
we
were
finding
is
that
the
extension
would
load
between
two
and
four
times
on
the
bottom
of
the
page.