SharePoint Modern development patterns continue to evolve. Site Designs and Site Scripts are the latest in assisting you to automate the provisioning of new or existing modern SharePoint sites using customizations that you create. This session will go into describing how you can use site designs and site scripts to provide custom configurations to apply when new sites are created as well as how to apply them to existing sites as well.
SQL Database Design For Developers at php[tek] 2024
SharePoint Online Site Design and Site Scripts: The New Hotness #o365red
1. SharePoint Online Site Design and Site Scripts: The New Hotness
SharePoint Modern development patterns continue to evolve. Site Designs and Site Scripts are the
latest in assisting you to automate the provisioning of new or existing modern SharePoint sites
using customizations that you create. This session will go into describing how you can use site
designs and site scripts to provide custom configurations to apply when new sites are created as
well as how to apply them to existing sites as well.
Presented by Kanwal Khipple (@kkhipple)
Office 365 Redmond
#o365red
October 27th 2018
4. Mission
Disney
WalMart
Fedex
Microsoft
McDonalds
Apple
Nike
Google
Toyota
Every company starts with an idea, and based on that one idea, works hard to build a culture
that helps deliver products and services
produce family fun entertainment
saving people money so they can live better
guaranteed overnight
enable productivity
be your favorite place and way to eat and drink
design best personal computers
inspire athletes
organize information to make it accessible & useful
satisfying ownership experience
5. BRAND IDENTITY
In order to have an effective brand, you need your target audience to associate you whenever
they think of the benefit they are looking to receive
6. SPEAKER | AUTHOR | SUPER GOOD LOOKING
KANWAL KHIPPLE, CEO
@kkhipple
bit.ly/linkedinkk
2014 2015
7. BRANDS IMPACT TO EXPERIENCE
Ensuring experiences and how users interact with them exemplify our brand
10. ARCHITECTURE
How your sites are organized changes going forward
DYK classic publishing still has a place
for your custom portals
DYK modern sites (communication,
teams) are really improving but
customization is limited
DYK flat hierarchy directly simplifies
and impacts governance (i.e. group or
not to group?
11. TEAM SITES
How teams collaborate together
CONCISE & CONSISTENT NAVIGATION
What links should users have easy access to?
Should the links be top, bottom of the page or
accessible from some other UI element?
BRAND WITH PURPOSE
What colors are org-driven, content owner
configurable and content-driven?
USER INTERFACE
What type of content are we displaying and
how should users interact with the component?
12. COMMUNICATION SITES
Engaging with like-minded community members
CONCISE & CONSISTENT NAVIGATION
Is there specific content that should be
prioritized and accessible for everyone?
BRAND WITH PURPOSE
What color should we use to highlight key
content?
USER INTERFACE
Can we encourage others to contribute?
13. HUB SITES
Bringing teams together
NAVIGATION
What links are global to all associated sites?
STYLES
What color should we use to emphasis key hub
content?
USER INTERFACE
How should we highlight hub content
compared to site specific content?
14. BRANDING OPTIONS
How you customize determines your team’s
Levelofeffort
Flexibility
Office 365 Theming
Site Designs
Master Pages
JavaScript embed
15. GOVERNANCE
Ensuring you have a governance model in place to guide users what sites they should create
Company
Define this to be your primary
corporate color
+
Hub Site
Team site Communication siteTeam site
Division
Give each division an identity.
Leverage your secondary
corporate colors as starting
point.
Team
Start with the division color as
the emphasis color and then
using the color wheel, define the
team color.
17. NEW DESIGNS & TEMPLATES…
The ability to add custom themes, set a default site design, add additional site designs,
scope site designs to users, and more!
18. SITE SCRIPTS
Site scripts are JSON files that specify an ordered list of actions to run when creating the new
site. The actions are run in the order listed
Join Hub Site Set Regional Settings
19. ANATOMY OF A SITE SCRIPT
Site scripts are JSON files that specify an ordered list of actions to run when creating the new
site. The actions are run in the order listed.
Start an empty JSON markup
Declaring a JSON Schema
list of actions (array) that are applied to this site
Close off list of actions (array) that you are applied to the site
Define what version of the site script this is
Close of the JSON markup
20. ANATOMY OF A SITE SCRIPT
Site scripts are JSON files that specify an ordered list of actions to run when creating the new
site. The actions are run in the order listed.
Start an empty JSON object
Declaring a JSON Schema
list of actions (array) that are applied to this site
lets define our 1st action
The 1st action, apply Theme (verb) to this site
the Theme name is set to Contoso Explorers
Once an action is defined, close the action
Lets define our 2nd action
The 2nd action, Create SharePoint List (verb) to this site
the list name is set to Customer Tracking
The template type is set to 100 (GenericList)
run additional verbs (array) on the list
Lets define our 1st sub-action for the list
The 1st sub-action is set to Set Description for the list
The Description is set to List of Customers and Orders
Once a sub-action is defined, close the action
Lets define our 2nd sub-action for the list
The 2nd sub-action is set to Add SharePoint Field to the list
The Field Type is set to Text
The Display Name is set to Customer Name
Is the field Required is set to False
Should this field be added to the Default View is set to True
Once a sub-action is defined, close the action
21. ANATOMY OF A SITE SCRIPT
Site scripts are JSON files that specify an ordered list of actions to run when creating the new
site. The actions are run in the order listed.
Lets define our 3rd sub-action for the list
The 3rd sub-action is set to Add SharePoint Field to the list
The Field Type is set to Number
The Display Name is set to Requisition Total
Should this field be added to the Default View is set to True
Is the field Required is set to True
Once a sub-action is defined, close the action
Lets define our 4th sub-action for the list
The 4th sub-action is set to Add SharePoint Field to the list
The Field Type is set to User
The Display Name is set to Contact
Should this field be added to the Default View is set to True
Is the field Required is set to True
Once a sub-action is defined, close the action
Lets define our 5th sub-action for the list
The 4th sub-action is set to Add SharePoint Field to the list
The Field Type is set to Note
The Display Name is set to Meeting Notes
Is the field Required is set to True
Once a sub-action is defined, close the action
Close off the sub-actions (array) for this list
Close off changes to the list
Close off list of actions (array) that you are applied to the site
Define what version of the site script this is
Close of the JSON object
22. SITE SCRIPTS
what is possible with site scripts today
INFORMATION ARCHITECTURE
Create a new SharePoint list
- Add fields (CAML), delete fields
- Add and remove views
- Add remove content types
- Set column formatting to a field
- Set field customizer
Define a new site column
Define a new content type
- Add/remove site column
SECURITY
Add users (principals) to SharePoint Groups (only
supports Visitors, Members and Owner groups)
Manage guest access
NAVIGATION
Add a navigation link
Join a hub site
USER EXPERIENCE
Apply a theme
CONFIGURATOIN
Set a site logo
Set title and description
Install an add-in or solution
Register a SharePoint Framework extension
Trigger a flow
Configure regional settings
23. SITE DESIGNS
Site designs are like a template. They can be used each time a new site is created to apply a
consistent set of actions
Join Hub Site Set Regional Settings
24. SITE DESIGNS
Site designs are like a template. They can be used each time a new site is created to apply a
consistent set of actions
Join Hub Site Set Regional Settings
25. SITE DESIGNS
Use site designs and to automate provisioning new or existing modern SharePoint sites that
uses up to 30 site scripts
• Create/modify information architecture
(lists, libraries, site columns, content types,
and configuring other list settings)
• Updating the user experience (applying a
theme, setting a site logo, adding
navigation)
• Configuring your site settings (triggering
a Microsoft Flow, installing a deployed
solution from the app catalog, setting
regional settings for the site, setting
external sharing capability for the site)
• Scope site design to a select set of users
• Add additional business logic using
Microsoft Flow
TIP
For a complete list of
available actions and
their parameters, see
the JSON schema.
26. HOW SITE DESIGNS WORK
Site designs can be used each time a new site is created to apply a consistent set of actions
1. CHOOSE A DESIGN 2. EXECUTE SITE SCRIPT
TIP
Site designs can now
be applied to prev.
created modern site
collections.
27. SITE DESIGNS
Few items that you should be aware of when applying site designs
DYK Site scripts can be run again on the same
site after provisioning. This can only be done
programmatically.
DYK Site scripts are non-destructive, so when
they run again, they ensure that the site
matches the configuration in the script.
DYK limited to 30 cumulative actions. (across
one or more scripts that may be called in a
site design). This includes sub-actions.
DYK a site design can run multiple scripts. The
script IDs are passed in an array, and they run
in the order listed.
For example, if the site already has a list with the same
name that the site script is creating, the site script will only
add missing fields to the existing list.
28. SITE THEMES
Change the look of your site by applying a custom color palette
DYK The ability to define custom themes and make them available
to site owners. Themes are defined in a JSON schema that stores
color settings and related metadata for each theme.
DYK An online Theme Generator tool that you can use to define
new custom themes.
DYK A simplified set of default themes, with six light themes and
two dark themes presently available.
DYK An updated color palette, with 12 light colors and 6 dark
colors, as well as 16 supplementary themes.
DYK Control over which themes are available for use on pages
within your sites.
TIP
Today, this only
applies to limited use
cases
33. DEMO
Site scripts define one or more actions
1. CREATE SITE SCRIPT 2. CREATE SITE DESIGN 3. USE SITE DESIGN
34. 1. CREATE SITE SCRIPT
Site scripts define one or more actions
1. Download SharePoint Online
Management Shell (PowerShell)
2. Use SharePoint Online PowerShell to connect
to your SharePoint tenant.
3. Create and assign the JSON that
describes the new script to a variable
35. 1. CREATE SITE SCRIPT
Site scripts define one or more actions
4. Each site script must be registered in
SharePoint so that it is available to use.
5. Capture Site Script ID as you will need it for
creating Site Design
5. Repeat for each site script
REPEAT
STEPS 1-5
36. 2. CREATE SITE DESIGN
Site designs can be used each time a new site is created to apply a consistent set of actions
1. Create Site Design with associated
Site Scripts
37. 3. USE SITE DESIGN
Users can leverage Site Designs when creating new sites
1. Use Site Design when creating sites 2. Site Script kicks off when visiting
the site for the 1st time
39. REFERENCE MULTIPLE SITE SCRIPTS
Calling multiple site scripts can help with a component-based site design model
i.e. “site script id 1”, “site script id 2”
Site Script 1
Site Script 2
40. APPLY COMPANY THEME
Calling multiple site scripts can help with a component-based site design model
i.e. “site script id 1”, “site script id 2”
Site Script 1
Site Script 2
Site Script 3
41. UPDATE EXISTING / CLASSIC SITE
Already have a site but now want to apply site design to it? Leverage the Invoke-
SPOSiteDesign on each
Invoke-SPOSiteDesign -Identity ba9c058e-0575-4db5-b9aa-2dc5dbae996d -WebUrl "https://khippledev.sharepoint.com/sites/201807181450”
42. CREATIVE DESIGN TOOLKIT
What tools do you need to accomplish unique designs in modern SharePoint development
https://github.com/SharePoint/sp-dev-site-scripts/tree/master/samples
SITE DESIGNS MICROSOFT FLOW
Placement of controls
Adding triggers to changes to the
site
Connecting with other platforms
43. BRANDING
TIP keep customizations minimal to colors (CSS-driven)
TIP leverage Site Designs to apply font color & background color
TIP no need to build a custom master page
TIP works well for team sites
Bringing some character to your team sites
44. CREATIVE DESIGN
TIP leverage modern SharePoint UX rather than build custom
TIP leverage Site Designs to apply font color & background color
TIP limit custom fonts to Headings
TIP no need to build a custom master page
TIP leverage for your intranet
Bringing your brand to life
45. SHAREPOINT SITE DESIGNER BETA
Community built user interface to create site designs https://www.sitedesigner.io/#/
47. UNIVERSAL SEARCH
Search will be removed from the site header to the Office 365 Suite bar
Current suite header
Coming soon suite header with universal search
49. ACCENT COLORS
More use of accent color for more visual energy
New theme
color application via
background
colors provide visual
interest and organization
Out-of-the-box themes
provide 120 theme color
combination options
Shy header creates more
room for content
consumption
51. SHAREPOINT DESIGN GUIDANCE
Design beautiful and performant sites, pages, and web parts with SharePoint in Office 365
aka.ms/spdesignguidance
Inspiration and advice for
site owners, authors, developers and
designers on creating beautiful,
accessible sites, pages, web parts and apps.
Get the most out of SharePoint
sites and pages, learn about
customization and setting up sites for
success.
Leverage the power of Office UI Fabric and
the SharePoint Framework to make it easy to
get started quickly in creating your next web
part.
52. My twitter handle is @kkhipple and I work at
Thank You!
Organizers, Sponsors and You for making this possible.
75+ SharePoint Presentations @ Slideshare.Net/kkhipple
When to Use What Whitepaper @ WhentoUseWhat.com
Intranets w/ Office 365 Whitepaper @ Office365Intranets.com
External Sharing w/ Office 365 Whitepaper @ Office365Extranets.com
and more!
Message Me On LinkedIn or Email Kanwal@Khipple.com
SPEAKER | AUTHOR | SUPER GOOD LOOKING
Notes de l'éditeur
SharePoint Online Site Design and Site Scripts: The New Hotness
SharePoint Modern development patterns continue to evolve. Site Designs and Site Scripts are the latest in assisting you to automate the provisioning of new or existing modern SharePoint sites using customizations that you create. This session will go into describing how you can use site designs and site scripts to provide custom configurations to apply when new sites are created as well as how to apply them to existing sites as well.
Your brand needs to be synonymous with everything that your employees do and every interaction they have with employees, customers as well as experiences
How do we build experiences on platforms without impacting the brand?
Leverage Azure AD capabilities and make the sign-on experience seamless
Leverage Azure AD capabilities and make the sign-on experience seamless
When people in your organization create new SharePoint sites, you often need to ensure some level of consistency. For example, you may need proper branding and theming applied to each new site. You may also have detailed site provisioning scripts, such as using the PnP provisioning engine, that need to be applied each time a new site is created.
Site designs are like a template. They can be used each time a new site is created to apply a consistent set of actions. They can also be applied to existing modern sites (group-connected Team and Communication sites). Most actions typically affect the site itself, such as setting the theme or creating lists. But a site design can also include other actions, such as recording the new site URL to a log, or sending a tweet.
You create site designs and register them in SharePoint to one of the modern template sites: the Team site or the Communication site.
Get started creating site designs and site scripts
Create site designs to provide reusable lists, themes, layouts, pages, or custom actions so that your users can quickly build new SharePoint sites with the features they need.https://github.com/SharePoint/sp-dev-docs/blob/master/docs/declarative-customization/get-started-create-site-design.md
Add a new site design by using the Add-SPOSiteScript cmdlet- Title "Create customer tracking list“- Content $site_script
- Description "Create list to track info"
Leverage Azure AD capabilities and make the sign-on experience seamless
Leverage Azure AD capabilities and make the sign-on experience seamless
https://aka.ms/MicrosoftSearch
Site branding
SharePoint theming documentation: aka.ms/spsitetheming
Theme generator: aka.ms/spthemegenerator
Designing for accessibility: : aka.ms/fabric-toolkit and aka.ms/fabric-sketch-toolkit
Modern SharePoint PnP starter kit: github.com/SharePoint/sp-starter-kit
Branding classic SharePoint: aka.ms/brandingspclassic
Hub sites: aka.ms/sphubsites
Site scripts & site designs
Site design and site script overview: aka.ms/spsitedesigns
Site script GitHub repo: aka.ms/spsitescriptsamples
Recent community posts
https://developer.microsoft.com/en-us/office/blogs/site-scripts-site-designs-summer-2018-update/
https://techcommunity.microsoft.com/t5/Microsoft-SharePoint-Blog/What-s-new-for-your-intranet-in-Office-365/ba-p/194168
https://techcommunity.microsoft.com/t5/Microsoft-SharePoint-Blog/Branding-SharePoint-The-New-Normal/ba-p/241855