Beyond the SXA Toolbox

A presentation at Sitecore Symposium in October 2018 in Orlando, FL, USA by Mark van Aalst

Slide 1

Slide 1

Beyond the SXA toolbox Presented by: Adam Najmanowicz Mark van Aalst #SitecoreSYM @adamnaj @markvanaalst © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 1

Slide 2

Slide 2

Before we start… a little quiz #SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 2

Slide 3

Slide 3

#SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 3

Slide 4

Slide 4

#SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 4

Slide 5

Slide 5

#SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 5

Slide 6

Slide 6

#SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 6

Slide 7

Slide 7

#SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 7

Slide 8

Slide 8

#SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 8

Slide 9

Slide 9

What is SXA? A framework focusing on digital platform needs. Mobile first Brand consistency • Themes Flexible renderings • Rendering variants • Composite renderings • Meta renderings Layout elasticity • Responsive web • Grid based layout framework #SitecoreSYM • Creative exchange Multi-tenant / Multi-site Faceted Search OOTB Separation of presentation from content Architected with Habitat best practices © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 9

Slide 10

Slide 10

Evolution of SXA Initial release OCTOBER 2016 AUGUST 2016 APRIL 2017 DECEMBER 2016 Wireframe improvements Facet support #SitecoreSYM Creative Exchange Live Site Management Tools Basic theme re-architecture Azure Web Apps Support Creative Exchange improvements JUNE 2017 JSON Data Modelling Grid Framework Upgrade Tool 11 © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

Slide 11

Slide 11

Evolution of SXA Delegated Areas Presentation and Content sharing Search improvements Rendering Variant improvements DECEMBER 2017 OCTOBER 2017 OCTOBER 2018 MARCH 2018 Component Cloning Snippets Custom Views Phase 1 WCAG 2.0 compliance New Wireframing experience UX Improvements #SitecoreSYM 12 © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

Slide 12

Slide 12

How does SXA help your projects? SITECORE IMPLEMENTATION Traditional Sitecore development Strong foundation 70% Implementation fully code-based Code implementation Partners created their own toolkits to speed up development Site changes often require code deployments 30% #SitecoreSYM Sitecore Experience Platform (SXP) 13 © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

Slide 13

Slide 13

How does SXA help your projects? (cont’d) SITECORE IMPLEMENTATION SXA Sitecore development 20% Code implementation Strong foundation and full supported, tested framework Ready to use components for frequent used functionality 50% Additional functionality like multi-site, theming Sitecore Experience Accelerator (SXA) Sitecore developers can focus on building vertical specific features 30% #SitecoreSYM Sitecore Experience Platform (SXP) 14 © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

Slide 14

Slide 14

What is in the 50% added by SXA SITECORE IMPLEMENTATION Multi-tenant and multi-site capabilities 20% Code implementation Rich set of components that can be configured Enhanced user experience with drag and drop Content entry and frontend development in parallel 50% Theming and live editing of theme Sitecore Experience Accelerator (SXA) Share content and presentation across sites Additional functionality like multi-site, theming Headless (JSON) output #SitecoreSYM 30% Sitecore Experience Platform (SXP) 15 © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners.

Slide 15

Slide 15

SXA Developer Experience Consistent structure across all SXA projects Easy to adopt Mundane boilerplate problem solved in the platform Easy upgrade Focus on exciting challenges Configuration over code less deployments -> move faster Less reliance on IT #SitecoreSYM

Slide 16

Slide 16

Level of customization Custom styles Use custom CSS classes either by using Creative Exchange or register them manual in SXA. Apply the CSS in your theme. Rendering Variants Apply rendering variants on your components to define the HTML output and change the way the components render visually. #SitecoreSYM Clone/Add custom views Want to have more control of the component and the way it renders? Clone your component and use a different view to render the HTML. Custom Components Want to have full control over your components. Create your own custom component and register it in the SXA toolbox © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 20

Slide 17

Slide 17

Demo #SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 21

Slide 18

Slide 18

Level of customization Clone/Add custom views Custom styles Use custom CSS classes either by using Creative Exchange or register them manual in SXA. Apply the CSS in your theme. Want to have more control of the component and the way it renders? Clone your component and use a different view to render the HTML. Custom Components Rendering Variants Apply rendering variants on your components to define the HTML output and change the way the components render visually. #SitecoreSYM Want to have full control over your components. Create your own custom component and register it in the SXA toolbox © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 22

Slide 19

Slide 19

Level of customization Custom Components Want to have full control over your components. Create your own custom component and register it in the SXA toolbox #SitecoreSYM

© 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. Normal Sitecore Development 23

Slide 20

Slide 20

What’s new in SXA 1.8 #SitecoreSYM © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 24

Slide 21

Slide 21

Accessibility Compliance - Phase 1 Accessibility improvements are a continuous effort in SXA Ability to navigate complex components with keyboard (tabs and arrows) Focus trapping for overlays/lightboxes Tab order – skipping for content that is not visible on the page “Skip to navigation/content” meta component. The effort will continue with future releases of SXA. #SitecoreSYM

Slide 22

Slide 22

Bring your own views! Set alternatives to the platform CSHTML views and customize them on a per-site basis. Use your own custom HTML and still leverage all the SXA functionality Views are matched by relative path can be substituted selectively. If a replacement is not found, the default .cshtml file is used. #SitecoreSYM

Slide 23

Slide 23

Cross-site linking Use other sites (including non-SXA sites) as link targets SXA handles link resolution including using the correct hostname Site administrator can define selectively if a site is “linkable” from other sites Allow users of each site to link to other sites in tenant or all “linkable” sites in the instance. #SitecoreSYM

Slide 24

Slide 24

New Wireframe Theme and Wireframe Mode New wireframe theme Introducing View Mode (user setting) Horizon Compliant #SitecoreSYM

Slide 25

Slide 25

Reorganize components in toolbox Change the order and categorization of the toolbox per-site #SitecoreSYM

Slide 26

Slide 26

Bootstrap 4 support #SitecoreSYM

Slide 27

Slide 27

Rendering Variant Component Renderer Use components inside a rendering variant #SitecoreSYM

Slide 28

Slide 28

Bulk module installation Install new feature in multiples sites at once #SitecoreSYM

Slide 29

Slide 29

Link fields best practices validation Automated recommendations for best practices #SitecoreSYM

Slide 30

Slide 30

FOR DISCUSSION PURPOSES ONLY. Sitecore Confidential and Proprietary. © 2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. @adamnaj #SitecoreSYM @markvanaalst © 2001-2018 Sitecore Corporation A/S. All rights reserved. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand and product names are the property of their respective owners. 34