Share point hosted add ins munich
•Download as PPTX, PDF•
1 like•597 views
The document discusses SharePoint hosted add-ins. It covers topics such as setting up and deploying add-ins to both Office 365 and on-premise SharePoint, working with SharePoint lists and libraries using the JSOM and REST APIs, consuming external data sources, using the Office UI Fabric for styling, and building add-ins with TypeScript and Angular. The speaker is available to answer questions and welcomes feedback on the presentation.
Report
Share
Share point hosted add ins munich
- 1. Silber-Partner: Veranstalter: SharePoint hosted add-ins Sonja Madsen
- 3. Set up and deployment Working with SharePoint lists and libraries JSOM and REST External sources Office UI Fabric TypeScript and Angular
- 4. Office 365 SharePoint on-premise Set up and deploymentSet up and deployment
- 5. Office 365 & Visual Studio Developer Site
- 8. CDN or remote server .js and .css files, images Scripts folder or SharePoint library
- 11. Browser load time test
- 12. Style Library SharePoint add-in Scripts folder MS CDN My CDN .js file, 71.4KB
- 13. Style Library 535ms SharePoint add-in Scripts folder 907ms MS CDN 256ms My CDN 254ms
- 14. Work with SharePoint lists and libraries No Site Contents and List Settings Content is gone on uninstall Permissions to SharePoint Lists are not deleted on uninstall Easy to remove Lists, libraries Lists, libraries
- 15. <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
- 17. 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>
- 18. JSOM, cross-domain JSOM REST, cross-domain REST JSOM and REST
- 19. 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
- 20. 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
- 21. 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);
- 22. http://dev.office.com/fabric/styles Fonts, colors, message colors Grid Icons Controls Office UI Fabric
- 23. 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>
- 24. Responsive grid
- 25. 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>
- 26. TypeScript and Angular TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
- 27. App.module export class Welcome { public static getMessage() { return 'Hello, World!'; } } TypeScript/Javascript Hello World JavaScript var helloWorld = { Greeting: function () { document.getElementById("greeting").innerHTML = resources.Hello(); } };
- 28. New version of Angular, Angular 2 beta is released in December 2015
- 29. ECMAscript 6 shims and polyfills
- 30. HTML <body> <my-custom></my-custom> </body> app.component import {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
- 31. FRAGEN?
- 32. Ich freue mich auf Ihr Feedback!