►
From YouTube: Community demo – PnP: Contextual tabs sample
Description
In this 10-minute Developer-focused demo, David Chesnut shows viewers how to build a contextual tab in Microsoft Excel. In the task pane, import data from a database into the worksheet. When the focus is inside the table, the add-in displays the contextual tab. The presenter walks viewers very completely through the json that describes the tab as well as how to show or hide the tab programmatically. The sample is published to the PnP Office Add-ins repo. This PnP Community demo is taken from the Office Add-ins community call - February 2021, recorded on February 10, 2021.
Demo Presenter: David Chestnut (Microsoft) | @davidchesnut
Supporting documents:
• PnP sample - (Preview) Create custom contextual tabs on the ribbon | https://github.com/OfficeDev/PnP-OfficeAddins/tree/master/Samples/office-contextual-tabs
• Article: Configure your Office Add-in to use a shared JavaScript runtime | https://docs.microsoft.com/en-us/office/dev/add-ins/develop/configure-your-add-in-to-use-a-shared-runtime
Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/M365DevYouTube
• Blogs https://aka.ms/M365DevBlog
A
We'll
be
talking
about
the
contextual
tab
sample,
so
let
me
switch
over
to
I've
got
excel
running
here
and
we
put
together
a
contextual
tab
sample
for
folks
to
show
how
you
can
build
contextual
tabs
and
use
them.
So
I've
added
running
and
it's
got
a
task
pane
and
the
idea
is.
I
can
import
some
data
and
work
with
it
in
a
table.
So
let's
say
I
pick
a
sql
database
and
by
the
way,
all
this
data
is
just
mock
data.
A
It's
not
going
out
and
actually
connecting
to
anything
because
we're
trying
to
keep
the
sample
simple
and
just
focused
on
the
potential
tab
part.
So
I
import
my
data
and
it
goes
and
creates
this
table
from
the
sql
database
and
it's
just
a
bunch
of
products
and
orders
and
numbers
coming
in
and
the
interesting
part
is
now.
I
have
this
table
data,
contextual
tab
that
popped
up,
and
it's
only
there
when
I'm
in
the
table.
If
I
can
look
outside
of
the
table,
you'll
see
it
drops
off.
I
go
back
inside
the
table.
A
It
comes
back
all
with
excels
and
so
I'll
just
point
out
a
few
key
things
here,
because
we're
going
to
look
at
json
that
describes
this
in
a
second
and
so
basically
this
is
my
tab.
My
table
data.
I
have
a
menu
button
here.
That's
in
one
group,
the
group's
data
sources.
I
have
a
sync
data
group
and
also
a
task
pane
group.
So
it's
three
groups
the
show
task
pane
like
if
I
close
my
task
pane
over
here
and
then
the
user
wants
to
get
it
back.
That
does
an
action.
A
Oh
that's
a
debug!
You
can
ignore.
That
runs
a
little
task
to
reopen
that
task.
Page.
These
others
call
a
code,
that's
in
the
project
itself.
So
if
I
go
and
start
making
changes
on
the
table
like
maybe
I
just
decided
to
zero
those
out.
I
can
then
submit
those
and
update
the
mock
data,
pretending
that's
going
out
and
updating
sql
database.
A
I
can
also
switch
so
I
can
say,
hey:
let's
go
over
to
the
external
excel
file,
so
it's
going
to
reload
this
and
I
still
have
my
contents
here.
You
can
see
now
it's
set
to
the
external
excel
file.
The
idea
is
like
maybe
you're,
working
with
two
data
sources
that
are
super
similar
but
they're
in
two
locations,
so
you
can
switch
between
them
and
work
with
them
and
that's
the
contextual
tab.
A
So
let
me
switch
to
the
project
itself.
This
will
be
published
to
the
pmt
office
add-ins
repo
later
today.
So
it's
about
to
go
out
the
door
and
the
key
parts
are.
This
is
generated
by
yo
office
and
then
it
was
updated
to
use
the
shared
runtime
in
the
manifest
there's,
an
article
on
that
which
I
can
share
a
link
to,
and
then
this
is
the
part
that
says
the
contextual
tab
part.
A
So
you
need
to
create
your
json
that
describes
the
ribbon,
the
contextual
tab
and
there's
two
key
sections:
there's
an
actions
section
and
the
tab
section.
I
kind
of
like
to
start
down
here
thinking
about
this,
because
if
you
see
the
ui
and
you're
like
okay
well,
how
does?
How
does
my
json
describe
that
ui?
So
there's
one
tab
in
this
case,
everything
in
here
is
going
to
have
an
id.
So
that's
a
pretty
consistent
pattern.
A
Everything
in
here
is
going
to
have
a
label,
so
you'll
see
that
a
lot
as
well
as
like
visibility,
tags
and
so
on
and
remember.
We
have
three
groups,
so
this
tab
has
three
groups
in
it.
We
have
one
for
the
data
sources.
You'll
see
this
a
lot
too,
where
we
specify
the
icon.
You
have
like
three
different
sizes
for
the
icon.
It's
just
pointing
to
my
there's,
only
one
icon
that
gets
used
for
all
these,
because
we
don't
really
have
an
icon
library
for
our
samples.
A
Then
you
specify
the
controls
to
go
on
there
and
you
specify
what
type
so
in
this
case
remember
that
first
one
was
a
menu
with
a
drop
down
with
two
items
in
it.
So
I
have
my
menu
the
label,
the
tool
tip
on
my
menu.
I
didn't
have
items
so
I
have
my
first
menu
item
with
its
id.
It's
gonna,
be
it
says:
hey
I
can
go,
get
something
from
an
external
excel
file
and
here's
its
label
and
then,
with
each
of
these,
the
buttons
the
menus
you'll
see
they
have
an
action
to
run.
A
A
My
button
refresh
that's
here
on
this
other
group,
also
calls
runway
in
action,
but
you
see
it's
kind
of
the
same
pattern.
All
your
actions
are
specified
as
types.
I
only
have
two.
I've
got
my
run
ribbon
action
which
says
it's
going
to
go,
execute
a
function,
that's
type
and
the
function
name
is
also
run
ribbon,
action
which
I
might
change
that
name
before
publishing
this.
Just
because
I
don't
want
anyone
to
get
confused
this.
This
will
be
an
actual
function
in
the
javascript.
So
I
need
something
with
that
name,
my
javascript.
A
This
one
here
is
just
the
id
for
this
json.
So
all
the
elements
are
referring
to
this
id
and
this
id
says
hey
office.
When
someone
clicks
on
this
thing,
they'll
call
this
function
then
this
next
one
is
I'm
going
to
show
my
task
pane.
So
it's
type
is
a
show
task
pane
and
then
you
give
it
the
html
to
load
for
the
task
pane.
A
A
So
what
I'm
doing
is
because
I
get
past
this
event,
I'm
just
taking
a
look
at
the
source
id
that's
in
there
and
there
are
all
those
ids
that
were
in
that
json
and
I
just
put
like
a
little
three
letter
abbreviation
between
them,
so
I
can
kind
of
keep
track
when
I'm
looking
at
these,
what
they
are.
So
I
know
that's
my
submit
button.
This
is
my
refresh
button.
This
is
a
menu
item
for
each
of
these.
It
just
calls
out
to
the
actual
action
I
want
to
run,
which
is
another
function.
A
The
reason
I
did
it
this
way,
you
could
do
these
separately,
but
I
did
it
this
way
just
because
at
the
end,
you
always
have
to
remember
to
call
the
event.completed,
and
I
noticed,
as
I
was
adding
things
and
adding
more
functions.
Occasionally
I
forget
to
call
that,
and
you
get
a
very
strange
behavior
on
the
ribbon.
If
you
don't
call
event
dot
completed,
you
don't
get
any
errors,
it
just
buttons
stop
working
and
it
just
gets
weird.
A
So
this
way
I
knew
I
wouldn't
forget
to
call
that
also
sometimes
I
want
to
call
these
actions
from
somewhere
else
in
my
code,
like
maybe
from
the
task
pane,
so
I
don't
want
to
have
to
construct
an
event
object
or
deal
with
that.
I'm
calling
these
things
and
the
third
reason
I
did
it
this
way
is
just
because
if
I
refactor
rename
these,
I
don't
have
to
remember
to
go
back
into
the
json
immediate
there
as
well
or
end
up
with
office,
trying
to
call
something
doesn't
exist.
A
So
I
kind
of
like
this
pattern,
but
you
don't
have
to
do
it
this
way.
If
you
want
to
have
separate
functions,
you
can
then
each
of
these
they
just
kind
of
do
what
they
say.
So
if
someone
clicks
on
the
spit
button,
we
want
to
go
update
our
mock
data
source
with
table
data.
So
we
call
a
get
table.
Data
helper
function
pulls
the
data
out
of
the
table,
and
then
we
just
set
our
mock
data
equal
to
that,
let's
see
so
I'm
going
to
kind
of
skip
over
the
actions.
A
Here's
where
we
set
up
our
mock
data
and
then
we
have
global
and
on
the
global,
important
things
point
out
here,
we're
going
to
call
that
get
contextual,
ribbon.
Json,
remember
that
was
back
over
here
where
we
set
up
the
json,
and
I
don't
have
this
function
that
just
returns
it
so
go
back
over
to
command
we're
going
to
store
that
in
the
global
and
we
keep
track
of
it
because,
as
you
want
to
set
things
to
visible
or
invisible
or
enable
buttons
and
so
on,
you'll
need
to
track
that
state.
A
So
this
is
how
we
do
that
and
then
here
we're
going
to
take
that
red,
ribbon
action
button
and
put
it
on
the
global.
So
it's
in
global
name
space,
and
the
reason
for
that
is
because
this
name
will
get
minified
when
we
build
once
it's
minified
office
won't
be
able
to
find
it.
So
we
need
to
make
sure
it's
in
the
global
name
space.
A
So
how
do
we
create
it?
Let's
go
over
to
our
task,
pane,
html
and
when
that
loads,
I'm
sorry
testpage.js
when
that
loads,
our
office
on
ready
gets
called,
and
so
here
we're
gonna
call
it
we're
gonna
get
our
global
and
we're
going
to
pass
that
contextual
tab
json
that
entire
thing
to
this
office,
dot,
ribbon,
dot,
request,
create
controls,
and
you
only
get
to
do
this
once
so.
Whatever
you
need
to
have
on
your
contextual
tabs,
it
needs
to
all
be
in
there.
You
don't
get
to
add
or
subtract
to
this
thing
afterwards.
A
So
if
there's
things
on
there
but
you're
not
going
to
show
them
yet
just
make
sure
they're
in
there,
but
they're
invisible,
also
make
sure
you
weight
it.
I
made
the
mistake
of
not
doing
this
first
time
I
was
putting
this
together
and
one
of
my
events
was
firing
and
then
immediately
trying
to
update
this
ribbon
before
it
was
created
and
you'll
start
getting
errors
about
ids,
not
existing
and
stuff
like
that.
So
it's
just
a
safety
tip
make
sure
you
wait
for
it
to
be
done.
A
A
A
Let
me
go
down
to
that.
So
we'll
get
our
global
and
then
this
is
kind
of
an
interesting
part.
We
go
into
that
json
that
we
have
and
we
start
navigating
down
through
the
tabs,
the
groups,
the
controls
until
we
get
to
the
control
we
want,
which
in
this
case
we
know
the
first
one
is,
I
think,
the
refresh
and
then
the
next
second
one's
the
submit.
A
We
set
their
visibility
status
and
then
we
call
office.rt
the
net
request,
update
because
that's
how
you
do
that
and
it's
the
same
thing
if
you're
turning
your
contextual
tab
on
or
off.
So
if
the
table
gets
the
focus,
we'll
call
this
with
true
and
then
we'll
go
down
to
our
fan
settings
visibility
to
what
was
passed
in,
which,
let's
say
that's
true
and
we
call
our
request,
update,
pass
in
the
json
from
our
global
and
then
that'll
update
it
because
we've
said
visible.
True
it'll
now
get
displayed.
A
So
this
is
the
key
you
want
to
update.
It
call
request,
update
and
pass
through
json,
and
this
is
why
we
track
it
in
a
global,
so
I
think
that's
pretty
much
it.
This
will
get
published
later
today,
we'll
send
out
a
tweet
about
it
once
it's
available
and
then
you
know,
let
us
know
if
you
have
any
feedback
on
it.