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.

1. Silber-Partner: Veranstalter:
SharePoint hosted add-ins
Sonja Madsen

2. Sonja Madsen
SharePoint MVP
SONJASAPPS
Consulting
Speaker
@sonjamadsen
sp2013.blogspot.com
dev@sonjasapps.com
www.sonjasapps.com

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

6. SharePoint on-premise
& &

7. deployment
Corporate App
Catalog
SharePoint App
Store
SharePoint Add-in

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

16. Office Experimental ListView

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!

33. Silber-Partner: Veranstalter:
Vielen Dank!
[Speaker]