share point hosted add ins munich
TRANSCRIPT
Silber-Partner: Veranstalter:
SharePoint hosted add-ins
Sonja Madsen
Sonja Madsen
SharePoint MVPSONJASAPPS ConsultingSpeaker
@sonjamadsen sp2013.blogspot.com [email protected] 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]