SharePoint Apps können auf unterschiedliche Arten gehostet werden. Direkt im SharePoint selbst (“SharePoint-hosted Apps”) in Form eines eigenen SubWebs oder in der Cloud. Letztere Variante unterteilt sich widerrum in direkt bei Microsft Azure (“Autohosted”) oder bei einem beliebigen Anbieter bzw. Webserver (“Provider-hosted”) gehostete Apps.
Die SharePoint hosted Apps besitzen automatisch das typische SharePoint 2013 Look&Feel (Styles, Navigationsleiste, WebsiteAktionen-Link etc.). Bei Provider- bzw. Autohosted Apps sucht man dies vergeblich. Damit jedoch auch solche Apps optisch reibungslos innerhalb der bisherigen SharePoint 2013 Umgebung bereitgestellt werden können, muss das sog. “Chrome Control” eingebunden werden.
Zunächst ist in Visual Studio eine App für SharePoint 2013 anzulegen.
Anschließend wird “Provider-hosted” oder ggf. auch “Autohosted” als Typ gewählt. 
Nun muss ggf. ein Zertifikat ausgewählt werden. Wie dies einzurichten ist, wurde bereits in diesem Blogeintrag ausführlich erläutert.
In einem ersten Testlauf soll das “Problem” zunächst dargestellt werden. Dazu kann in der “Default.aspx” innerhalb der <div>-Tags im zur Zeit noch leeren <body>-Bereich einmal eine Überschrift eingefügt werden:
<h1>Hallo Welt!</h1>
Nun kann das Projekt auch schon debuggt werden (F5). Im Anschluss öffnet sich der Browser und die App muss als vertrauenswürdig erklärt werden.
Danach wird direkt die App geöffnet. Wie unschwer zu erkennen ist, ohne SharePoint Look&Feel.
Um dies zu ändern, muss zunächst eine Referenz auf die JavaScript Bibliothek “SP.UI.Controls.js” eingbeunden werden via Object-Explorer –> Kontextmenü Scripts –> Add –> Existing Item –> [SP root folder]\TEMPLATE\LAYOUTS\SP.UI.Controls.js
Nachem die “SP.UI.Controls.js” hinzugefügt wurde, ist sie – ggf. neben der jquery-Bibliothek - nun noch im <head>-Bereich der aspx-Page zu referenzieren.
<script type="text/javascript" src="../Scripts/sp.ui.controls.js"></script>
Die App soll neben der aspx-Page aber auch noch das AppIcon anzeigen, welches dazu einfach aus dem Manifest-Bereich in den Pages-Ordner innerhalb des Provider-Bereichs (welcher sich standardmäßig als automatisch angelegte Webanwendung unterhalb der Standard-Webanwendung im IIS befindet) kopieren lässt.
Schließlich folgt das Einbinden der eigentlichen Chrome-Controls im Code der aspx—Page:
1: <body>
2: <div id="chrome_ctrl_container" data-ms-control="SP.UI.Controls.Navigation" data-ms-options=
3: '{
4: "appTitle" : "Provider Hosted App with Chrome Control",
5: "appIconUrl" : "AppIcon.png",
6: "settingsLinks" : [
7: {
8: "linkUrl" : "http://www.ppedv.de",
9: "displayName" : "visit ppedv"
10: }
11: ]
12: }'>
13: </div>
14: <form id="form1" runat="server">
15: <div>
16: <h1 class="ms-accentText">Hallo Welt!</h1>
17: <h2 class="ms-accentText">Überschrift 2</h2>
18: <div id="MainContent">Dies ist Standard Text...</div>
19: </div>
20: </form>
21: </body>
Die Properties “appTitle” und “appIconUrl” sind selbsterklärend. Die “settingsLinks” können u.a. dazu verwendet werden, im WebsiteAktions-Menü (Zahnrad rechts oben) einige Hyperlinks zu hinterlegen.
Falls beim erneuten Debuggen folgender Warnhinweis erscheint, kann dieser u.U. durch das Deaktivieren der SSL-Verbindung, welche standardmäßig für alle SharePoint Apps immer aktiviert ist, zukünftig vermieden werden. Dazu ist im Solution-Explorer die Property “SSL Enabled” der ProviderHostedApp auf “False” zu setzen.
Letztendlich erhält die App durch Einbinden des Chrome-Controls das SharePoint-typische Look&Feel, wie die folgende Grafik zeigt.