Pnpjs: Using PnP to query SharePoint Online from Office Addin (Word)

Created on 4 Jun 2018 · 11Comments · Source: pnp/pnpjs

Version

[ 1.1.0 ]

Expected / Desired Behavior / Question

My goal is to render a Word Document with HTML content got from SharePoint Online HTML (rich text fields)... as office for web apps is not supporting Altchuncks the only way I manage to get the results I need is with a Word Addin, so I would like to query SharePoint Online from Word addin, I have proper word addin code and proper PnP querying code to SharePoint Online (as tested from a CommandSet in SharePoint Framework), but I can't make it work from Word Addin as its always complaining about Crossdomain request.
I have tried to configure the SPRequestExecutorClient() as it should be done from SharePoint Addin but nothing seems to work.

¨Error: SP.RequestExecutor is undefined. Load the SP.RequestExecutor.js library (/_layouts/15/SP.RequestExecutor.js) before loading the PnP JS Core library.¨

I'd need some example, help, or someone pointing out the right approach. Thanks

Observed Behavior

Can debug but always get either the crossdomain 403 error or the preflight: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include' if querying with REST

`
import {sp, SPRequestExecutorClient} from "@pnp/sp-addinhelpers";

// at document ready
sp.setup({
sp: {
fetchClientFactory: () => {
return new SPRequestExecutorClient();
}
}
});
console.log('endInit');

//inside the action I want
sp.crossDomainWeb("https://localhost:3000", "https://mytenant2018.sharepoint.com/").getList("Lists/tests").items.select(...notesFieldNames).filter(_filter).top(500).orderBy("ID", false).get()//.get>()
.then((notes: any) => {
console.log("Entering here 1");
OfficeHelpers.Dialog.call('done!');
_text2BeInserted="";
notes.forEach((note: any) => {
let _newNote : NotesContent = new NotesContent();
_newNote.Order = note.ID.toString();
_newNote.Title = note.Title !== undefined && note.Title !== null ? note.Title : "No Title Found";
_newNote.Content = note.Body !== undefined && note.Body !== null ? note.Body : "No Body for the Note";

                _contentForFile.push(_newNote);
                console.log('concatenating 1');
                _text2BeInserted += _newNote.Title;
                _text2BeInserted += _newNote.Content;
                //_contentForFile += item.ReportBody !== undefined && item.ReportBody !== null ? item.ReportBody : "";
              });
        })
        .catch((error: any): void => {
          // this.safeLog(error);
          console.log('it failed');
          console.log(error);
        });`

Steps to Reproduce

Installed the PNP and PNPhelpers but not working.

code answered question

Source

pabmardo

All 11 comments

This isn't something I've tried before, so don't have an example ready to provide. I'll try and get some time to try it out, but can't promise a quick response as I just got back from being OOF for a week and am catching up. Is your add-in hosted in nodejs or are you trying to serve a client page? Since you are really making the request from your hosted add-in page it will get blocked by CORS. And the cross domain stuff is meant (as far as I know) to work with SP add-ins and there isn't special support for office add-ins. But I haven't tried so maybe there is a way.

Can you do the request as app only permissions on the server side - is that an option for you?

patrick-rodgers on 4 Jun 2018

hi, i worked on something similar --but with outlook , not word
https://yetanothersharepointblog.wordpress.com/2018/04/13/creating-and-outlook-add-in-using-an-spfx-webpart/

Sent from my iPad

On Jun 4, 2018, at 1:59 PM, Patrick Rodgers notifications@github.com wrote:

This isn't something I've tried before, so don't have an example ready to provide. I'll try and get some time to try it out, but can't promise a quick response as I just got back from being OOF for a week and am catching up. Is your add-in hosted in nodejs or are you trying to serve a client page? Since you are really making the request from your hosted add-in page it will get blocked by CORS. And the cross domain stuff is meant (as far as I know) to work with SP add-ins and there isn't special support for office add-ins. But I haven't tried so maybe there is a way.

Can you do the request as app only permissions on the server side - is that an option for you?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

russgove on 5 Jun 2018

👍1

My Addin is client side, not hosted in node.js... I know that CORS could block it but you are supposed to have the pnp.sp.sprequestexecutor working for crossdomainrequests (that is not working either) and couldnt find any example using it with the API
import { sp, setup, SPRequestExecutorClient } from "sp-pnp-js"; sp.setup({ sp: { fetchClientFactory: () => { return new SPRequestExecutorClient(); } } });
it complains about initializing core before calling the sprequestexecutorClient...
I uploaded the addin to the same tenant in SharePoint online and its working by using REST API, but it would be reusable if using the crossdomainweb...
I think that for example in my case its the only way of inserting HTML in a Docx document without using the AltChunks, that is not supported In OWA... The other option is Doctemplater but you need to pay for that module.

I will read russgove comment for outlook and provide feedback.
Regards

pabmardo on 5 Jun 2018

The cross domain request client is specific to SharePoint hosted add-ins so you can call from the SP add-in web (which has the prefixed domain) into the host web. It does not (and cannot) provide a generic way around any CORS situation. You could provide a service say in Azure that your add-in calls which then issues the calls on the office add-in's behalf. That service could be registered to run as app only permissions and allow you to make simple rest calls from the add-in to that app, which then calls SP and returns the data.

patrick-rodgers on 5 Jun 2018

I have already read about the @russgove example and am anxious to test something similar the moment i can, because still don't see how you can query from test1.outlook.com to test1.sharepoint.com without the CORS interaction... And may my problem is just the concept as from his example I just see that Outlooks opens the iframe to the sharepoint hosted addin, querying the same sharepoint host, later just returning the context to outlook but not really interacting between outlook - sharepoint. Thats why he just uses PnP to get dropdown data as currentsite.lists.get .......

Thank you all for your help...

pabmardo on 5 Jun 2018

Hi, I think there was something I needed to set up in the outlook manifest
to enable CORs. I need to expand that sample when I get some time.

On Tue, Jun 5, 2018 at 9:29 AM, pabmardo notifications@github.com wrote:

I have already read about the @russgove https://github.com/russgove
example and am anxious to test something similar the moment i can, because
still don't see how you can query from test1.outlook.com to
test1.sharepoint.com without the CORS interaction... And may my problem
is just the concept as from his example I just see that Outlooks opens the
iframe to the sharepoint hosted addin, querying the same sharepoint host,
later just returning the context to outlook but not really interacting
between outlook - sharepoint. Thats why he just uses PnP to get dropdown
data as currentsite.lists.get .......

Thank you all for your help...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/pnp/pnpjs/issues/120#issuecomment-394709264, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ACTRnPdfKv7L0V1uCT9ngVSNUky3qczmks5t5ofTgaJpZM4UYiFX
.

russgove on 5 Jun 2018

Hi , in the manifest you need to put:

In the oniit method it uses this code to get the current mail item
window["Office"].context.mailbox.item.body.getAsync(
"html",
{ asyncContext: "This is passed to the callback" },
(result) => {
debugger;
this.body = result.value;
resolve(window["Office"]);// or undefined
}

);

later on it uses pnp to talk to sharepoint.

you've got a context to both sharepoint and outlook and can share data
between the two.

On Tue, Jun 5, 2018 at 1:43 PM, russell gove russellgove@gmail.com wrote:

Hi, I think there was something I needed to set up in the outlook manifest
to enable CORs. I need to expand that sample when I get some time.

On Tue, Jun 5, 2018 at 9:29 AM, pabmardo notifications@github.com wrote:

I have already read about the @russgove https://github.com/russgove
example and am anxious to test something similar the moment i can, because
still don't see how you can query from test1.outlook.com to
test1.sharepoint.com without the CORS interaction... And may my problem
is just the concept as from his example I just see that Outlooks opens the
iframe to the sharepoint hosted addin, querying the same sharepoint host,
later just returning the context to outlook but not really interacting
between outlook - sharepoint. Thats why he just uses PnP to get dropdown
data as currentsite.lists.get .......

Thank you all for your help...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/pnp/pnpjs/issues/120#issuecomment-394709264, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ACTRnPdfKv7L0V1uCT9ngVSNUky3qczmks5t5ofTgaJpZM4UYiFX
.

russgove on 5 Jun 2018

Going to close this as answered. If that is not the case and you need to continue the discussion, please _reopen_ the issue. Thanks!

patrick-rodgers on 20 Jun 2018

Hi , in the manifest you need to put: login.windows.net login.microsoftonline.com YOURTENANT.sharepoint.com outlook.office.com outlook.office365.com In the oniit method it uses this code to get the current mail item window["Office"].context.mailbox.item.body.getAsync( "html", { asyncContext: "This is passed to the callback" }, (result) => { debugger; this.body = result.value; resolve(window["Office"]);// or undefined } ); later on it uses pnp to talk to sharepoint. you've got a context to both sharepoint and outlook and can share data between the two.
…
On Tue, Jun 5, 2018 at 1:43 PM, russell gove @.> wrote: Hi, I think there was something I needed to set up in the outlook manifest to enable CORs. I need to expand that sample when I get some time. On Tue, Jun 5, 2018 at 9:29 AM, pabmardo *@.*> wrote: > I have already read about the @russgove https://github.com/russgove > example and am anxious to test something similar the moment i can, because > still don't see how you can query from test1.outlook.com to > test1.sharepoint.com without the CORS interaction... And may my problem > is just the concept as from his example I just see that Outlooks opens the > iframe to the sharepoint hosted addin, querying the same sharepoint host, > later just returning the context to outlook but not really interacting > between outlook - sharepoint. Thats why he just uses PnP to get dropdown > data as currentsite.lists.get ....... > > Thank you all for your help... > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#120 (comment)>, or mute > the thread > https://github.com/notifications/unsubscribe-auth/ACTRnPdfKv7L0V1uCT9ngVSNUky3qczmks5t5ofTgaJpZM4UYiFX > . >

I think there is no straight forward solution for modern sites as they don't render inside iframes.

praveenbattula on 31 May 2019

Hey, did you get that sample manifest I uploaded? Let me know if i can
assist you. I haven't looked at that in a while, but can probably get it
running again.

On Fri, May 31, 2019 at 3:08 PM Praveen Battula notifications@github.com
wrote:

Hi , in the manifest you need to put: login.windows.net
login.microsoftonline.com YOURTENANT.sharepoint.com outlook.office.com
outlook.office365.com In the oniit method it uses this code to get the
current mail item window["Office"].context.mailbox.item.body.getAsync(
"html", { asyncContext: "This is passed to the callback" }, (result) => {
debugger; this.body = result.value; resolve(window["Office"]);// or
undefined } ); later on it uses pnp to talk to sharepoint. you've got a
context to both sharepoint and outlook and can share data between the two.
… <#m_8858982702905269437_>
On Tue, Jun 5, 2018 at 1:43 PM, russell gove @.> wrote: Hi, I think
there was something I needed to set up in the outlook manifest to enable
CORs. I need to expand that sample when I get some time. On Tue, Jun 5,
2018 at 9:29 AM, pabmardo @.> wrote: > I have already read about the
@russgove https://github.com/russgove https://github.com/russgove >
example and am anxious to test something similar the moment i can, because

still don't see how you can query from test1.outlook.com to >
test1.sharepoint.com without the CORS interaction... And may my problem >
is just the concept as from his example I just see that Outlooks opens the
iframe to the sharepoint hosted addin, querying the same sharepoint host,
later just returning the context to outlook but not really interacting >
between outlook - sharepoint. Thats why he just uses PnP to get dropdown >
data as currentsite.lists.get ....... > > Thank you all for your help... >
— > You are receiving this because you were mentioned. > Reply to this
email directly, view it on GitHub > <#120 (comment)
https://github.com/pnp/pnpjs/issues/120#issuecomment-394709264>, or
mute > the thread >
https://github.com/notifications/unsubscribe-auth/ACTRnPdfKv7L0V1uCT9ngVSNUky3qczmks5t5ofTgaJpZM4UYiFX
. >

I think there is no straight forward solution for modern sites as they
don't render inside iframes.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/pnp/pnpjs/issues/120?email_source=notifications&email_token=AASNDHD3LWZICAKCUMHWIQDPYFZUBA5CNFSM4FDCEFL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWWD5RI#issuecomment-497827525,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AASNDHDU4SRZ3OTJTO5FCVDPYFZUBANCNFSM4FDCEFLQ
.