TUGA IT 2016LISBON, 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, SONJAsAPPSBest International Developer

Super model projecthttps://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 manifestlist definitioncontent typessite columnsapp partmodulesfeature

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 pageHTMLInherits from Microsoft.SharePoint.WebPartPages.WebPartPageNo placeholdersNo web part zonesNo web partsParameters – properties in the URL: SPHostUrl, SPLanguage, SPClientTag, SPProductNumber, SPAppWebUrlAdvanced IframeAdvanced IFRAMEEdit web part: Title, layout, custom category and custom propertiesResize No data from the pageNo 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

Lists and Libraries

ManagedMetadata

User Profiles

Workflows

SearchSite

Publishing

Analytics

BISocial

Add-ins, apps, farm solutions

_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

JSOMcontext = 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);

RESTvar 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, SSOMStrongly typedBatch requestsConnection authentication to the serverCovers more SharePoint API than REST

JSOM Advantages

Add list and list columns with JSOMvar 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);

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 FrameworkClient-side web parts, list-and page based applications

No isolated app webNo app domain

&

Visual Studio CodeOrVisual Studio

Workbench

SharePoint web part and Office 365

& LOCAL HOST

SharePoint 2016

SharePoint Web Part .spapp package

.spapp

.xml

.js

.cssimages

SharePoint web part .spapp

No .wsp, no .js, no .css, no images

DevelopmentVisual Studio CodeTypeScriptReact is a suggested frameworkOffice UI Fabric

List-based Applications

A list with custom list form pagesMain page

New item, Edit item, Display item

Any other page

Page-based Applications

Site Pages Library

Pages

Webhooks• List item receivers• Add item, delete item, check-out, check-in

DEMOWeb 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 APIand Core 1.0

Front-end Back-end

SharePoint AzureCore 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

InstagramRSS feed

SharePointAdd-inJavaScript

Code-behindLogic

REST∫∞

Solution Architecture

SharePoint add-in Core 1.0

App manifestXML files

JavaScriptCSSC#

D E M O

DEMO

• SQL Database

THANK YOU TO OUR SPONSORS