Developing an Intranet on Office 365Eric ShuppsSharePoint Server MVP

About Me

@eshupps sharepointcowboywww.sharepointcowboy.-com

slideshare.net/eshupps linkedin.com/in/eshupps

Eric ShuppsSharePoint Server MVP

Agenda

ArchitectureNavigationContent PublicationBranding

Architecture

Considerations

Objectives Audience Experience Challenges

Design

Content

Hierarchy

Findability

Taxonomy

Security

Permissions

Groups

Invitations

Extensibility

Branding

Components

Apps

Navigation

ComponentsSuite Bar

User Menu

Site Settings

Top Navigation

Quick Launch

Ribbon

Quick Access

Global

User Menu

Suite Bar $(document).ready(function() {$(".o365cs-nav-O365Links > div").prepend('<div

class="o365cs- nav-O365LinksItem"><div><a title="Go

to My SPC" class="o365button o365cs- nav-navItem o365cs-nav-workloadLink o365cs-spo-topnavLink o365cs- topnavLink"

id="O365_MainLink_ ShellMail" role="menuitem" aria- label="MySPC" href="http://myspc.

sharepointconference.com"><span>MySPC</span><div class="o365cs-

activeLinkIndicator o365cs-nw-b"

style="display:none;"></div></a></div><div style="display: none;"> </div></div>');

});

N/A

Site SettingsJavaScript Solution

JavaScript Solution

Quick AccessJavaScript Solution

Local

<CustomAction Id=“[GUID]. RibbonCustomAction" RegistrationType="ContentType" RegistrationId="0x" Location="CommandUI.Ribbon" Sequence="10001" Title=“My Custom Action"> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location="Ribbon.Library.Actions.Controls._children"> <Button Id="Ribbon.Library.Actions.MyAction" Alt=“My Custom Action" Sequence="100" Command="Invoke_CustomAction" LabelText=“Awesome Action" TemplateAlias="o1" Image32by32=“[ImageUrl]" Image16by16=“[ImageUrl]" /> </CommandUIDefinition> …

Ribbon

Quick Launch

Edit Control Block

JavaScript App Solution

JavaScript App Solution

JavaScript Solution

DEMOCustom Ribbon Action

Metadata

Static sort order

Custom properties enable extensibility

Scoped to current site collection

Hierarchical list of navigation nodes

DEMOCustom Metadata Navigation Control

Breadcrumb

Cannot navigate across site collection boundaries

Advanced functionality requires custom code

Basic functionality restored with master page edit + JavaScript

Vertical breadcrumb hidden in 2013/SPO

<div class="ms-breadcrumb-dropdownBox"><!--SPM:<SharePoint:AjaxDelta

id="DeltaBreadcrumbDropdown" runat="server">--><!--SPM:<SharePoint:PopoutMenu

Visible="true"

…

$(document).ready(function() {$(".ms-breadcrumb-

dropdownBox").attr("style","display:block!important;");

$("#GlobalBreadCrumbNavPopout-anchor > img").attr("src","/_layouts/15/images/spcommon.png?rev=32");});

Provisioning

Site Creation

What Works What Doesn’t

Programmatic ProvisioningCSOM, JSOM & REST

App Deployment

Core Templates

Site/Web Templates

Stapling

STP Files

Sandbox Solutions

Features

App Authorization

DEMOProvisioning a Site

Branding

• On-Premise• Modify and manipulate – do not

replaceMaster Pages

•PHA: External (CDN)•SPHA: External or App Web

Dependencies

• On-Premise: Declarative or Programmatic

• Online: ProgrammaticAssets

•Do not rely upon remote event receivers•Beware the dangers of injection

Retraction

Components

Deployment

Sandbox

• Declarative artifacts

• Web Templates• Modules• Custom

Actions• Retractable

Add-In

• Code only – no declarative artifacts

• JavaScript Injection

• Non-retractable

DEMOBranding Add-In