A presentation at Sitecore Symposium in in Orlando, FL, USA by Mark van Aalst
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
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
#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
#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
#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
#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
#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
#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
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
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.
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.
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.
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.
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.
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
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
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
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
© 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
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
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
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
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
New Wireframe Theme and Wireframe Mode New wireframe theme Introducing View Mode (user setting) Horizon Compliant #SitecoreSYM
Reorganize components in toolbox Change the order and categorization of the toolbox per-site #SitecoreSYM
Bootstrap 4 support #SitecoreSYM
Rendering Variant Component Renderer Use components inside a rendering variant #SitecoreSYM
Bulk module installation Install new feature in multiples sites at once #SitecoreSYM
Link fields best practices validation Automated recommendations for best practices #SitecoreSYM
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
How to leverage and customize SXA. Go beyond the dragging and dropping of components. Find out how to build your own, create variants or apply different vieuws and styles
Here’s what was said about this presentation on social media.
for free. You
can too.