Word Add-in Implementation Approach

Hi Everyone,

**Overview:**We have WOPI implemented in our application where we are using officeActionUrl(with &sftc=1) passed in a form tag. Word document is displayed. User will be able to see it's content and they can change the content , new changes will be saved in that file. Handshake is initiated using postMessage handler between WOPI client and host.In that actionUrl- CheckFileInfo is passed. That file contains routes for get and post("wopi/files/{id}","wopi/files/{id}/contents")). Input tags with access_token and access_token_ttl is passed in jsx file.

Code Reference:

Form containing form fields:
<formid={office_form_${id}}name={office_form_${id}}target={office_frame_${id}}action={officeActionUrl + "?sftc=1"}method="post"><input name="access_token" value={(accessToken)} type="hidden" /><input name="access_token_ttl" value={accessTokenTtl} type="hidden" /></form>

Post Message for handling handshake between WOPI client and host:

window.addEventListener("message", handlePostMessage, false);function handlePostMessage(e) {if (e.data) {var msgId = e.data.MessageId;if (msgId === "App_IsFrameTrusted") {console.log(msgId, " matched post message Id");var msg = {MessageId: "Host_IsFrameTrusted",SendTime: Date.now(),Values: {isTopFrameTrusted: true,},};e.source.postMessage(msg, e.origin);}} }

Reference Documentation :
https://learn.microsoft.com/en-us/microsoft-365/cloud-storage-partner-program/online/scenarios/customization#postmessageorigin
https://learn.microsoft.com/en-us/microsoft-365/cloud-storage-partner-program/rest/files/checkfileinfo https://learn.microsoft.com/en-us/microsoft-365/cloud-storage-partner-program/rest/endpoints

**New Requirement:**We have a new requirement that when this page opens with word document, side panel should be opened containing the metadata of the documents like date created, date modified, name and code of a document etc.
So we need to create a word add-in which can sideload when this page is loaded and display all the relevant information. We are at the initial stage of understanding about how add-in development works so we have some queries on the same.
https://answers-afd.microsoft.com/static/images/image-not-found.jpg
1. How word add-in can be created in existing project:
We have a repository, if I want to create a word add-in , I can do this using yeomen generator and opting for Create Word Add-in Project using React Framework, basic structure of React project has been created -

Is this the right approach to create a word add-in or do I need to follow something else here?

2. How to connect to external api's?
As far as my understanding goes word add-in needs to be deployed in appsource which will be at different domain and if I want to call api of different domain(host domain in this scenario), can we do that. Can we call other REST endpoints except defined in this https://learn.microsoft.com/en-us/microsoft-365/cloud-storage-partner-program/rest/endpoints.
I will be having requirement like replacing the existing document with some other document which user choosed from file folder, delete the document or maybe change the name of document(update api needs to be called).

If yes, then how can I authorize it, I am passing accesstoken and accesstokenttl to the form but How can I access that in my word add-in.

3. Can we re-use existing component in a word add-in ?
We have some components in our application which we can re-use in word add-in but those components are not added in a npm package they are in the parent repository where we are creating this add-in.
Is there a way that those components can be re-used or do we need to design the UI from scratch.
For the UI design is it mandatory to use fluent-ui or can we go with material-ui as well?

4. Local Testing Issue
Currently , I am trying to test some existing word add-in , about how that will look using these instructions .
Reference - https://learn.microsoft.com/en-us/microsoft-365/cloud-storage-partner-program/online/add-ins#security-requirements-to-host-add-ins.
**4a.**I am using https://appsource.microsoft.com/en-us/product/office/WA104380121?tab=Overview

to load.(I tried another add-in as well which is hosted within our organization) When I tried to load this two , it is giving issue like Add-in is not supported by microsoft.

4b. I tried to side-load locally created manifest file using yeomen generator in my word page which I have hosted using WopiFrame.jsx, For that as well when I am trying to open sidepanel , I am getting issue as Add-in has been blocked to protect your data. Please contact microsoft support.In network tab - I can see AddInServiceHandler is failed -
https://word-edit.officeapps.live.com/we/AddinServiceHandler.ashx?action=getAddIns

Do I need to provide any additional routes in my CheckFileinfo so that my WOPIFrame page allows add-in to be sideloaded?

5. How this can be deployed to AppSource?
Our requirement is that this add-in will load only in the single page if user is having access to that page, so what kind of deployment will be best suited in this scenario?

6. How can I configure URL for different hosts?
As we have different enviornment, one for testing, one for staging, one for production, if word add-in will be able to call api's of host domain then how can I configure this env. settings in word add-in. Also how that will be deployed to microsoft store as well?,

We are going through documentation to explore more on this. It will be very helpful if someone can assist me on the queries.
Is there a dedicated platform where we can ask this add-in development related queries?

Thanks & Regards,
Vidhi Rathi