workshop supermodel munich
TRANSCRIPT
![Page 1: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/1.jpg)
Silber-Partner: Veranstalter:
Working with a Supermodel for SharePoint Add-ins
Sonja Madsen
![Page 2: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/2.jpg)
Sonja Madsen
SharePoint MVPSONJASAPPS ConsultingSpeaker
@sonjamadsen sp2013.blogspot.com [email protected] www.sonjasapps.com
![Page 3: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/3.jpg)
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
![Page 4: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/4.jpg)
![Page 5: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/5.jpg)
SharePoint add-in Single Page Add-in App Part – web part SharePoint List View Multiple languages Design Modules
Building views and pages
![Page 6: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/6.jpg)
SharePoint add-in system view.aspx page.js .css
![Page 7: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/7.jpg)
JavaScript CSS
.aspx
SharePoint data, users and components
![Page 8: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/8.jpg)
.aspxLanding (start) page
App Part page
…
…
![Page 9: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/9.jpg)
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
![Page 10: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/10.jpg)
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
![Page 11: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/11.jpg)
App Part page
Advanced IFRAMEEdit web part: Title, layout, custom category and custom propertiesResize No data from the pageNo data from parent page URL
![Page 12: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/12.jpg)
List View
![Page 13: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/13.jpg)
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
![Page 14: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/14.jpg)
No Site Contents No List Settings
Using SharePoint lists, libraries, and controls
![Page 15: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/15.jpg)
What is better? Can we mix?
REST and JSOM API
![Page 16: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/16.jpg)
Knockout Angular MVVM
JavaScript Frameworks
![Page 17: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/17.jpg)
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
![Page 18: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/18.jpg)
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>
![Page 19: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/19.jpg)
Knockout News model News view model News view Display news link
![Page 20: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/20.jpg)
Difference in HTML
![Page 21: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/21.jpg)
Difference in JS
![Page 22: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/22.jpg)
Angular Framework
![Page 23: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/23.jpg)
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
![Page 24: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/24.jpg)
<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
![Page 25: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/25.jpg)
<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
![Page 26: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/26.jpg)
<div ng-include="news-template.html"></div>
Angular Templating
![Page 27: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/27.jpg)
Angular Modules Services, $http, $log
![Page 28: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/28.jpg)
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
![Page 29: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/29.jpg)
export class Welcome { public static getMessage() { return 'Hello, World!'; }}
TypeScript Hello World
![Page 30: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/30.jpg)
var helloWorld = { Greeting: function () { document.getElementById("greeting").innerHTML = resources.Hello();}};
JavaScript Hello World
![Page 31: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/31.jpg)
<body> <my-app></my-app> </body>
Angular 2 Beta and TypeScript
![Page 32: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/32.jpg)
![Page 33: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/33.jpg)
http://dev.office.com/fabric/styles Fonts, colors, message colors Grid Icons Controls
Office UI Fabric
![Page 34: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/34.jpg)
<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 35: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/35.jpg)
<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>
![Page 36: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/36.jpg)
<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 37: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/37.jpg)
Web Essentials - Minify Azure web application Browser
Debugging and Deployment
![Page 38: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/38.jpg)
FRAGEN?
![Page 39: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/39.jpg)
Ich freue mich auf Ihr Feedback!
![Page 40: Workshop supermodel munich](https://reader035.vdocument.in/reader035/viewer/2022062412/5873aece1a28aba3548b6d9b/html5/thumbnails/40.jpg)
Silber-Partner: Veranstalter:
Vielen Dank![Speaker]