This document discusses how Sitecore Experience Accelerator (SXA) can be customized beyond out-of-the-box functionality. It provides examples of extending search features like pagination and search scopes. Custom search tokens and variant definitions are also demonstrated. The document concludes by discussing how SXA's new Scriban templating engine enables additional customizations.

1. Presented by:
Gert Gullentops
@gatagordo
Date:
November 6, 2019
SXA beyond the box
Real-life examples to show you are not
bound to "out-of-the-box”

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

3. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
Web development teams use SXA to speed up the
production of websites and to reuse components,
layouts, and templates across a variety of sites.
• Add-on framework
• Lots of nice features in the box
• More than pre-build renderings and a toolkit
Sitecore Experience Accelerator
Sitecore + SXA

4. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of
Sitecore Corporation A/S. All other brand names are the property of their respective owners.
#SitecoreSYM
Am I bound
to the “box”?
What if I want something
that is not out-of-the-
box?

5. #SitecoreSYM© 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
“The goal of any SXA project is not to write zero code,
or leverage the OOTB components as much as possible.
The goal is to build a site that can be easily managed
by content authors and will be intuitive and
consistent when authoring.”
David San Filippo
Sitecore MVP – mtelligent

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

7. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Change the look & feel of OOTB (or custom) components
Variants & styles
• Change the css – e.g. color
 STYLES
• Change the html - e.g. table vs list, extra fields …
 VARIANTS

8. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Limit # to 10
• Clone component
• Use rules engine
Provide a preview
Best practices
Variants
https://doc.sitecore.com/developers/sxa/19/sitecore-experience-accelerator/en/best-practices.html

9. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Possible per site (1.8)
Custom html view
Custom html view
https://doc.sitecore.com/developers/sxa/19/siteco
re-experience-accelerator/en/customize-
rendering-html-per-site.html

10. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Change template, view, variants…
Copy and customize
a rendering
Copy & customize a rendering
https://doc.sitecore.com/developers/sxa/19/sitecore-
experience-accelerator/en/copy-and-customize-a-
rendering.html

11. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Optional: Re-use SXA
features the way you want
• No limits:
- Integration with back-end systems
- Full-react applications
- …
Build custom
(+ use SXA features)
Full custom components

12. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of
Sitecore Corporation A/S. All other brand names are the property of their respective owners.
#SitecoreSYM
Am I bound
to the “box”?
Creating new features

13. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Out-of-the-box solution with SXA pieces?
• Proof of concept
• Verify what really is needed – ROI
Talk to your customer
about the requirements
SXA decision tree to create a new rendering
https://twitter.com/adamnaj/status/1098491348045520897

14. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of
Sitecore Corporation A/S. All other brand names are the property of their respective owners.
#SitecoreSYM
SXA beyond
the box

15. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• Extend search tokens
• Custom variants
• Search features
• External data
• Rules engine
• Data tokens Scriban
Examples

16. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks
of Sitecore Corporation A/S. All other brand names are the property of their respective owners.#SitecoreSYM
The case:
Fluxys
https://www.fluxys.com

17. Overview page with facets

18. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• Out-of-the box search features & components
• Custom component reusing search scope and pagination
• Custom search token to match page item tags
Overview page with facets
https://ggullentops.blogspot.com/2018/07/sitecore-sxa-search-overview-pages.html

19. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Rendering parameters: IPaginable and IPagination
• Rendering item: IsPaginationEnabledRendering true
Sitecore
Re-using search features: Pagination
https://ggullentops.blogspot.com/2018/12/sxa-pagination-on-custom-component.html

20. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• VariantsRepository.FillBaseProperties 
VariantsRenderingModel
- IListPagination
• PaginableController
- PaginationConfiguration
- OnActionExecuting
Code
Re-using search features: Pagination
https://ggullentops.blogspot.com/2018/12/sxa-pagination-on-custom-component.html

21. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Limit search results based on conditions
• Stored in
/sitecore/content/{Tenant}/{Site}/Settings/Scop
es/
• “Scope” is a rendering parameter
_Page Search Scope
• (re-)use configurable queries
Search scope
Re-using search features: Scope
https://ggullentops.blogspot.com/2019/10/sitecore-sxa-
search-scope-custom-component.html

22. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Re-using search features: Scope

23. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
SXA search tokens

24. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• ResolveSearchQueryTokensProcessor
• Loop over the SearchStringModel objects 
each SearchStringModel defines a part
of the query and has:
- a type
- a value
- an operation
• Create a model for the search processing
Create your own token
Custom SXA search token

25. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
+custom:fieldName|fieldValue
Custom SXA search token

26. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Custom SXA search token
https://ggullentops.blogspot.com/2019/01/extending-sxa-search-query-tokens.html

27. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• Sitecore.XA.Feature.Search.Pipelines.ProcessSearchItems.PrepareSearchItems
<processSearchItems> pipeline
New in SXA 1.9
• Cast Item  SearchItem

28. Spotlights: Related item list

29. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Custom item query
- Page list with custom logic
• Custom variant
- Translated text
Items with the same tag
Related items list

30. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
https://ggullentops.blogspot.com/2017/04/sitecore-sxa-pagelist-item-query.html
Pagelist with item queries
Pagelist with custom datasource

31. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
https://www.sitecorenutsbolts.net/2018/03/16/Sitecore-SXA-Custom-PageList-data-sources/
Pagelist with custom datasources
Pagelist with custom datasource

32. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• Implement interface Sitecore.Buckets.FieldTypes.IDatasource
• Write unit tests ;)
How?
Pagelist with custom datasource
https://ggullentops.blogspot.com/2019/04/unit-testing-sitecore-index-queries-91.html

33. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
Custom variant definition to move
translation to a dictionary implementation
What if you have texts
in your variants?
Custom variant definition
https://ggullentops.blogspot.com/2019/04/sitecore-
sxa-custom-rendering-variant-translation.html

34. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• Template (with SXA base templates)
/sitecore/templates/Foundation/Experience Accelerator/Rendering
Variants/VariantText
• Insert options
/sitecore/system/Settings/Rules/Insert Options/Rules
Sitecore
Custom variant definition

35. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• Model
- Sitecore.XA.Foundation.RenderingVariants.Fields.RenderingVariantFieldBase
- ( VariantText )
• Parse processor
- Sitecore.XA.Foundation.Variants.Abstractions.Pipelines.ParseVariantFields.ParseVariantFieldProcess
or
o SupportedTemplateId
o TranslateField : create model from ParseVariantFieldArgs.VariantItem
Code
Custom variant definition

36. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
• Render processor
Sitecore.XA.Foundation.Variants.Abstractions.Pipelines.RenderVariantField.RenderRenderingVariantFieldProcessor
Custom variant definition

37. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• <parseVariantFields>
• <renderVariantField>
Configure processors
in pipelines
Custom variant definition
https://ggullentops.blogspot.com/2019/04/sitecore-
sxa-custom-rendering-variant-translation.html

38. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Multisize/multicolor tiles

39. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Multiple tiles
- Editor friendly
- No requirement for reuse
• Background colors
- Selected from value set
Requirements
Multisize/multicolor tiles

40. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• Tokens as variant items : $id - $name - …
• Tokens in data attributes : $(fieldName)
- Issues: only for text field - extensible by overwriting SXA code
SXA tokens
Multicolor tiles
https://doc.sitecore.com/developers/sxa/19/sitecore-experience-accelerator/en/create-a-custom-token-for-a-rendering-
variant.html
https://ggullentops.blogspot.com/2018/10/using-tokens-in-sitecore-sxa-variant.html

41. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of
Sitecore Corporation A/S. All other brand names are the property of their respective owners.
#SitecoreSYM
Scriban
New in SXA 9.3
https://github.com/lunet-io/scriban

42. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• New variant in SXA 9.3
• Fast, powerful and lightweight text
templating engine
• Documentation:
https://github.com/lunet-io/scriban
• SXA extensions available
• Other variants still available (and relevant)
• Nvelocity is gone 
Scriban
https://ggullentops.blogspot.com/2019/11/sitecore-sxa-
93-scriban.html

43. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• <div class=“{{ sc_follow i_item “Color” | sc_raw “Title” }}"> …
</div>
• {{ i_item.Color.Title }} {{ i_item.Color.Title.raw }}
• Functions: sc_execute sc_field sc_link …
• Items: i_page i_page.id i_item.parent …
• Objects: o_language …
• ...
Scriban: SXA extensions

44. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Dictionary - SITENAME
• Site specific Dictionary
• /system/Dictionary is fallback
• Scriban: {{ sc_translate “Key" }}
Scriban: SXA dictionary

45. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• Context function
- IGenerateScribanContextProcessor
- <generateScribanContext> pipeline
• Item member:
- GetScribanItemMember
- <getScribanItemMembers> pipeline
Can we extend this?
Scriban: Beyond the box
https://ggullentops.blogspot.com/2019/11/custom-sxa-scriban-extensions.html

46. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Scriban: Context function
{{ sc_meow “Key” }}

47. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. #SitecoreSYM
Scriban: Item member
{{ i_item.updated }}
{{ i_page.updated }}
…

48. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of
Sitecore Corporation A/S. All other brand names are the property of their respective owners.
#SitecoreSYM
Extra tips
& tricks

49. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
public class CustomModel: VariantsRenderingModel
{
public string CustomProperty { get; set; }
public CustomClass CustomClassProperty { get;
set; }
}
External data & the Model variant
External data in SXA components

50. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Variants
- Model
- Model Iterator (1.9)
• Scriban
- o_model
External data and 9.3
External data in SXA 9.3 components
https://ggullentops.blogspot.com/2019/03/external-model-
data-SXA-variant-Sitecore.html

51. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• In variants
- E.g., hide fields/sections when…
o Field is empty
o Template is …
• Avoid changing SXA templates
- Insert options
- Save actions
SXA & the rules engine
Rules engine

52. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
• Remove empty containers/placeholders (personalization)
• Select Page Design (new in 1.9)
Order of precedence = Page level – Rules – Templates
• Scriban “sc_evaluate” – or “if” (new in 9.3)
Rules engine
SXA & the rules engine
https://ggullentops.blogspot.com/2018/08/sitecore-sxa-rules-engine-containers-partial-
designs.html
https://doc.sitecore.com/developers/sxa/19/sitecore-experience-accelerator/en/use-a-rule-to-select-a-page-design-for-a-page.html

53. What did we learn today?

54. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• SXA is as customizable as Sitecore
• SXA will accelerate your development
(but take the time to learn how to do it
right)
• SXA is the platform – you need to make
the results great
Are we bound by the box?
Lessons learned
Use SXA – and think beyond the box

55. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• Sitecore MVP 2017-2018-2019
• Sitecore dinosaur @ The Reference
• @gatagordo
• https://sitecore.stackexchange.com
• Sitecore Slack
Gert “Gatogordo” Gullentops
Thank you

56. #SitecoreSYM © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered
trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective
owners.
• https://ggullentops.blogspot.com/20
19/11/sxa-beyond-box-sitecore-
symposium-2019.html
• @gatagordo
• https://sitecore.stackexchange.com
• Sitecore Slack
Gert “Gatogordo” Gullentops
Thank you

57. #SitecoreSYM© 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.
Share your feedback now
Please take a moment to
review this session in the
Symposium mobile app:
Schedule ‣ Session ‣ Survey
Thank you!

58. Thank you
FOR DISCUSSION PURPOSES ONLY.
Sitecore Confidential and Proprietary. ©2019 Sitecore
Corporation A/S. Sitecore® and Own the Experience® are
registered trademarks of Sitecore Corporation A/S. All other
brand names are the property of their respective owners.