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
4.
5. SharePoint add-in
Single Page Add-in
App Part – web part
SharePoint List View
Multiple languages
Design
Modules
Building views and pages
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
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
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
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>