Search code examples
office365office365-appsofficedev

Can anyone help me in developing Office 365 addin for outlook(web app & desktop) Read app with SPA

I would like to develop a office 365 mail add-in (Read app) for outlook web & other clients, I have give a quick start with sample provided at napacloudapp.com, which works fine as expected.

But I would like host a already developed SPA with minor changes, which I did and hosted by configuring metadata file.

As I know all available SPA templates using some routing plugin, which is responsible to change the route & app will load view based on route available in url(followed by '#' character by default in url)

But when i clicked on a navigation link to change the hash location & to load new content based on changed route, it is not working because requested route were formed incorrectly, because in outlook web app, our app is loading under iframe & iframe src contains # in url, which causes the wrong url formation. Iframe rendered in outlook web app is as follows 

<iframe id="ocii1" width="100%" height="100%" frameborder="0" title="App for Office" sandbox="allow-scripts allow-forms allow-same-origin ms-allow-popups allow-popups" name="_xdm_0__ocii141675079_65831848_1436538340692" src="https://localhost:44301/Index.html?et=&amp;_host_Info=Outlook|Web|16.00#&amp;_xdm_Info=52741ef1_5cb5874_1436538340692|ocii1|https://outlook.office365.com/owa/?realm=mycompany.com#path=/mail"></iframe>

Can anyone help me in this?

enter image description here

Solution

  • Finally found a workaround for this, create a intermediate page & configure this as startup page in metadata & than navigate to target location. Added following code to intermediate page. 

    Office.initialize = function (reason) {
    $(document).ready(function () {
        location.href = "https://localhost/mailApp";
    });
};

    It will resolve the extra '#' problem in src of mail app iframe, by replacing complete src with "https://localhost/mailApp".