Communication sites and Hub sites are transforming how teams are leveraging SharePoint. As your companies SharePoint Sheppard, you want to design and build an effective strategy to implement your company’s brand as well as provide other teams flexibility to make it their own. Attend this demo-intensive session, as Kanwal walks through examples on how to improve the look and feel of communication sites via themes as well as how they compliment your brand strategy.

1. Designing a Practical Hub Sites and Communication Sites
Communication sites and Hub sites are transforming how teams are leveraging SharePoint.
As your companies SharePoint Sheppard, you want to design and build an effective
strategy to implement your company’s brand as well as provide other teams flexibility to
make it their own.
Presented by Kanwal Khipple (@kkhipple)
#TSPUG #TSPBUG
July 18th, 2018

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 STRATEGY
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 TECHNOLOGY
Ensuring experiences and how users interact with them exemplify our brand

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

9. ARCHITECTURE
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

11. Services
YOUR DIGITAL WORKPLACE
Contains all the services, tools and integration that make your day-to-day easier
Integrations
Tools

12. TEAM SITES
How teams collaborate together
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?
STYLES
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?

13. COMMUNICATION SITES
Engaging with like-minded community members
NAVIGATION
Is there specific content that should be
prioritized?
STYLES
What color should we use to highlight key
content?
USER INTERFACE
Can we encourage others to contribute?

14. 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?

15. ARCHITECTURE
SITE DESIGNS + DEMOS
PRACTICAL TIPS
What we are going to cover today

16. SITE DESIGNS
Use site designs and site scripts to automate provisioning new or existing modern SharePoint
sites that use your own custom configurations.
AVAILABLE ACTIONS
• 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)
TIP
For a complete list of
available actions and
their parameters, see
the JSON schema.

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

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

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

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

21. SITE DESIGNS
what is possible with site designs 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

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

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

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

25. THEMES
Limited customizations for creating custom themes
Source: https://laurakokkarinen.com/how-to-create-a-multicolored-theme-for-a-modern-sharepoint-online-site/

26. DEMO
Site scripts define one or more actions
1. CREATE SITE SCRIPT 2. CREATE SITE DESIGN 3. USE SITE DESIGN

27. ARCHITECTURE
SITE DESIGNS + DEMOS
PRACTICAL TIPS
What we are going to cover today

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

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

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

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

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

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

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

35. UPDATE EXISTING 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”

36. CREATIVE DESIGN TOOLKIT
What tools do you need to accomplish unique designs in modern SharePoint development
SITE DESIGNS MICROSOFT FLOW
Placement of controls
Adding triggers to changes to the
site
Connecting with other systems

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

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

39. APPLICATION CUSTOMIZER

40. BRANDING ROADMAP
What’s on the roadmap

41. ADD RICH COLORS TO THE HUB SITE HEADER
you will now have choices beyond the color white. It’ll be easier and more flexible to adhere to your
preferred company theme and brand colors across more aspects of the sites and pages
SOON

42. SITE DESIGNS & SCRIPTS

43. My twitter handle is @kkhipple and I work at
Thank You!
Organizers, Sponsors and You for making this possible.
50+ 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