The document discusses building views and pages for SharePoint add-ins using JavaScript frameworks like TypeScript, Angular, and Knockout. It covers using SharePoint lists, libraries and controls via REST and JSOM APIs. The document also discusses branding add-ins using Office UI Fabric for fonts, colors, icons and controls. It mentions debugging and deploying add-ins to Azure web applications.

1. Silber-Partner: Veranstalter:
Working with a Supermodel
for SharePoint Add-ins
Sonja Madsen

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

3.  Building views and pages with SharePoint hosted add-ins
 Using SharePoint lists, libraries, and controls
 REST and JSOM API
 Using JavaScript Frameworks: TypeScript, Angular, and
Knockout
 Branding your work with Office UI Fabric
 Debugging and Deployment
Workshop

5.  SharePoint add-in
 Single Page Add-in
 App Part – web part
 SharePoint List View
 Multiple languages
 Design
 Modules
Building views and pages

6. SharePoint add-in system view
.aspx page
.js
.css

7. JavaScript CSS
.aspx
SharePoint data,
users and
components

8. .aspx
Landing (start) page
App Part page
…
…

9. Landing (start) page
HTML similar to a page layout
- Placeholders: PlaceHolderAdditionalPageHead,
PlaceHolderPageTitleInTitleArea, PlaceHolderMain
- SharePoint namespaces
- Inherits from
Microsoft.SharePoint.WebPartPages.WebPartPage
- Allows web part zones
- Allows web parts
- Parameters – properties in the URL: SPHostUrl, SPLanguage,
SPClientTag, SPProductNumber, SPAppWebUrl

10. App Part page
HTML
Inherits from Microsoft.SharePoint.WebPartPages.WebPartPage
No placeholders
No web part zones
No web parts
Parameters – properties in the URL: SPHostUrl, SPLanguage,
SPClientTag, SPProductNumber, SPAppWebUrl
Advanced Iframe
Experimental List View

11. App Part page
Advanced IFRAME
Edit web part: Title, layout, custom category and custom
properties
Resize
No data from the page
No data from parent page URL

12.  List View

13.  Controls such as
 List View,
 SharePoint:ScriptLink,
 SharePoint:EncodedLiteral,
 WebPartPages:XsltListViewWebPart
 Lists and libraries that are part of the add-in or part of a
SharePoint site
 Lists and libraries that are part of the add-in do not have
all the features like the ones created on SharePoint
Using SharePoint lists,
libraries, and controls

14.  No Site Contents
 No List Settings
Using SharePoint lists,
libraries, and controls

15.  What is better?
 Can we mix?
REST and JSOM API

16.  Knockout
 Angular
 MVVM
JavaScript Frameworks

17.  Model-View-View Model (MVVM) is a design pattern for
building user interfaces
 Model - stored data
 View model - representation of the data and
operations (add, remove)
 View - visible, interactive UI

18.  Data Binding
 JavaScript
 siteLi.innerHTML = "<a href='" + results[i].Url + "'>" +
results[i].Title + "</a>";
 Knockout
 <ul data-bind="foreach: News">
 <li data-bind="text: NewsTitle"></li>
 </ul>

19.  Knockout
 News model
 News view model
 News view
 Display news link

20.  Difference in HTML

21.  Difference in JS

22.  Angular
 Framework

23. function NewsItem(newsTitle, newsDescription) {
var self = this;
self.NewsTitle = newsTitle;
self.NewsDescription = newsDescription;
}
HTML
<div>
<div data-bind="template: { name: 'news-template' }"></div>
</div>
<script type="text/html" id="news-template">
<ul data-bind="foreach: News">
<li data-bind="text: NewsTitle"></li>
</ul>
</script>
Knockout

24. <div ng-app="app">
<div ng-controller="AppController">
<ul>
<li ng-repeat="newsItem in News">{{newsItem.Title}}</li>
</ul>
</div>
</div>
module App.Model {
export class newsItem {
public Title: string;
public Description: string;
}
}
Angular

25. <div>
<div data-bind="template: { name: 'news-template' }"></div>
</div>
<script type="text/html" id="news-template">
<ul data-bind="foreach: News">
<li data-bind="text: NewsTitle"></li>
</ul>
</script>
Knockout Templating

26. <div ng-include="news-template.html"></div>
Angular Templating

27.  Angular Modules
 Services, $http, $log

28.  TypeScript is a typed superset of JavaScript that compiles
to plain JavaScript

29. export class Welcome {
public static getMessage()
{
return 'Hello, World!';
}
}
TypeScript Hello World

30. var helloWorld = {
Greeting: function () {
document.getElementById("greeting").innerHTML = resources.Hello();
}
};
JavaScript Hello World

31. <body>
<my-app></my-app>
</body>
Angular 2 Beta and
TypeScript

33.  http://dev.office.com/fabric/styles
 Fonts, colors, message colors
 Grid
 Icons
 Controls
Office UI Fabric

34. <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>

35. <div>
Add a Site
<div>
<input id="sitename" class="ms-TextField-field" type="text">
<span class="ms-TextField-description">This should be the name of the site</span>
</div>
</div>

36. <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>

37.  Web Essentials - Minify
 Azure web application
 Browser
Debugging and
Deployment

38. FRAGEN?

39. Ich freue mich auf Ihr Feedback!

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