Silber-Partner: Veranstalter:

SharePoint hosted add-ins

Sonja Madsen

Sonja Madsen

SharePoint MVPSONJASAPPS ConsultingSpeaker

@sonjamadsen sp2013.blogspot.com dev@sonjasapps.com www.sonjasapps.com

Set up and deployment Working with SharePoint lists and libraries JSOM and REST External sources Office UI Fabric TypeScript and Angular

Office 365 SharePoint on-premise

Set up and deploymentSet up and deployment

Office 365

&

Visual Studio Developer Site

SharePoint on-premise

& &

deployment

Corporate App Catalog

SharePoint App StoreSharePoint Add-in

CDN or remote server

.js and .css files, images

Scripts folder or SharePoint library

Browser load time test

Style LibrarySharePoint add-in Scripts folderMS CDNMy CDN

.js file, 71.4KB

Style Library 535msSharePoint add-in Scripts folder 907msMS CDN 256msMy CDN 254ms

Work with SharePoint lists and libraries

No Site Contents and List SettingsContent is gone on uninstall

Permissions to SharePointLists are not deleted on uninstallEasy to remove

Lists, libraries Lists, libraries

<WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full"> <WebPartPages:XsltListViewWebPart ID="XsltListViewWebPart2" runat="server" ListUrl="Lists/House" IsIncluded="True" NoDefaultStyle="TRUE" Title="The House" PageType="PAGE_NORMALVIEW" Default="False" ViewContentTypeId="0x"> </WebPartPages:XsltListViewWebPart> </WebPartPages:WebPartZone>

XsltListView web part

Office Experimental ListView

Office Experimental ListView

<script src="../Scripts/Office.Controls.js"></script><script src="../Scripts/Office.Controls.ListView.js"></script>

new Office.Controls.ListView( document.getElementById("ListView"), { listUrl: Office.Samples.ListViewBasic.appWebUrl + "/_api/web/lists/getbytitle('House')“ });

<div id="ListView"></div>

JSOM, cross-domain JSOM REST, cross-domain REST

JSOM and REST

var scriptbase = hostweburl + "/_layouts/15/"; $.getScript(scriptbase + "SP.RequestExecutor.js“

ctx = new SP.ClientContext(appweburl); var factory = new SP.ProxyWebRequestExecutorFactory(appweburl); ctx.set_webRequestExecutorFactory(factory); var appContextSite = new SP.AppContextSite(ctx, hostweburl); this.web = appContextSite.get_web(); var newSiteInfo = new SP.WebCreationInformation(); newSiteInfo.set_webTemplate('STS#0');…ctx.load(this.web); ctx.executeQueryAsync(

Cross-domain JSOM

var scriptbase = hostweburl + "/_layouts/15/"; $.getScript(scriptbase + "SP.RequestExecutor.js“

var executor = new SP.RequestExecutor(appurl); executor.executeAsync({ url: appurl + "/_api/SP.AppContextSite(@target)/web/webs/?@target='" + hosturl + "'&$select=Title,Url,WebTemplate,Id,Description", method: "GET", headers: { "ACCEPT": "application/json;odata=verbose" }, success: onWebsSuccess, error: function (err) { alert(JSON.stringify(err)); } });

Cross-domain REST

External sources

var rssurl = "https://www.youtube.com/feeds/videos.xml?channel_id=UCbzfdYRvOrU9ql1CM0Xn9ig";

request = new SP.WebRequestInfo(); request.set_url(url); request.set_method("GET"); response = SP.WebProxy.invoke(context, request); context.executeQueryAsync(onSuccess, onFail);

http://dev.office.com/fabric/styles Fonts, colors, message colors Grid Icons Controls

Office UI Fabric

Office UI Fabric

<i class="ms-Icon ms-Icon--mail" aria-hidden="true"></i>

<a id="addLists" href="#"><i class="ms-Icon ms-Icon--circlePlus" style="font-size: xx-large" aria-hidden="true"></i>Add lists</a>

Responsive grid

Office UI Fabric

<div class="ms-Grid"> <div class="ms-Grid-row"> <div class="ms-Grid-col ms-u-md12"> <h1>Super DEMO</h1> </div> </div></div><div class="ms-Grid-row"> <div class="ms-Grid-col ms-u-md2"> <a id="addLists" href="#"><i class="ms-Icon ms-Icon--circlePlus" style="font-size: xx-large" aria-hidden="true"></i>Add lists</a> </div>

TypeScript and Angular

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript

App.moduleexport class Welcome { public static getMessage() { return 'Hello, World!'; }}

TypeScript/Javascript Hello World

JavaScriptvar helloWorld = { Greeting: function () { document.getElementById("greeting").innerHTML = resources.Hello();}};

New version of Angular, Angular 2 beta is released in December 2015

ECMAscript 6 shims and polyfills

HTML<body> <my-custom></my-custom> </body>

app.componentimport {Welcome} from './app.module'import {Component} from 'angular2/core'

@Component({ selector: 'app-main', template: `<h1>${Welcome.getMessage()}</h1>`})

export class AppComponent { }

Angular 2 and TypeScript

FRAGEN?

Ich freue mich auf Ihr Feedback!

Silber-Partner: Veranstalter:

Vielen Dank![Speaker]