►
Description
In this 8-minute Developer-focused demo, David Chesnut delivers a bare bones add-ins sample, actually 4 samples – Word, PowerPoint, Outlook and Excel, to help developers see clearly the fundamental composition of an Office Add-in. Each Hello World sample has a manifest and an HTML file. These samples may be run from the Repo or from local host. The presenter methodically steps through the code pointing out slight differences in methods used for each app to deliver the “iconic “Hello World” greeting. This PnP Community demo is taken from the Office Add-ins community call – October 2021, recorded on October 13, 2021.
Demo Presenter: David Chesnut (Microsoft) | @davidchesnut
Supporting documents:
• Repo – Hello world samples | https://github.com/OfficeDev/PnP-OfficeAddins/pull/213
• Article - Office Add-ins platform overview | https://docs.microsoft.com/office/dev/add-ins/overview/office-add-ins
Stay connected:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos
A
What
I
was
going
to
do
is
show
this
hello
world
sample,
which
is
currently
in
a
pr.
So
this
is
the
pull
request
and
I'll
put
a
link
to
there's
a
link
to
this
in
the
in
the
slide
deck,
and
so
I
wanted
to
show
what
I've
been
building
and
just
kind
of
give
some
background
about
where
this
came
from
and
I'd
be
kind
of
curious
to
get
some
feedback
around
this.
A
So
we've
had
this
article
on
which
is
basically
just
the
overview
of
the
office
add-ins
platform
and
one
of
the
things
that
says
it
talks
about
how
an
office
add-in
is
basically
a
manifest
which
you
can
see
in
this
image
here
on
the
left
side,
it's
like
hey,
it's
just
a
manifest,
and
it's
a
web
page
and
those
two
things
together
make
it
happen.
A
few
months
ago,
martin
van
stom
was
doing
a
twitch
live
stream
and
doing
some
exploration
of
our
getting
started.
A
Docs
and
one
thing
he
noticed
or
kind
of
noted
about
it-
is
that
we
don't
really
have
the
canonical
hello
world,
which
is
implied
here.
You
know
in
a
picture,
but
we
don't
really
have
a
code
sample
that
does
that
our
quick
starts
will
take
you
through
like
using
yo
office,
and
I
do
remember
the
first
time
I
ever
used
your
office.
It
threw
me
off
a
little
bit
just
because
you
get
a
lot
of
files.
A
You
know,
there's
a
webpack
build,
there's
your
package.json
and
also
other
stuff,
and
the
first
thing
I
had
to
do
is
kind
of
figure
out
what
what
parts
of
your
office
add
in
and
what
parts
or
just
web
server
pieces,
and
it
takes
a
little
bit
of
exploration.
So
I
thought
I
wonder
if
I
could
create
the
world's
simplest
office
ad
added.
A
Would
that
be
helpful
to
them,
as
maybe
alongside
your
office
builds
or
in
addition
to,
and
so
what
I
have?
Let
me
just
kind
of
show
the
code
here,
real
quick
just
on
the
left
side
here.
So
this
is
basically
the
project
and
it
has
four
different
samples,
so
there's
one
for
each
office
application,
so
there's
one
for
excel
and
outlook
and
powerpoint
and
word,
and
then
each
of
these
is
a
manifest
in
an
html
file
and
there's
actually
two
manifests.
A
This
is
sort
of
one
of
my
questions.
The
the
first
manifest
actually
will
just
run
straight
from
github,
because
these
are
all
hosted
on
github
pages.
So
you
can
see.
This
link
is
pointing
to
my
fork
right
now,
so
it
goes
to
my
david
chestnut
account
to
the
office
add-ins,
repo
samples,
hello,
world
and
so
on
and
these
all
load.
A
If
I
go,
let
me
switch
over
to
my
developer,
tenant
here
and
like
if
I
go
into
word.
I've
actually
already
loaded
this
up
from
that
manifest
and
when
I
open
the
hello
world
application
you
can
see
it
has.
Let
me
just
drop
this
down.
You
can
see
it
has
an
image,
so
I
did
discover
I
don't
know.
Maybe
you
could
do
this
without
an
image,
but
I
don't
think
it
makes
sense.
I
think
to
be
complete.
You
really
need
some
kind
of
image
there.
A
You
know
each
of
these
saying
go
into
powerpoint
and
also
say
hello
and
it
inserts
it
so
that
manifest.xml,
that's
the
one
that's
pointing
to
github.
So
these
will
all
work
and
you
don't
have
to
set
up
a
web
server,
which
is
nice
now
if
you
do
want
to
set
up
a
web
server,
and
you
might
want
to
do
that.
A
If
maybe
you
want
to
change
the
code.
Maybe
I
want
this
to
say
instead
of
hello
world,
maybe
just
say:
hey
everybody
yeah,
but
if
I
want
to
run
this
and
actually
see
that
change,
I'm
gonna
have
to
have
my
own
web
server.
Now,
because
I
can't
upload
that
to
github-
and
at
least
not
this
repo,
you
could
upload
your
own
repo,
but
not
not
the
office
dev
one.
So
that's
what
this
localhost
one
is
for,
and
it
just
runs
off.
A
Locos
3000.,
and
in
that
case
in
the
readme
there's
a
section
that
walks
you
through
how
to
set
up
this
http
server.
You
then
have
to
install
the
dev
certificates
and
then
you
can
run
it
by
loading,
those
dev
certificates-
and
this
is
one
of
those
questions
where
I'm
like.
Is
this
too
complex,
like
maybe
I
shouldn't
have
this
in
here,
so
I'm
still
kind
of
thinking
through
if
this
makes
sense
for
someone
who's
totally
new
to
give
them
this
option
of
setting
up
your
own
server.
A
A
Its
purpose
is
to
describe
my
add-in
to
office,
so
it
has
a
unique
identifier,
some
version
info.
What's
the
name
of
the
provider,
you
know,
probably
your
company
name,
you
can
give
it
a
display
name
and
a
description.
These
are
things
that
will
display
when
it
first
loads
into
the
document
and
so
on,
and
so
this
is
pretty
much
as
small
as
I
can
make
it
I'm
going
to
make
another
pass
through
this.
A
There
might
be
a
few
more
things
I
could
get
out
of
this,
because
my
goal
is
to
try
to
have
as
few
as
lines
of
code
as
possible
to
see
how
simple
this
can
be,
and
then
the
task
pane
is
a
combination
of
html
and
script.
So
the
fundamental
pieces
here
for
a
beginner
are
you've
got
to
load
the
officejs
library.
That's
what
this
script
tag
is
doing
here
and
I
have
the
body
which
is
just
the
hello
button,
and
then
you
have
to
call
office.onready
so
that
you
know
that
the
library
is
loaded
here.
A
We
just
do
a
check
to
make
sure
we're
in
the
correct
host,
because
this
is
designed
for
excel.
So
we
want
to
make
sure
we're
not
in
word
or
powerpoint
or
something
else
somehow,
and
then
we
wire
up
the
on
click
event
of
that
button
to
the
say,
hello,
function
and
then
down
in
the
say,
hello
function,
we're
calling
the
excel
api
run
and
we're
going
to
basically
get
the
active
worksheet
get
the
a1
range
set
the
value
to
well
hello
world.
A
Basically,
I
already
changed
this
and
then
we'd
want
to
call
contact
sync
to
actually
dispatch
that
command
to
office,
so
it
runs,
and
then
we
return
and
that's
it
that
this
is
like.
As
far
as
I
know,
the
most
fundamental
office
add-in
you
can
make-
and
it's
different
you
know
like
if
I
go
look
at
the
outlook,
one
which
also
has
oh
by
the
way
this
assets.
Folder
is
your
icon
that
you
need
to
have
like
the
task.
A
A
Obviously
you
know
each
host
is
a
different
type
of
thing
that
you
talk
to.
You
know
because
spreadsheets
are
cells
and
powerpoint
is
slides,
so
there's.
This
is
why
I
had
to
create
a
different
x.
You
know
different
sample
for
each
host,
so
yeah,
let
me
know
in
the
web,
chat
what
you
think
or
go
to
the
poll
the
pull
request
here.
If
you
want
to
comment
on
it,
I'm
going
to
be
making
some
more
updates
and
probably
get
this
published
near
the
end
of
the
week.
Perhaps.