Office.js Dialog Box Path Using React Router

Question

I am using the Office.context.ui.displayDialogAsync method in Office.js to create a popup that allows the user to login.

I used the yeoman generator to create a React template for the Add-in. I could not find an Auth0 example using Office.js and React, so I used this example which does not use react: https://github.com/OfficeDev/Office-Add-in-Auth0

To display the dialog box I pass the displayDialogAsync method a url that looks like: https://localhost:3000/src/taskpane/popup.html.

The react way I thought of would be creating a react compoennt for the popup and then using react router (Hash router not Browser Router How to configure Office-js excel react add-in to use react-router-dom or alternative solutions?) to make the component accessible at {taskpane endpoint}/popup like on a website.

The addin locally runs at https://localhost:3000/taskpane.html so I tried to pass the url https://localhost:3000/taskpane.html/#popup but the popup is not routed to my component like it would on a normal react website. Instead I get a 404 error.

My question is do I need to add some additional configuration for this to work, or is it just not possible in Office.js.

Hash router would require you to use the # character. Have you tried navigating to {taskpaneendpoint}/#popup ? You should also share what your <Router> looks like — Mavi Domates
– Mavi Domates, Commented Sep 15, 2020 at 2:32
Hi Mavi, yes I have tried that but it did not work. Let me update the post. — nsharma98
– nsharma98, Commented Sep 16, 2020 at 0:59

Rick Kirkham · Accepted Answer · 2020-09-15 19:46:01Z

1

Microsoft recommends that you not pass a route to the displayDialogAsync method. See this best practice: Best practices for using the Office Dialog API in an SPA.

answered Sep 15, 2020 at 19:46

Rick Kirkham

9,9172 gold badges16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Office.js Dialog Box Path Using React Router

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related