SlideShare ist ein Scribd-Unternehmen logo
1 von 57
Downloaden Sie, um offline zu lesen
TUGA IT 2016
LISBON, PORTUGAL
THANK YOU TO OUR
SPONSORS
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
Working with a Super
model for SharePoint
Sonja Madsen
Sonja Madsen
sp2013.blogspot.com
@sonjamadsen
dev@sonjasapps.com
Sonja
Madsen
Microsoft MVP, SONJAsAPPS
Best International Developer
Super model project
https://code.msdn.microsoft.com/officeapps/SharePoint-Super-Model-7855df3a
Read from Web API
Building views and pages
• SharePoint add-in
• Single Page Add-in
• App Part – web part
• SharePoint List View
• Multiple languages
• Design
• Modules
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
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
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
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
Client-Side Object Model
_API
SharePoint 2013 - Office 365 - 2016
DEMO
REST and JSOM API
• JSOM - JavaScript Client Object Model
• REST - stateless, client-server, cacheable communications protocol
• What is better?
• Can we mix?
JavaScript
JSOM
context = new SP.ClientContext.get_current();
this.list =
context.get_web().get_lists().getByTitle(newsList);
var displayNewsQuery =
'<View><Query><OrderBy><FieldRef Name="ID"
Ascending="TRUE"/></OrderBy></Query></View>';
var query = new SP.CamlQuery();
query.set_viewXml(displayNewsQuery); news =
this.list.getItems(query);
context.load(news, 'Include(Title,ID)');
context.executeQueryAsync(onNewsSuccess,
onFail);
REST
var restUrl =
_spPageContextInfo.webAbsoluteUrl +
"/_api/web/lists/GetByTitle('Links')/items";
$.ajax({
url: restUrl,
method: "GET",
headers: { "ACCEPT":
"application/json;odata=verbose" },
success: onLinksSuccess,
error: onError
});
Resembles SharePoint Server API, SSOM
Strongly typed
Batch requests
Connection authentication to the server
Covers more SharePoint API than REST
JSOM Advantages
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);
Working with a super model for SharePoint Tuga IT 2016
DEMO
Office UI Fabric
Office UI Fabric
• http://dev.office.com/fabric/styles
• Fonts, colors, message colors
• Grid
• Icons
• Controls
<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>
Responsive Grid
<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>
SharePoint Framework
Client-side web parts, list-and page based applications
No isolated app web
No app domain
&
Visual Studio Code
Or
Visual Studio
Workbench
SharePoint web part and Office 365
&
SharePoint 2016
SharePoint Web Part .spapp package
SharePoint web part .spapp
Development
Visual Studio Code
TypeScript
React is a suggested
framework
Office UI Fabric
List-based Applications
A list with custom list form pages
Page-based Applications
Webhooks
• List item receivers
• Add item, delete item, check-out, check-in
DEMO
Web part, React web part
What’s new
• Namespace – JavaScript
• Hosting of js and other files
• No cross-domain
• No .aspx page
context = new SP.ClientContext.get_current();
var context
var context
var context
var context
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");
};
TypeScript
• TypeScript is a typed superset of JavaScript that compiles to plain
JavaScript
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
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
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
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
•SharePoint Add-ins on
Office 365
•Azure Web API
and Core 1.0
Front-end Back-end
SharePoint Azure
Core 1.0
Front-end
Back-end
SharePoint Client Object Model
• Lists, libraries
• Sites, permissions
• Users, user profiles
• Search
• Content
• Metadata
• External sources
C# is what JavaScript is not
• Send email
• Connect to database
• Secret sauce, code-behind
Microsoft on Instagram
Code-behind
• Intelligent apps
• Current user name, takes pictures description, language-country,
customer profile, purchase history, your product inventory
• Secret sauce logic
Core 1.0
• Cross-platform
• project.json
• global.json
• appsettings.json
• Command line
• Rebirth of MVC
• Coexist with ASP.NET 4.6
DEMO
• Code-behind
Instagram
RSS feed
SharePoint
Add-in
JavaScript
Code-behind
Logic
REST
∫∞
Solution Architecture
SharePoint add-in Core 1.0
App manifest
XML files
JavaScript
CSS
C#
D E M O
DEMO
• SQL Database
Working with a super model for SharePoint Tuga IT 2016
THANK YOU TO OUR
SPONSORS

Weitere ähnliche Inhalte

Was ist angesagt?

ECS19 - John White - Unlock SharePoint’s Reporting Secrets
ECS19 - John White - Unlock SharePoint’s Reporting SecretsECS19 - John White - Unlock SharePoint’s Reporting Secrets
ECS19 - John White - Unlock SharePoint’s Reporting SecretsEuropean Collaboration Summit
 
Modern SharePoint, the Good, the Bad, and the Ugly
Modern SharePoint, the Good, the Bad, and the UglyModern SharePoint, the Good, the Bad, and the Ugly
Modern SharePoint, the Good, the Bad, and the UglyBob German
 
Chris O'Brien - Introduction to the SharePoint Framework for developers
Chris O'Brien - Introduction to the SharePoint Framework for developersChris O'Brien - Introduction to the SharePoint Framework for developers
Chris O'Brien - Introduction to the SharePoint Framework for developersChris O'Brien
 
Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?Talbott Crowell
 
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClassEuropean Collaboration Summit
 
SharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object ModelSharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object ModelInnoTech
 
Custom Development for SharePoint
Custom Development for SharePointCustom Development for SharePoint
Custom Development for SharePointTalbott Crowell
 
4 tools, sandboxed solutionds, web part development
4   tools, sandboxed solutionds, web part development4   tools, sandboxed solutionds, web part development
4 tools, sandboxed solutionds, web part developmenticdesktop
 
Share point development 101
Share point development 101Share point development 101
Share point development 101Becky Bertram
 
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...Chris O'Brien
 
Share point saturday presentation 9 29-2012-2
Share point saturday presentation 9 29-2012-2Share point saturday presentation 9 29-2012-2
Share point saturday presentation 9 29-2012-2Derek Gusoff
 
ECS19 - Rodrigo Pinto - Modernize Your Classic SharePoint Sites
ECS19 - Rodrigo Pinto - Modernize Your Classic SharePoint SitesECS19 - Rodrigo Pinto - Modernize Your Classic SharePoint Sites
ECS19 - Rodrigo Pinto - Modernize Your Classic SharePoint SitesEuropean Collaboration Summit
 
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...Chris O'Brien
 
Get started with building native mobile apps interacting with SharePoint
Get started with building native mobile apps interacting with SharePointGet started with building native mobile apps interacting with SharePoint
Get started with building native mobile apps interacting with SharePointYaroslav Pentsarskyy [MVP]
 
So you’re building an intranet
So you’re building an intranetSo you’re building an intranet
So you’re building an intranetBecky Bertram
 
SPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITProsSPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITProsPaul Hunt
 
Pretty Up My SharePoint
Pretty Up My SharePointPretty Up My SharePoint
Pretty Up My SharePointCorinna Lins
 
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office ProductsChris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office ProductsChris O'Brien
 
Introduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPathIntroduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPathMark Rackley
 

Was ist angesagt? (20)

ECS19 - John White - Unlock SharePoint’s Reporting Secrets
ECS19 - John White - Unlock SharePoint’s Reporting SecretsECS19 - John White - Unlock SharePoint’s Reporting Secrets
ECS19 - John White - Unlock SharePoint’s Reporting Secrets
 
Modern SharePoint, the Good, the Bad, and the Ugly
Modern SharePoint, the Good, the Bad, and the UglyModern SharePoint, the Good, the Bad, and the Ugly
Modern SharePoint, the Good, the Bad, and the Ugly
 
Chris O'Brien - Introduction to the SharePoint Framework for developers
Chris O'Brien - Introduction to the SharePoint Framework for developersChris O'Brien - Introduction to the SharePoint Framework for developers
Chris O'Brien - Introduction to the SharePoint Framework for developers
 
Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?
 
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
 
SharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object ModelSharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object Model
 
Custom Development for SharePoint
Custom Development for SharePointCustom Development for SharePoint
Custom Development for SharePoint
 
4 tools, sandboxed solutionds, web part development
4   tools, sandboxed solutionds, web part development4   tools, sandboxed solutionds, web part development
4 tools, sandboxed solutionds, web part development
 
Share point development 101
Share point development 101Share point development 101
Share point development 101
 
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
 
Share point saturday presentation 9 29-2012-2
Share point saturday presentation 9 29-2012-2Share point saturday presentation 9 29-2012-2
Share point saturday presentation 9 29-2012-2
 
ECS19 - Rodrigo Pinto - Modernize Your Classic SharePoint Sites
ECS19 - Rodrigo Pinto - Modernize Your Classic SharePoint SitesECS19 - Rodrigo Pinto - Modernize Your Classic SharePoint Sites
ECS19 - Rodrigo Pinto - Modernize Your Classic SharePoint Sites
 
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
 
Get started with building native mobile apps interacting with SharePoint
Get started with building native mobile apps interacting with SharePointGet started with building native mobile apps interacting with SharePoint
Get started with building native mobile apps interacting with SharePoint
 
So you’re building an intranet
So you’re building an intranetSo you’re building an intranet
So you’re building an intranet
 
App deployment
App deploymentApp deployment
App deployment
 
SPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITProsSPSSTHLM - Using JSLink and Display Templates for ITPros
SPSSTHLM - Using JSLink and Display Templates for ITPros
 
Pretty Up My SharePoint
Pretty Up My SharePointPretty Up My SharePoint
Pretty Up My SharePoint
 
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office ProductsChris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office Products
 
Introduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPathIntroduction to StratusForms #SayNoToInfoPath
Introduction to StratusForms #SayNoToInfoPath
 

Andere mochten auch

Adversarial to Harmonious: Building the Developer / UX Connection
Adversarial to Harmonious: Building the Developer / UX ConnectionAdversarial to Harmonious: Building the Developer / UX Connection
Adversarial to Harmonious: Building the Developer / UX ConnectionNick Tucker
 
Dietary Guidelines for America by the Numbers Infographic
Dietary Guidelines for America by the Numbers InfographicDietary Guidelines for America by the Numbers Infographic
Dietary Guidelines for America by the Numbers InfographicFood Insight
 
How does Content go Viral?
How does Content go Viral?How does Content go Viral?
How does Content go Viral?Daniel Howard
 
Last Minute Gift Guide
Last Minute Gift GuideLast Minute Gift Guide
Last Minute Gift GuideLloyd Douaihy
 
Hesham_Marei_portfolio2
Hesham_Marei_portfolio2Hesham_Marei_portfolio2
Hesham_Marei_portfolio2Hesham Marei
 
Grow with HubSpot - Tokyo - September 2016
Grow with HubSpot - Tokyo - September 2016Grow with HubSpot - Tokyo - September 2016
Grow with HubSpot - Tokyo - September 2016Ryan Bonnici
 
Times of India TOI- Art of a kind- Popart -2010
Times of India TOI- Art of a kind- Popart -2010Times of India TOI- Art of a kind- Popart -2010
Times of India TOI- Art of a kind- Popart -2010archana jhangiani
 
Inventory slide share
Inventory slide share Inventory slide share
Inventory slide share Sarah Pilling
 
Customer Acquisition: Growth marketing for startups
Customer Acquisition: Growth marketing for startupsCustomer Acquisition: Growth marketing for startups
Customer Acquisition: Growth marketing for startupsChris Schultz
 
Reinventing Mass Media with 10,000 Little Jon Stewarts
Reinventing Mass Media with 10,000 Little Jon StewartsReinventing Mass Media with 10,000 Little Jon Stewarts
Reinventing Mass Media with 10,000 Little Jon StewartsWebVisions
 
The Inner Creative
The Inner CreativeThe Inner Creative
The Inner CreativeGerry Baird
 
Backend-driven UIs - #Pragma Conference 2016
Backend-driven UIs - #Pragma Conference 2016Backend-driven UIs - #Pragma Conference 2016
Backend-driven UIs - #Pragma Conference 2016John Sundell
 
20120119_For 2012 MezzoMedia Rookie
20120119_For 2012 MezzoMedia Rookie20120119_For 2012 MezzoMedia Rookie
20120119_For 2012 MezzoMedia RookieSanghoon Lee
 
Participative Design of qMOOCs with Deep Learning and 3d Virtual Immersive En...
Participative Design of qMOOCs with Deep Learning and 3d Virtual Immersive En...Participative Design of qMOOCs with Deep Learning and 3d Virtual Immersive En...
Participative Design of qMOOCs with Deep Learning and 3d Virtual Immersive En...Dr Stylianos Mystakidis
 
America’s Most Famous Forgettable President
America’s Most Famous Forgettable PresidentAmerica’s Most Famous Forgettable President
America’s Most Famous Forgettable PresidentNelson Lewis
 

Andere mochten auch (20)

Adversarial to Harmonious: Building the Developer / UX Connection
Adversarial to Harmonious: Building the Developer / UX ConnectionAdversarial to Harmonious: Building the Developer / UX Connection
Adversarial to Harmonious: Building the Developer / UX Connection
 
Pttict2
Pttict2Pttict2
Pttict2
 
Dietary Guidelines for America by the Numbers Infographic
Dietary Guidelines for America by the Numbers InfographicDietary Guidelines for America by the Numbers Infographic
Dietary Guidelines for America by the Numbers Infographic
 
How does Content go Viral?
How does Content go Viral?How does Content go Viral?
How does Content go Viral?
 
Last Minute Gift Guide
Last Minute Gift GuideLast Minute Gift Guide
Last Minute Gift Guide
 
Why I Walk
Why I WalkWhy I Walk
Why I Walk
 
Hesham_Marei_portfolio2
Hesham_Marei_portfolio2Hesham_Marei_portfolio2
Hesham_Marei_portfolio2
 
Grow with HubSpot - Tokyo - September 2016
Grow with HubSpot - Tokyo - September 2016Grow with HubSpot - Tokyo - September 2016
Grow with HubSpot - Tokyo - September 2016
 
Times of India TOI- Art of a kind- Popart -2010
Times of India TOI- Art of a kind- Popart -2010Times of India TOI- Art of a kind- Popart -2010
Times of India TOI- Art of a kind- Popart -2010
 
Inventory slide share
Inventory slide share Inventory slide share
Inventory slide share
 
save girl child...
save girl child...save girl child...
save girl child...
 
Customer Acquisition: Growth marketing for startups
Customer Acquisition: Growth marketing for startupsCustomer Acquisition: Growth marketing for startups
Customer Acquisition: Growth marketing for startups
 
Reinventing Mass Media with 10,000 Little Jon Stewarts
Reinventing Mass Media with 10,000 Little Jon StewartsReinventing Mass Media with 10,000 Little Jon Stewarts
Reinventing Mass Media with 10,000 Little Jon Stewarts
 
The Inner Creative
The Inner CreativeThe Inner Creative
The Inner Creative
 
Conference Coma
Conference ComaConference Coma
Conference Coma
 
Backend-driven UIs - #Pragma Conference 2016
Backend-driven UIs - #Pragma Conference 2016Backend-driven UIs - #Pragma Conference 2016
Backend-driven UIs - #Pragma Conference 2016
 
20120119_For 2012 MezzoMedia Rookie
20120119_For 2012 MezzoMedia Rookie20120119_For 2012 MezzoMedia Rookie
20120119_For 2012 MezzoMedia Rookie
 
Participative Design of qMOOCs with Deep Learning and 3d Virtual Immersive En...
Participative Design of qMOOCs with Deep Learning and 3d Virtual Immersive En...Participative Design of qMOOCs with Deep Learning and 3d Virtual Immersive En...
Participative Design of qMOOCs with Deep Learning and 3d Virtual Immersive En...
 
America’s Most Famous Forgettable President
America’s Most Famous Forgettable PresidentAmerica’s Most Famous Forgettable President
America’s Most Famous Forgettable President
 
Unity Morph performance test
Unity Morph performance testUnity Morph performance test
Unity Morph performance test
 

Ähnlich wie Working with a super model for SharePoint Tuga IT 2016

Introduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST APIIntroduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST APIRob Windsor
 
Workshop supermodel munich
Workshop supermodel munichWorkshop supermodel munich
Workshop supermodel munichSonja Madsen
 
Integrate MongoDB & SQL data with a single REST API
Integrate MongoDB & SQL data with a single REST APIIntegrate MongoDB & SQL data with a single REST API
Integrate MongoDB & SQL data with a single REST APIEspresso Logic
 
Share point hosted add ins munich
Share point hosted add ins munichShare point hosted add ins munich
Share point hosted add ins munichSonja Madsen
 
SharePoint 2010 Application Development Overview
SharePoint 2010 Application Development OverviewSharePoint 2010 Application Development Overview
SharePoint 2010 Application Development OverviewRob Windsor
 
Introduction to using jQuery with SharePoint
Introduction to using jQuery with SharePointIntroduction to using jQuery with SharePoint
Introduction to using jQuery with SharePointRene Modery
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...Mark Leusink
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...Mark Roden
 
Full Stack Developer
Full Stack DeveloperFull Stack Developer
Full Stack DeveloperAkbar Uddin
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery GuideMark Rackley
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConSPTechCon
 
Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...
Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...
Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...BlueMetalInc
 
AJAX Patterns with ASP.NET
AJAX Patterns with ASP.NETAJAX Patterns with ASP.NET
AJAX Patterns with ASP.NETgoodfriday
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOMMark Rackley
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery GuideMark Rackley
 
ASP.NET Presentation
ASP.NET PresentationASP.NET Presentation
ASP.NET PresentationRasel Khan
 
Angular jS Introduction by Google
Angular jS Introduction by GoogleAngular jS Introduction by Google
Angular jS Introduction by GoogleASG
 
Developing Next-Gen Enterprise Web Application
Developing Next-Gen Enterprise Web ApplicationDeveloping Next-Gen Enterprise Web Application
Developing Next-Gen Enterprise Web ApplicationMark Gu
 
Wss Object Model
Wss Object ModelWss Object Model
Wss Object Modelmaddinapudi
 
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013Kiril Iliev
 

Ähnlich wie Working with a super model for SharePoint Tuga IT 2016 (20)

Introduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST APIIntroduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST API
 
Workshop supermodel munich
Workshop supermodel munichWorkshop supermodel munich
Workshop supermodel munich
 
Integrate MongoDB & SQL data with a single REST API
Integrate MongoDB & SQL data with a single REST APIIntegrate MongoDB & SQL data with a single REST API
Integrate MongoDB & SQL data with a single REST API
 
Share point hosted add ins munich
Share point hosted add ins munichShare point hosted add ins munich
Share point hosted add ins munich
 
SharePoint 2010 Application Development Overview
SharePoint 2010 Application Development OverviewSharePoint 2010 Application Development Overview
SharePoint 2010 Application Development Overview
 
Introduction to using jQuery with SharePoint
Introduction to using jQuery with SharePointIntroduction to using jQuery with SharePoint
Introduction to using jQuery with SharePoint
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
Full Stack Developer
Full Stack DeveloperFull Stack Developer
Full Stack Developer
 
The SharePoint & jQuery Guide
The SharePoint & jQuery GuideThe SharePoint & jQuery Guide
The SharePoint & jQuery Guide
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechConThe SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
 
Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...
Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...
Apps 101 - Moving to the SharePoint 2013 App Model - Presented 7/27/13 at Sha...
 
AJAX Patterns with ASP.NET
AJAX Patterns with ASP.NETAJAX Patterns with ASP.NET
AJAX Patterns with ASP.NET
 
SharePoint REST vs CSOM
SharePoint REST vs CSOMSharePoint REST vs CSOM
SharePoint REST vs CSOM
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide
 
ASP.NET Presentation
ASP.NET PresentationASP.NET Presentation
ASP.NET Presentation
 
Angular jS Introduction by Google
Angular jS Introduction by GoogleAngular jS Introduction by Google
Angular jS Introduction by Google
 
Developing Next-Gen Enterprise Web Application
Developing Next-Gen Enterprise Web ApplicationDeveloping Next-Gen Enterprise Web Application
Developing Next-Gen Enterprise Web Application
 
Wss Object Model
Wss Object ModelWss Object Model
Wss Object Model
 
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
 

Mehr von Sonja Madsen

SharePoint Framework, React, and Office UI Fabric spc adriatics 2016
SharePoint Framework, React, and Office UI Fabric spc adriatics 2016SharePoint Framework, React, and Office UI Fabric spc adriatics 2016
SharePoint Framework, React, and Office UI Fabric spc adriatics 2016Sonja Madsen
 
SharePoint Framework SPS Madrid 2016
SharePoint Framework SPS Madrid 2016SharePoint Framework SPS Madrid 2016
SharePoint Framework SPS Madrid 2016Sonja Madsen
 
Cloud-first SharePoint JavaScript Add-ins - Collab 365
Cloud-first SharePoint JavaScript Add-ins - Collab 365Cloud-first SharePoint JavaScript Add-ins - Collab 365
Cloud-first SharePoint JavaScript Add-ins - Collab 365Sonja Madsen
 
Building Share Point add-ins with JavaScript and c# Microsoft Western Europe ...
Building Share Point add-ins with JavaScript and c# Microsoft Western Europe ...Building Share Point add-ins with JavaScript and c# Microsoft Western Europe ...
Building Share Point add-ins with JavaScript and c# Microsoft Western Europe ...Sonja Madsen
 
Office 365 security concerns, EU General Data Protection Regulation (GDPR)
Office 365 security concerns, EU General Data Protection Regulation (GDPR) Office 365 security concerns, EU General Data Protection Regulation (GDPR)
Office 365 security concerns, EU General Data Protection Regulation (GDPR) Sonja Madsen
 
GitHub and Office 365 video Munich
GitHub and Office 365 video MunichGitHub and Office 365 video Munich
GitHub and Office 365 video MunichSonja Madsen
 
Branding Office 365 SharePoint Days
Branding Office 365 SharePoint DaysBranding Office 365 SharePoint Days
Branding Office 365 SharePoint DaysSonja Madsen
 
Quick start guide to java script frameworks for sharepoint add ins sharepoint...
Quick start guide to java script frameworks for sharepoint add ins sharepoint...Quick start guide to java script frameworks for sharepoint add ins sharepoint...
Quick start guide to java script frameworks for sharepoint add ins sharepoint...Sonja Madsen
 
Patterns in add ins espc15
Patterns in add ins espc15Patterns in add ins espc15
Patterns in add ins espc15Sonja Madsen
 
Branding Office 365 ESPC15
Branding Office 365 ESPC15Branding Office 365 ESPC15
Branding Office 365 ESPC15Sonja Madsen
 
Quick start guide to java script frameworks for sharepoint add ins oslo
Quick start guide to java script frameworks for sharepoint add ins osloQuick start guide to java script frameworks for sharepoint add ins oslo
Quick start guide to java script frameworks for sharepoint add ins osloSonja Madsen
 
Wonderful csom sps barcelona
Wonderful csom sps barcelonaWonderful csom sps barcelona
Wonderful csom sps barcelonaSonja Madsen
 
Branding office 365 copenhagen
Branding office 365 copenhagenBranding office 365 copenhagen
Branding office 365 copenhagenSonja Madsen
 
JavaScript Frameworks for SharePoint add-ins Cambridge
JavaScript Frameworks for SharePoint add-ins CambridgeJavaScript Frameworks for SharePoint add-ins Cambridge
JavaScript Frameworks for SharePoint add-ins CambridgeSonja Madsen
 
Branding office 365 Netherlands
Branding office 365 NetherlandsBranding office 365 Netherlands
Branding office 365 NetherlandsSonja Madsen
 
Branding office 365
Branding office 365Branding office 365
Branding office 365Sonja Madsen
 
Quick start guide to java script frameworks for sharepoint apps spsbe-2015
Quick start guide to java script frameworks for sharepoint apps spsbe-2015Quick start guide to java script frameworks for sharepoint apps spsbe-2015
Quick start guide to java script frameworks for sharepoint apps spsbe-2015Sonja Madsen
 
Introduktion til SharePoint apps
Introduktion til SharePoint appsIntroduktion til SharePoint apps
Introduktion til SharePoint appsSonja Madsen
 
Mva migrate to a different office 365 plan
Mva migrate to a different office 365 planMva migrate to a different office 365 plan
Mva migrate to a different office 365 planSonja Madsen
 
Mva configure mobile devices for office 365
Mva configure mobile devices for office 365Mva configure mobile devices for office 365
Mva configure mobile devices for office 365Sonja Madsen
 

Mehr von Sonja Madsen (20)

SharePoint Framework, React, and Office UI Fabric spc adriatics 2016
SharePoint Framework, React, and Office UI Fabric spc adriatics 2016SharePoint Framework, React, and Office UI Fabric spc adriatics 2016
SharePoint Framework, React, and Office UI Fabric spc adriatics 2016
 
SharePoint Framework SPS Madrid 2016
SharePoint Framework SPS Madrid 2016SharePoint Framework SPS Madrid 2016
SharePoint Framework SPS Madrid 2016
 
Cloud-first SharePoint JavaScript Add-ins - Collab 365
Cloud-first SharePoint JavaScript Add-ins - Collab 365Cloud-first SharePoint JavaScript Add-ins - Collab 365
Cloud-first SharePoint JavaScript Add-ins - Collab 365
 
Building Share Point add-ins with JavaScript and c# Microsoft Western Europe ...
Building Share Point add-ins with JavaScript and c# Microsoft Western Europe ...Building Share Point add-ins with JavaScript and c# Microsoft Western Europe ...
Building Share Point add-ins with JavaScript and c# Microsoft Western Europe ...
 
Office 365 security concerns, EU General Data Protection Regulation (GDPR)
Office 365 security concerns, EU General Data Protection Regulation (GDPR) Office 365 security concerns, EU General Data Protection Regulation (GDPR)
Office 365 security concerns, EU General Data Protection Regulation (GDPR)
 
GitHub and Office 365 video Munich
GitHub and Office 365 video MunichGitHub and Office 365 video Munich
GitHub and Office 365 video Munich
 
Branding Office 365 SharePoint Days
Branding Office 365 SharePoint DaysBranding Office 365 SharePoint Days
Branding Office 365 SharePoint Days
 
Quick start guide to java script frameworks for sharepoint add ins sharepoint...
Quick start guide to java script frameworks for sharepoint add ins sharepoint...Quick start guide to java script frameworks for sharepoint add ins sharepoint...
Quick start guide to java script frameworks for sharepoint add ins sharepoint...
 
Patterns in add ins espc15
Patterns in add ins espc15Patterns in add ins espc15
Patterns in add ins espc15
 
Branding Office 365 ESPC15
Branding Office 365 ESPC15Branding Office 365 ESPC15
Branding Office 365 ESPC15
 
Quick start guide to java script frameworks for sharepoint add ins oslo
Quick start guide to java script frameworks for sharepoint add ins osloQuick start guide to java script frameworks for sharepoint add ins oslo
Quick start guide to java script frameworks for sharepoint add ins oslo
 
Wonderful csom sps barcelona
Wonderful csom sps barcelonaWonderful csom sps barcelona
Wonderful csom sps barcelona
 
Branding office 365 copenhagen
Branding office 365 copenhagenBranding office 365 copenhagen
Branding office 365 copenhagen
 
JavaScript Frameworks for SharePoint add-ins Cambridge
JavaScript Frameworks for SharePoint add-ins CambridgeJavaScript Frameworks for SharePoint add-ins Cambridge
JavaScript Frameworks for SharePoint add-ins Cambridge
 
Branding office 365 Netherlands
Branding office 365 NetherlandsBranding office 365 Netherlands
Branding office 365 Netherlands
 
Branding office 365
Branding office 365Branding office 365
Branding office 365
 
Quick start guide to java script frameworks for sharepoint apps spsbe-2015
Quick start guide to java script frameworks for sharepoint apps spsbe-2015Quick start guide to java script frameworks for sharepoint apps spsbe-2015
Quick start guide to java script frameworks for sharepoint apps spsbe-2015
 
Introduktion til SharePoint apps
Introduktion til SharePoint appsIntroduktion til SharePoint apps
Introduktion til SharePoint apps
 
Mva migrate to a different office 365 plan
Mva migrate to a different office 365 planMva migrate to a different office 365 plan
Mva migrate to a different office 365 plan
 
Mva configure mobile devices for office 365
Mva configure mobile devices for office 365Mva configure mobile devices for office 365
Mva configure mobile devices for office 365
 

Kürzlich hochgeladen

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 

Kürzlich hochgeladen (12)

Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 

Working with a super model for SharePoint Tuga IT 2016

  • 2. THANK YOU TO OUR SPONSORS
  • 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
  • 4. Working with a Super model for SharePoint Sonja Madsen
  • 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
  • 12. Client-Side Object Model _API SharePoint 2013 - Office 365 - 2016
  • 13. DEMO
  • 14. REST and JSOM API • JSOM - JavaScript Client Object Model • REST - stateless, client-server, cacheable communications protocol • What is better? • Can we mix?
  • 15. JavaScript JSOM context = new SP.ClientContext.get_current(); this.list = context.get_web().get_lists().getByTitle(newsList); var displayNewsQuery = '<View><Query><OrderBy><FieldRef Name="ID" Ascending="TRUE"/></OrderBy></Query></View>'; var query = new SP.CamlQuery(); query.set_viewXml(displayNewsQuery); news = this.list.getItems(query); context.load(news, 'Include(Title,ID)'); context.executeQueryAsync(onNewsSuccess, onFail); REST var restUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Links')/items"; $.ajax({ url: restUrl, method: "GET", headers: { "ACCEPT": "application/json;odata=verbose" }, success: onLinksSuccess, error: onError });
  • 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);
  • 19. DEMO
  • 21. Office UI Fabric • http://dev.office.com/fabric/styles • Fonts, colors, message colors • Grid • Icons • Controls
  • 22. <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>
  • 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>
  • 25. <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>
  • 26. SharePoint Framework Client-side web parts, list-and page based applications
  • 27. No isolated app web No app domain
  • 28. & Visual Studio Code Or Visual Studio Workbench SharePoint web part and Office 365 & SharePoint 2016
  • 29. SharePoint Web Part .spapp package
  • 31. Development Visual Studio Code TypeScript React is a suggested framework Office UI Fabric
  • 32. List-based Applications A list with custom list form pages
  • 34. Webhooks • List item receivers • Add item, delete item, check-out, check-in
  • 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"); };
  • 39. TypeScript • TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
  • 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
  • 44. •SharePoint Add-ins on Office 365 •Azure Web API and Core 1.0
  • 47. SharePoint Client Object Model • Lists, libraries • Sites, permissions • Users, user profiles • Search • Content • Metadata • External sources
  • 48. C# is what JavaScript is not • Send email • Connect to database • Secret sauce, code-behind
  • 50. Code-behind • Intelligent apps • Current user name, takes pictures description, language-country, customer profile, purchase history, your product inventory • Secret sauce logic
  • 51. Core 1.0 • Cross-platform • project.json • global.json • appsettings.json • Command line • Rebirth of MVC • Coexist with ASP.NET 4.6
  • 54. Solution Architecture SharePoint add-in Core 1.0 App manifest XML files JavaScript CSS C# D E M O
  • 57. THANK YOU TO OUR SPONSORS