workshop supermodel munich
TRANSCRIPT
Silber-Partner: Veranstalter:
Working with a Supermodel for SharePoint Add-ins
Sonja Madsen
Sonja Madsen
SharePoint MVPSONJASAPPS ConsultingSpeaker
@sonjamadsen sp2013.blogspot.com [email protected] www.sonjasapps.com
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
SharePoint add-in Single Page Add-in App Part – web part SharePoint List View Multiple languages Design Modules
Building views and pages
SharePoint add-in system view.aspx page.js .css
JavaScript CSS
.aspx
SharePoint data, users and components
.aspxLanding (start) page
App Part page
…
…
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
App Part page
HTMLInherits from Microsoft.SharePoint.WebPartPages.WebPartPageNo placeholdersNo web part zonesNo web partsParameters – properties in the URL: SPHostUrl, SPLanguage, SPClientTag, SPProductNumber, SPAppWebUrlAdvanced IframeExperimental List View
App Part page
Advanced IFRAMEEdit web part: Title, layout, custom category and custom propertiesResize No data from the pageNo data from parent page URL
List View
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
No Site Contents No List Settings
Using SharePoint lists, libraries, and controls
What is better? Can we mix?
REST and JSOM API
Knockout Angular MVVM
JavaScript Frameworks
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
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>
Knockout News model News view model News view Display news link
Difference in HTML
Difference in JS
Angular Framework
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
<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
<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
<div ng-include="news-template.html"></div>
Angular Templating
Angular Modules Services, $http, $log
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
export class Welcome { public static getMessage() { return 'Hello, World!'; }}
TypeScript Hello World
var helloWorld = { Greeting: function () { document.getElementById("greeting").innerHTML = resources.Hello();}};
JavaScript Hello World
<body> <my-app></my-app> </body>
Angular 2 Beta and TypeScript
http://dev.office.com/fabric/styles Fonts, colors, message colors Grid Icons Controls
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>
<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>
<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>
Web Essentials - Minify Azure web application Browser
Debugging and Deployment
FRAGEN?
Ich freue mich auf Ihr Feedback!
Silber-Partner: Veranstalter:
Vielen Dank![Speaker]