Convert any web app to a SharePoint app

Anatoly Mironov

convert-app-001 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. convert-app-002 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:

  1. A full page app is rendering Anvaska
  2. 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}

convert-app-003 But when I click on the app, there is a problem: convert-app-004 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: convert-app-005

<form
  id="frmRedirect"
  action="<%= SPHttpUtility.HtmlEncode(SPHttpUtility.UrlPathEncode(RedirectLaunchUrl, false)) %>"
  method="post">
  <input
    type="hidden"
    name="SPAppToken"
    value="<%= SPHttpUtility.HtmlEncode(AppToken) %>" />
  <input
    type="hidden"
    name="SPSiteUrl"
    value="<%= SPHttpUtility.HtmlEncode(Web.Url) %>" />
  <input
    type="hidden"
    name="SPSiteTitle"
    value="<%= SPHttpUtility.HtmlEncode(Web.Title) %>" />
  <input
    type="hidden"
    name="SPSiteLogoUrl"
    value="<%= SPHttpUtility.HtmlEncode(Web.SiteLogoUrl) %>" />
  <input
    type="hidden"
    name="SPSiteLanguage"
    value="<%= SPHttpUtility.HtmlEncode(Web.UICulture.Name) %>" />
  <input
    type="hidden"
    name="SPSiteCulture"
    value="<%= SPHttpUtility.HtmlEncode(System.Threading.Thread.CurrentThread.CurrentUICulture.Name) %>" />
  <input
    type="hidden"
    name="SPRedirectMessage"
    value="<%= SPHttpUtility.HtmlEncode(RedirectMessage) %>" />
  <input
    type="hidden"
    name="SPErrorCorrelationId"
    value="<%= SPHttpUtility.HtmlEncode(ErrorCorrelationId) %>" />
  <input
    type="hidden"
    name="SPErrorInfo"
    value="<%= SPHttpUtility.HtmlEncode(ErrorInfo) %>" />
</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:

var express = require("express");
var app = express();
app.post('/', function (req, res) {
  res.redirect(req.url);
});
app.listen(process.env.PORT || "8080");

SharePoint Matryoshka

Russian Nested Doll: 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.

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />
<html>
  <head>
    <title>
      JSDEV - App Part
    </title>
    <style type="text/css">
      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}&SPAppWebUrl={AppWebUrl}&SPLanguage={Language}&SPClientTag={ClientTag}&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:

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: convert-app-006

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.