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 customization 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.

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)
SharePoint Saturday
New England
#spsne
October 5th, 2019

2. SUCCESS IS EARNED NOT GIVEN.

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

8. BRANDING STRATEGY
SITE DESIGNS
PRACTICAL TIPS
What we are going to cover today

9. BRANDING STRATEGY
SITE DESIGNS
PRACTICAL TIPS
What we are going to cover today

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.

16. BRANDING STRATEGY
SITE DESIGNS + DEMOS
PRACTICAL TIPS
What we are going to cover today

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

29. THEMES
Limited customizations for creating custom themes

30. THEMES
Limited customizations for creating custom themes

31. THEME GENERATOR
Change the look of your site by applying a custom color palette

32. BRANDING STRATEGY
SITE DESIGNS + DEMOS
PRACTICAL TIPS
What we are going to cover today

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

38. VIEW SITE SCRIPT
Use Get-SPOSiteScript -Identity <site script id>

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/#/

46. BRANDING STRATEGY
SITE DESIGNS + DEMOS
PRACTICAL TIPS
What we are going to cover today

47. SITE DESIGN USE CASES
What are the benefits and uses of leveraging site designs
LIFECYCLE GOVERNANCE

48. WORLD CLOCK & UPDATES TO WEATHER WEB PART
SharePoint authors will be able to add the World Clock web part. In addition, the Weather web
part has also been updated with multiple cities.
Roadmap ID: 53194; demo
World Clock web part Weather web part

49. CUSTOM QUERY FILTERING ON HIGHLIGHTED CONTENT
SharePoint authors will be able to filter content (i.e. documents) using custom queries that leverage
CAML and KQL query texts. In addition, queries can be combined using AND, OR, and NOT operators.
Roadmap ID: 53194; demo
Query text
Custom Query option

50. EMAIL ROLL-UPS OF MISSED NEWS POSTS
SharePoint viewers will be able to view News content they may have missed, rolled up as e-
mails. Users can unsubscribe from this feature, as they like.
Roadmap ID: 53194; demo

51. UNIVERSAL SEARCH
Search will be removed from the site header to the Office 365 Suite bar
Suite header with universal search

52. SECTION BACKGROUND
ability to change the background color

53. 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

54. FLUENT USER EXPERIENCE
A preview of Fluent design language

55. 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.

56. 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

57. Thank you sponsors!