3. THANK YOU TO OUR
TEAM
ANDRÉ BATISTA ANDRÉ MELANCIA ANDRÉ VALA ANTÓNIO LOURENÇO BRUNO LOPES
CLÁUDIO SILVA
RUI BASTOS
NIKO NEUGEBAUER
RUI REISRICARDO CABRAL
NUNO CANCELO PAULO MATOS PEDRO SIMÕES
SANDRA MORGADO SANDRO PEREIRA
7. Building views and pages
• SharePoint add-in
• Single Page Add-in
• App Part – web part
• SharePoint List View
• Multiple languages
• Design
• Modules
8. SharePoint add-in system view
.aspx page
.js files
.css files
.xml files
app manifest
list definition
content types
site columns
app part
modules
feature
aspx
9. Landing 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
Advanced IFRAME
Edit web part: Title, layout, custom category and custom
properties
Resize
No data from the page
No data from parent page URL
11. Using SharePoint lists, libraries, and controls
• 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
• No Site Contents
• No List Settings
14. REST and JSOM API
• JSOM - JavaScript Client Object Model
• REST - stateless, client-server, cacheable communications protocol
• What is better?
• Can we mix?
16. Resembles SharePoint Server API, SSOM
Strongly typed
Batch requests
Connection authentication to the server
Covers more SharePoint API than REST
JSOM Advantages
17. Add list and list columns with JSOM
var listCreationInfo = new SP.ListCreationInformation();
listCreationInfo.set_title(listName);
listCreationInfo.set_templateType(SP.ListTemplateType.genericList);
var list = web.get_lists().add(listCreationInfo);
var newCols = [
"<Field Type='DateTime' DisplayName='StartDate' />",
"<Field Name='LinkURL' DisplayName='Link URL' Type='URL' />", true];
var numberCols = newCols.length;
for (var i = 0; i < numberCols; i++) {
this.newColumns= list.get_fields().addFieldAsXml(newCols[i], true,
SP.AddFieldOptions.defaultValue);
}
context.load(this.newColumns);
23. <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. What’s new
• Namespace – JavaScript
• Hosting of js and other files
• No cross-domain
• No .aspx page
37. context = new SP.ClientContext.get_current();
var context
var context
var context
var context
38. JavaScript Patterns
function getImages() {
context = new SP.ClientContext.get_current();
var request = new SP.WebRequestInfo();
var url = rssurl;
var account = getProperty("Account");
}
var myApp = (function () {
var getImages = function () {
context = new SP.ClientContext.get_current();
var request = new SP.WebRequestInfo();
var url = rssurl;
var account = getProperty("Account");
};
40. 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
41. Reactjs
• React is front end library developed by Facebook
• Used for handling view layer for web and mobile apps
• JSX − JSX is JavaScript syntax extension
• Components − everything is a component
• Unidirectional data flow and Flux − React implements one way data
flow
• Virtual DOM which is JavaScript object
• Inline templating and JSX
42. SharePoint Add-ins - Advantages
• You can hide the lists from end-user
• Both pages and an app part
• .aspx page – HTML
• Images, scripts, stylesheets hosted on SharePoint
• Isolated is not always a bad thing
43. SharePoint Framework - Advantages
• Responsive mobile friendly
• No iframe
• Dynamic properties
• Webhooks
• List-based and Page-based
• No need for cross-domain library to access SharePoint resources