CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: heroku

Convert any web app to a SharePoint app

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}&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:

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.

Hello world in node.js

I know, node.js has been present for a while. But I actually had no time to try it. I was surprised that now it is very straight forward to start with node.js. Allright, everything begins with Hello world. Eventhough it is available for allmost all combinations of operating systems and servers, the easiest way to test it was actually Ubuntu. To install just run:

sudo apt-get install nodejs

Then make a new directory and create the hello.js:

mkdir hello
cd hello
vi hello.js

The javascript code creates a server, instructs what to send back as a response and says to node to listen to port 40113 (what a weird number 🙂 )

var http = require('http');
http.createServer(function(req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8' });
  res.end('Salam tĕnce!');
}).listen(40113);

After that, just start the node process:

node hello.js

Very simple. Now go to localhost:40113 and see the result!

node.js on c9.io (Cloud9 IDE)

Even simpler way to try node.js is to create an app in Cloud9 IDE. Begin with a hello-world app.

That’s it.

Now some other useful links for starting with node.js:

Update:

If you want to get the latest node package, you shouldn’t install nodejs from apt. Just clone the node git repo, compile and update the PATH. npm package is preinstalled then:

git clone git:github.com/joyent/node.git
cd node
./configure
make
sudo make install
export PATH=${PATH}:/usr/local/bin

Or add a new repository to get the latest stable version of node.js

sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs npm
node.js and SharePoint

Luc Stakenborg has developed a node.js package for retrieving data from SharePoint. To use it, install two packages:

npm install xml2js
npm install sharepoint

Then create a js file with this content:

var SP = require('sharepoint'),
    site = 'http://yourdomain.sharepoint.com/teamsite',
    username = 'yourusername',
    password = 'yourpassword';

var client = new SP.RestService(site),
    posts = client.list('Posts');

var showResponse = function (err, data) {
    console.log(data);	
}

client.signin(username, password, function () {
    posts.get(showResponse)
});

javascript console in Powershell

It can’t be easier. If node is installed, just fire up PowerShell and type node:

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Coder, Speaker, Author

Office 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Cameron Dwyer

Office 365, SharePoint, Azure, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

DevOps, Cloud and Blockchain Consultant

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis

SharePointDiver

SharePoint på ren svenska