share point hosted add ins munich
TRANSCRIPT
![Page 1: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/1.jpg)
Silber-Partner: Veranstalter:
SharePoint hosted add-ins
Sonja Madsen
![Page 2: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/2.jpg)
Sonja Madsen
SharePoint MVPSONJASAPPS ConsultingSpeaker
@sonjamadsen sp2013.blogspot.com [email protected] www.sonjasapps.com
![Page 3: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/3.jpg)
Set up and deployment Working with SharePoint lists and libraries JSOM and REST External sources Office UI Fabric TypeScript and Angular
![Page 4: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/4.jpg)
Office 365 SharePoint on-premise
Set up and deploymentSet up and deployment
![Page 5: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/5.jpg)
Office 365
&
Visual Studio Developer Site
![Page 6: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/6.jpg)
SharePoint on-premise
& &
![Page 7: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/7.jpg)
deployment
Corporate App Catalog
SharePoint App StoreSharePoint Add-in
![Page 8: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/8.jpg)
CDN or remote server
.js and .css files, images
Scripts folder or SharePoint library
![Page 9: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/9.jpg)
![Page 10: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/10.jpg)
![Page 11: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/11.jpg)
Browser load time test
![Page 12: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/12.jpg)
Style LibrarySharePoint add-in Scripts folderMS CDNMy CDN
.js file, 71.4KB
![Page 13: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/13.jpg)
Style Library 535msSharePoint add-in Scripts folder 907msMS CDN 256msMy CDN 254ms
![Page 14: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/14.jpg)
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
![Page 15: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/15.jpg)
<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
![Page 16: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/16.jpg)
Office Experimental ListView
![Page 17: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/17.jpg)
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>
![Page 18: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/18.jpg)
JSOM, cross-domain JSOM REST, cross-domain REST
JSOM and REST
![Page 19: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/19.jpg)
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
![Page 20: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/20.jpg)
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
![Page 21: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/21.jpg)
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);
![Page 22: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/22.jpg)
http://dev.office.com/fabric/styles Fonts, colors, message colors Grid Icons Controls
Office UI Fabric
![Page 23: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/23.jpg)
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>
![Page 24: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/24.jpg)
Responsive grid
![Page 25: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/25.jpg)
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>
![Page 26: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/26.jpg)
TypeScript and Angular
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
![Page 27: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/27.jpg)
App.moduleexport class Welcome { public static getMessage() { return 'Hello, World!'; }}
TypeScript/Javascript Hello World
JavaScriptvar helloWorld = { Greeting: function () { document.getElementById("greeting").innerHTML = resources.Hello();}};
![Page 28: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/28.jpg)
New version of Angular, Angular 2 beta is released in December 2015
![Page 29: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/29.jpg)
ECMAscript 6 shims and polyfills
![Page 30: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/30.jpg)
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
![Page 31: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/31.jpg)
FRAGEN?
![Page 32: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/32.jpg)
Ich freue mich auf Ihr Feedback!
![Page 33: Share point hosted add ins munich](https://reader036.vdocuments.mx/reader036/viewer/2022070603/587014391a28ab7f428b5035/html5/thumbnails/33.jpg)
Silber-Partner: Veranstalter:
Vielen Dank![Speaker]