►
Description
In this 15-minute Developer-focused demo, David Chesnut shares tips for accessing data hosted on a website inside a Microsoft Teams channel for purposes of collaborating on the data. Teams detects the web-based data set on site, prompts viewer to open. If opened, then data (in memory using OOXML) is written to a spreadsheet and saved in OneDrive via Graph. Code sample available. The Script Lab add-in uses Graph APIs and ASP.NET. This PnP Community demo is taken from the Office Add-ins community call – August 2021, recorded on August 11, 2021.
Demo Presenter: David Chesnut (Microsoft) | @davidchesnut | Sr Dev Writer
Supporting documents:
• Sample code - https://github.com/OfficeDev/PnP-OfficeAddins/tree/main/Samples/excel-open-in-teams
• Graph Documentation - permissions - Overview of users in Microsoft Graph | https://docs.microsoft.com /graph/azuread-users-concept-overview
Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/M365DevYouTube
• Blogs https://aka.ms/M365DevBlog
A
A
And
once
I'm
signed
in
you'll
notice,
it
says
yo
now
knows
who
I
am
and
we
see
this
product
data
option
appears.
I
can
say,
hey,
let's
go
see
what
kind
of
product
data
we
have
and
there's
this
you
know
generic
list
of
sales
numbers
for
various
quarters
and
products,
and
so
the
idea
is
here
is
I
maybe
I'm
working
with
other
folks
on
this
data,
and
I
want
to
take
it
into
microsoft
teams
to
continue
working
with
it.
So
I
can
click
on
this
open
in
microsoft.
A
A
So
I'm
going
to
submit
that
information
and
then
it's
going
to
go,
look
up
the
channels
that
are
out
there,
so
I
can
say
which
channel
do
I
want
to
put
in.
Let's
say
I
want
to
do
the
planning
channel
and
I'm
going
to
submit
to
that
one:
it's
going
to
go
off
and
create
some
information
out
there.
So
I'm
not
going
to
open
this
in
the
app
because
I'm
already
using
it
for
this
call,
let's
use
the
web
app
and
it's
going
to
redirect
me
to
a
message
that
got
created
so
over
here.
A
You
can
see.
I've
ran
this
a
few
times,
but
you
can
see
like
it
created
this
product
data
spreadsheet.
That's
on
the
one
drive
for
this
teams,
so
it
says
here's
the
product
sales
data
for
the
discussion.
I
can
now
click
on
this
and
it
will
open
up-
and
you
know
in
this
context,
I
can
work.
You
can
see
it
inserted
all
the
data
here
that
we
were
just
looking
at,
and
I
can
now
work
on
this
with
other
folks
on
my
financial
team.
It
also
inserted
it
embedded
an
add-in
in
here.
A
So
if
you
look
like
it,
it's
just
the
script
lab
add-in
for
now.
Just
for
you
know,
demo
purposes,
but
you
could
you
know,
certainly
if
you
have
an
add-in
that
works
with
your
website
say
you
know,
you
probably
want
to
embed
that
in
here.
So
folks
can
still
continue
working
with
your
features
in
the
context
of
a
spreadsheet.
Inside
of
teams,
so
that's
the
scenario
and
then
I
just
wanted
to
show
the
code
for
how
this
works.
A
Let
me
bring
up
visual
studio
here,
stop
this
from
running.
So
this
is
just
an
asp.net
project.
Mvc
project,
that's
created
in
visual
studio,
2019,
the
main
parts
of
the
code.
I
guess
the
interesting
parts
here
are
this
products
controller
which
is
working
with
the
product
data,
and
then
these
helpers
as
a
graph
api,
helper
and
a
spreadsheet
builder,
and
what's
happening
if
we
just
kind
of
walk
through
the
code
here,
the
products
controller
is
creating
an
in-memory
database,
which
is
basically
just
that
product
data
that
we
can
work
with.
A
And
then,
when
the
user
clicks
on
that
button
to
open
in
teams,
it's
going
to
call
this
teams
list
action
and
the
controller,
and
what
it's
going
to
do
is
it's
going
to
set
a
scope?
So
the
first
thing
we
need
to
do
is
like
we
gotta
figure
out
what
teams
are
even
there
and
so
we're
going
to
set
our
scopes
to
team,
read
basic
all
and
then
we're
going
to
call
the
graph
api
and
everything
in
this
is
working
through
the
graph
api.
A
So
we're
going
to
say,
go
to
graph
and
look
at
the
joined
teams
that
are
out
there
and
then
it's
going
to
get
back
this
team
query
response
type.
This
is
I
create
these
classes
to
help
deserialize
the
json
that
comes
back
so
we
put
into
this
json
object
and
then
we're
going
to
construct
a
list
and
see,
oh
so
for
every
team
that
we
get
back,
we're
going
to
put
it
into
this
list
and
send
it
back
with
our
view.
A
And
then
the
review
is
going
to
make
that
drop
down
box
where
you
saw
all
the
teams
inside
the
box,
so
we
just
put
it
in
our
view:
bag
send
it
back
and
you're
just
going
to
select
and
then
once
the
user
picks
a
team
that
team
id
is
going
to
be
set.
I
actually
need
to
rename
this.
It's
not
team
list,
as
a
team
id
it's
going
to
call
this
channels
list
for
the
team,
so
it's
like.
A
Let's
go
get
the
channels
now,
so
we
set
our
scopes
to
channel,
read
basic
all
and
we're
going
to
go
construct
a
url
to
call
into
teams
adding
that
team
id
and
say:
let's
query
for
all
the
channels
call
the
graph
api
and
again
we
get
back
some
json
and
deserialize
it
into
this
object
and
once
again,
there'll
be
a
list
of
them.
So
we're
going
to
make
another
list
box,
so
we
go
and
construct.
A
You
know
put
all
of
our
items
in
there,
this
one's
a
little
different,
because
we
want
to
keep
that
team
id.
So
we
embed
it
in
the
list
that
we
send
back
and
return
that
in
a
view
bag,
and
then
the
user
gets
to
select
from
another
list
once
they
pick
the
channel
they're
going
to
call,
they
hit
submit
it's
going
to
call
upload
spreadsheet.
A
The
channel
list
comes
in
and
this
is
a
comma
delimited
list
of
parameters,
and
so
all
I'm
doing
here
is
just
splitting
that
out.
So
we
got
our
channel
id.
Our
team
id
and
the
channel
name,
so
it's
like
the
three
things
we
need
to
go
upload
and
then
here's
where
we
set
the
file
name.
So
if
you
want
to
choose
a
different
file
name,
you
can
change
that
here.
A
You
have
this
helper
class
called
spreadsheet
builder,
which
is
going
to
use
ooxml
to
construct
the
spreadsheet
in
memory
and
by
the
way,
that's
the
reason
I'm
using
asp.net
project,
because
ooxml
is
based
on.net,
so
it
just
makes
it
easier
to
work
here
instead
of
liking
node.js,
although
there
is,
I
believe,
a
node.js
version
of
oxml
out
there
somewhere
and,
I
would
say
like
if
somebody
ever
wanted
to
help
us
out
on
the
github
repo
and
create
a
version
of
this
that
runs
on
node.js.
That
would
be
very
cool.
A
Basically,
it's
going
to
construct
the
spreadsheet,
though,
and
give
us
back
a
byte
array
of
that
entire
spreadsheet
and
when
we
create
it
we're
going
to
create
a
sheet
inside
of
it.
That's
named
product
sales,
that's
what
this
name
is
and
then
we're
going
to
call
upload
the
spreadsheet
to
onedrive.
So
we
pass
it.
A
Our
team
id
channel
id
channel
name
the
file
name
like
all
this
information
is
what's
needed
to
go
upload
that
spreadsheet
and
once
it's
uploaded
we're
going
to
get
back
some
file
metadata
and
we'll
pass
that
along
to
go,
create
a
channel
message,
because
in
that
message
we
want
to
attach
that
file.
So
we
pass
it
here,
so
I'm
going
to
take
a
look
at
this
code
next,
so
it's
create
spreadsheet
upload
the
spreadsheet
create
the
channel.
A
So
when
we
create
it,
this
is
all
oh
xml.
Basically,
so
I'm
not
going
to
spend
a
lot
of
time
talking
throughout
how
the
open
xml
sdk
works,
but
I'll
provide
some
links
to
information
on
if
you
want,
but
basically
it's
just
creating
the
spreadsheet
in
a
memory
stream
that
was
kind
of
industry,
challenging
part
trying
to
figure
out
how
to
create
one
of
these
without
actually
creating
a
file
on
the
disk.
A
A
So
then,
I
have
there's
two
helper
methods
to
insert
the
header,
because
that's
text
fields,
and
then
we
insert
the
data
under
that
because
that's
all
the
numerical
values
so
and
then.
Finally,
we
embed
the
add-in
that
we
want.
So
if
you're
modifying
this,
you
want
to
take
a
look
at
this
embed
add-in
jump
down
there.
It
also
has
helper
methods.
The
important
part
I'm
just
going
to
point
out
here
is
when
we
put
in
the
extent
this
webpart
extension,
which
is
defining
our
add-in.
A
You
want
to
make
sure
you
specify
your
id,
so
this
is
hard
coded
a
script
lab
right
now,
but
this
is
where
you
change
it.
This
is
your
store
id
if
you're
in
the
store
or
app
source,
if
you're,
not
there's
instructions
to
read
me
on
how
you
can
make
this
a
shared
folder
instead,
if
you
want
to
do
that
and
then
here's
a
custom
modification
section.
A
So
if
you
want
to
pass
properties
to
your
add-ins
so
like
when
it's
opened
in
the
context
of
that
spreadsheet
and
the
data-
and
you
want
to
pass
something
to
it-
that
maybe
is
related.
This
is
how
you
can
insert
properties.
So
this
one
puts
in
a
gist
that's
for
script
lab,
but
you
can
change
this
to
whatever
property
you
need.
A
Let's
go
back
to
the
products
controller.
Next,
we
want
to
upload
the
spreadsheet
to
onedrive.
So
this
is
another
graph
call.
So
first
we
have
to
get
the
name
of
the
file
folder
to
use,
and
oh
I
closed
it.
But
if
you
go
look
at
one
drive,
the
team
will
have
a
one
drive
and
then,
at
the
root
level
that
one
drive
every
channel
has
a
folder,
so
you
have
to
figure
out
which
folder
it's
in
and
that's
what
this
query
is
going
to.
A
Do
we
say:
here's
our
team
id
here's,
your
channel
id,
get
me
the
files
folder
for
that
set
your
scopes.
This
is
like
the
same
pattern
over
and
over
so
you're,
just
as
a
team
read
basic
call
and
then
you're
going
to
wait
for
that,
the
graph
api
to
come
back
and
then
deserialize
the
response.
So
now
we
have
in
this
json
our
parent
reference
drive
id.
That's
the
part
we
need
to
upload
to
the
correct
location.
A
So
we
set
our
items,
root,
file,
name
and
so
on,
and
then
we
call
the
graph
api
with
a
body.
So
we're
going
to
pass
this
byte
array
and
then
this
method
is
going
to
put
that
into
the
body
of
the.
This
is
a
put
method
and
it's
going
to
send
that
over
to
graph
to
create
the
file
and
then
we'll
get
back
file
metadata
from
that
which
we
returned,
because
that
contains
an
e
tag
that
we're
going
to
need.
Later
later.
A
We
create
the
channel
message
so
for
this
we're
going
to
construct
our
url,
so
we're
going
to
go
to
teams,
team
id
channels,
channel
id
messages
to
create
a
new
message
and
then
we're
going
to
construct
this
body.
That's
in
the
message,
so
you
can
see
like
here's,
our
content
and
we
say:
hey
here's,
the
product
sales
data
and
then
we're
going
to
embed
an
attachment,
and
that's
going
to
be
that
link
to
that
spreadsheet.
A
So
for
that
we're
going
to
need
an
etag
and
this
web
url
and
so
up
here
are
the
parts
that
put
this
together
so
like
there's
a
good
that
we
have
to
get
out
from
the
e-tag.
That's
what
all
this
is
doing,
because
it's
just
getting
that
good.
This
could
probably
be
better
done
with
a
regex
if
you
really
wanted
to
and
by
the
way
I
encourage
folks,
if
you
see
better
ways
to
do
these
things.
Please
come
to
the
repo
and
submit
prs
to
make
improvements.
A
This
is
all
community
stuff,
and
then
we
reset
our
file
web
url,
so
that
because
there's
there's
a
part,
some
of
this
was
trial
and
error.
I
I
found
I
don't
know
it
wasn't
always
clearly
documented
because
the
docs
so
that
were
typically
reference
docs.
So
I
had
to
kind
of
play
to
get
these
things
correct
so
that
the
link
would
work.
A
Then
we
sent
we'll
use
a
channelmessage.sendscope
and
we
again
call
graph
api
with
a
body
and
this
one
will
be
a
post.
So,
oh
last
part,
so
this
graph
api
helper.
Let
me
go
in
here.
You
notice
all
those
there's
all
those
call
graph
api,
so
I
have
some
that
are
gets.
Some
are
puts
and
posts
so
because
this
is
all
I'm
not
using
the
graph
sdk,
I
decided
to
just
use
raw
urls,
so
basically
that's
what
this
entire
class
will
handle.
So
it
always
has
to
get
an
access
token.
A
So
there's
this
part
which
is
using
the
microsoft
identity
apis
and
then
it
it
calls
the
graph
api.
Let's
get
down
to
that
part
we
have
to,
you,
know,
create
a
request
put
in
our
bearer
token,
which
is
the
access
token
and
then
call
it
and
then
that
access
token
will
always
have
whatever
scopes
we
requested
so
try
to
keep
auth
code
stuff
separated
as
much
as
possible.
So
it's
just
in
here.
A
Let's
see
other
things
mentioned.
This
asp.net
project
originally
came
from
an
azure
project
because
I
didn't
want
to
spend
a
lot
of
time
working
because
it
already
had
all
like
all
the
auth
code,
and
you
know
if
I
run
this,
you
can
see
it
has
the
the
ui
which
loads
up
here
for
signing
you
in
which
I
kind
of
liked
taking
a
while.
There
we
go,
so
you
can
sign
up
with
microsoft,
so
kind
of
got
that
for
free
and
then
just
added
all
the
parts
to
make
this
open
up
in
teams.
A
A
A
A
Oh
okay,
all
right
thanks
gary,
that's
good
to
know,
there's
a
just
a
follow-up
question
to
the
pmp
sample
like
is
this
currently
available?
Yes,
thank
you
for
reminding
me.
I
forgot
to
share
that.
Let
me
go
get
that
link
there's
a
pr!
Actually,
let
me
just
put
the
pr
in
here
first
and
from
that
pr
you
can
find
the
branch
it's
in
and
so
on
pr,
and
then,
if
you
want
to
just
go
straight
to
the
readme,
so
you
can
kind
of
read
through
it.
A
Let's
see,
let
me
grab
that
so
yeah
thanks
for
asking
about
that.
It
would
be
really
great
if
folks
go
check
it
out
and
give
us
feedback.
Let
us
know
if
it's
working
or
if
you
have
ideas
for
improvements.
That
would
be
great.
Another
thing
I
was
going
to
mention
is
that
you
know
like
asp.net,
mvc,
isn't
one
of
my
strong
areas
so
like
if
there's
a
better
way
to
do
the
ui
for
like
querying
teams
and
channels,
you
know
be
great
to
see
if
someone
has
suggestions
around
that.