mongodb Archives - Bool Tech

Have you noticed that you can right-click a web application project in Visual Studio and convert it to a provider hosted app? Well why not? Basically your own website and a SharePoint manifest is all what you need for a provider hosted app.

This discovery today made me think about all legacy web apps out there that can be converted to SharePoint apps. Traditionally we had to add plain links to external applications or embed them into an IFrame by hardcoding it in an .aspx page or a Page Viewer WebPart.

A web application that should be converted to a SharePoint app can be any web app, not only asp.net web site.

For a year ago, I had a little nodejs project to try out mongodb and knockout.js: Anvaska which I published as a heroku app:

Now I want to try to convert this to a SharePoint app. I am satisfied when:

A full page app is rendering Anvaska
The SharePoint app renders the chrome control (suiteBar) if the app runs within a SharePoint context

1. A full page app

To create a link to Anvaska is simple. I only have to add the link in the manifest file:

Anvaska

http://anvaska.herokuapp.com/?{StandardTokens}

Anvaska

http://anvaska.herokuapp.com/?{StandardTokens}

But when I click on the app, there is a problem:

A “POST” to this site? Why? The reason is the application page called appredirect which makes a “POST” call:

/_layouts/15/appredirect.aspx?instance_id={F9049494-42D0-4077-9F34-88A35B7271B9}

In the hive you can see why. The redirect page uses a form and POST method:

&lt;form id=&quot;frmRedirect&quot; action=&quot;&lt;%= SPHttpUtility.HtmlEncode(SPHttpUtility.UrlPathEncode(RedirectLaunchUrl, false)) %&gt;&quot; method=&quot;post&quot;&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPAppToken&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(AppToken) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteUrl&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(Web.Url) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteTitle&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(Web.Title) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteLogoUrl&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(Web.SiteLogoUrl) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteLanguage&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(Web.UICulture.Name) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteCulture&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(System.Threading.Thread.CurrentThread.CurrentUICulture.Name) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPRedirectMessage&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(RedirectMessage) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPErrorCorrelationId&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(ErrorCorrelationId) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPErrorInfo&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(ErrorInfo) %&gt;&quot; /&gt;
&lt;/form&gt;

<form id="frmRedirect" action="<%= SPHttpUtility.HtmlEncode(SPHttpUtility.UrlPathEncode(RedirectLaunchUrl, false)) %>" method="post">

</form>

Just of curiosity, I tried to change method=”post” to method=”get” and the app worked. Of course you never should change any SharePoint built-in controls or pages. So there must be another solution. The asp.net web sites are okay with the external POST calls, but pages like wordpress, *.herokuapp.com don’t allow external POST redirects.

The anvaska application uses nodejs, expressjs. To solve this issue in this particular application I can do a redirect in express js:

; title: ; notranslate ]
var express = require(&quot;express&quot;);
var app = express();
app.post('/', function(req, res){
    res.redirect(req.url);
});
app.listen(process.env.PORT || &quot;8080&quot;);

; title: ; notranslate ]

var express = require("express");

var app = express();

app.post('/', function(req, res){

res.redirect(req.url);

});

app.listen(process.env.PORT || "8080");

SharePoint Matryoshka

To overcome this issue with the POST verb, a nested iframe can be used. Recently, I wrote a post about “Provider Hosted First Approach” where I presented the original idea of Thomas Deutsch. The implementation is an SPAppIframe which covers the whole html body. In an app part it would cause a nested iframe. But it would work.

&lt;WebPartPages:AllowFraming ID=&quot;AllowFraming&quot; runat=&quot;server&quot; /&gt;

&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;JSDEV - App Part&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            html, body {
                overflow:hidden;
            }
        
            body {
                margin:0px;
                padding:0px;
            }
         
            iframe {
                border:0px;
                height:100%;
                width:100%;
            }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;SharePoint:SPAppIFrame ID=&quot;SPAppIFrame1&quot; 
            runat=&quot;server&quot; 
            src=&quot;http://localhost:9000/#?SPHostUrl={HostUrl}&amp;amp;SPAppWebUrl={AppWebUrl}&amp;amp;SPLanguage={Language}&amp;amp;SPClientTag={ClientTag}&amp;amp;SPProductNumber={ProductNumber}&quot; 
            frameborder=&quot;0&quot;&gt;
        &lt;/SharePoint:SPAppIFrame&gt;
    &lt;/body&gt;
&lt;/html&gt;

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>

<head>

<title>JSDEV - App Part</title>

html, body {

overflow:hidden;

}

body {

margin:0px;

padding:0px;

}

iframe {

border:0px;

height:100%;

width:100%;

}

</style>

</head>

<body>

<SharePoint:SPAppIFrame ID="SPAppIFrame1"

runat="server"

src="http://localhost:9000/#?SPHostUrl={HostUrl}&amp;SPAppWebUrl={AppWebUrl}&amp;SPLanguage={Language}&amp;SPClientTag={ClientTag}&amp;SPProductNumber={ProductNumber}"

frameborder="0">

</SharePoint:SPAppIFrame>

</body>

</html>

2. SharePoint Chrome Control (suiteBar)

To add a SharePoint Chrome Control is easy. Just follow this MSDN article:

How to: Use the client chrome control in apps for SharePoint

Add a javascript file to your project: spapp-chrome.js and refer to it from your website page. That’s it. Here is the screenshot:

Summary

With a little effort, any legacy web application can be converted into a SharePoint app and be part of a bigger intranet, can be added by users in the sites where it is meaningful rather than just adding links to all existing external applications. These SharePoint apps could even interact with SharePoint and even have appwebs if it makes sense. What do you think? Let me know.

Kategoriarkiv: mongodb

Convert any web app to a SharePoint app

1. A full page app

SharePoint Matryoshka

2. SharePoint Chrome Control (suiteBar)

Summary