Understanding XML in Sitecore Renderings Field

It is a copy of my article initially placed here to keep all things in one place.

Sitecore has many interfaces to work with presentation. You can change it via Experience Editor, or via Layout>Details dialog from Content Editor. And you are able to do all that you want. But sometimes, it is not enogh. Sometimes, when you have too many renderings on your page that it is much easier to look inside XML, in which presentation details are serialized, and do everything there. Caution: It is not recommended and you should not touch this XML directly unless you are not 100% sure what are you doing.

Let's dive deep and understand, what is present in that XML. For example, I will take a piece of the presentation of the Habitat home item.

<r xmlns:p="p"
    xmlns:s="s" p:p="1">
    <d id="{FE5D7FDF-89C0-4D99-9AA3-B5FBD009C9F3}">
        <r uid="{96440B7A-F411-4281-B690-302C5468E355}" p:before="*" s:ds="{658E89F6-3F0C-4072-88CA-50CE81757A9D}" s:id="{5A21C781-8E74-4DD0-8261-8CCDA1BF0454}" s:par="GridParameters=%7B113BEF7C-97E6-46CA-8CF3-916F7FAA8DE2%7D&amp;Styles=%7B5F1937B9-3A84-4F4B-A96E-C60419A06667%7D&amp;Navigation=%7BF5A400A0-C183-4A46-892A-F4DE38A5ECDE%7D&amp;Transition=%7BD4B706CC-7EEC-4DB9-A87D-123B29803490%7D&amp;Timeout=2000&amp;PauseOnHover=1&amp;Reset Caching Options&amp;RenderingIdentifier&amp;DynamicPlaceholderId=13" s:ph="/main/sxa-content-container/container-1">
            <rls>
                <ruleset>
                    <rule uid="{B3EE3027-9A67-4696-800B-2F7B4D619DD4}" s:name="Foodie">
                        <conditions>
                            <or uid="58709978E4BB4AF7A9814D1CD8EF7EC6">
                                <or uid="4F0B55B8EAA94AE284B2DE656A69F16B">
                                    <condition uid="73058D8C9428448DACD02E3D6D630283" s:id="{A0CDF81A-7727-4418-B331-E1AEC80EFAB0}" s:ExpectedAncestorTaxonId="{67BA62FE-7F1A-4BA1-B244-79160A0893C4}" s:CustomFieldId="{336BA862-E974-4CD6-BE4D-4BFDD78994E1}" />
                                    <condition uid="A64E09ABEEB7406AA29207D109D92D5E" s:id="{E00DB4F0-B206-4544-AD90-25D201CFB62C}" s:ProfileName="Topic Interest Category" s:PatternName="Cooking" />
                                </or>
                                <condition uid="21A4C1FE5B7145069C0B322AD2936B82" s:id="{08A70C4F-93B5-409E-9967-3892AAEB3BC2}" s:PatternList="{B7A02EED-A729-42B0-978B-2C6EF479FC8F}" />
                            </or>
                        </conditions>
                        <actions>
                            <action uid="EB19DB65DA0A4273B21828B383D0B574" s:id="{0F3C6BEC-E56B-4875-93D7-2846A75881D2}" s:DataSource="{C531430C-246D-4AC0-86D2-61B834F07269}" />
                        </actions>
                    </rule>
                </ruleset>
            </rls>
        </r>
        <r uid="{C3B8C2EE-F9DC-44C4-8837-93681B962081}" p:after="r[@uid='{96440B7A-F411-4281-B690-302C5468E355}']" s:ds="{874ED455-AF6F-438D-BEA8-1916B7FAB5BD}" s:id="{00E2C7CF-2247-4596-B878-E6BB3850A77F}" s:par="DynamicPlaceholderId=12&amp;GridParameters=%7B113BEF7C-97E6-46CA-8CF3-916F7FAA8DE2%7D" s:ph="/main/sxa-content-container/container-1/container-11" />
        <r uid="{1C0F3249-32A1-475D-8E69-8B2111ED267D}" p:after="r[@uid='{C3B8C2EE-F9DC-44C4-8837-93681B962081}']" s:ds="local:/Data/CTA - The Perfect Home Theater" s:id="{51C13F03-8364-4F61-B860-2EC6CA7439B3}" s:par="DynamicPlaceholderId=3&amp;Caching=0%7C0%7C0%7C0%7C0%7C0%7C0%7C0&amp;FieldNames=%7BB8DCE263-F093-4EF3-9B53-B4A4B919A337%7D" s:ph="/main/sxa-content-container/container-1/container-10"/>
        <r uid="{C03747C0-B0DC-467F-AA8D-126A4FFFABE9}" p:after="r[@uid='{6B1C256F-3488-4908-BB96-B7746E471A36}']" s:ds="" s:id="{896A2C68-1362-4E88-8BA0-1805AE6D4837}" s:par="Styles=%7B37959667-EE0C-4E0F-8A37-5687BB143510%7D&amp;GridParameters=%7B113BEF7C-97E6-46CA-8CF3-916F7FAA8DE2%7D&amp;DynamicPlaceholderId=9" s:ph="/main/sxa-content-container/container-1" />
        <r uid="{81BDD83F-35B1-49D1-9B7C-8C0BE1189F83}" s:ds="" s:id="{896A2C68-1362-4E88-8BA0-1805AE6D4837}" s:par="Styles=%7BB32CF8A3-6E9B-4D8B-992C-91B8C667FFFA%7D%7C%7B9CB76B6C-2B77-4728-8508-CF7041C7B69C%7D&amp;GridParameters=%7B113BEF7C-97E6-46CA-8CF3-916F7FAA8DE2%7D&amp;DynamicPlaceholderId=11" s:ph="/main/sxa-content-container/container-1" />
    </d>
</r>

Let's go one by one in the tree:

• Parent r element — root element of presentation definition
• d element — d stays for device. It could have next attributes:
  • id — identifier of device. This valued corresponds to ID of Device item.
  • l — identifier of the layout. This value corresponds to the ID of the Layout item. For our case attribute is absent, as it was configured on __Standard Values item.
• r element — rendering definition. It could have next attributes:
  • uid — a unique identifier. It is a uniquely generated ID, which doesn't correspond to anything in the content tree. UID values are used for the generation of placeholder keys when Dynamic Placeholders are used. When you have an identifier in the placeholder key, you can find in which element this placeholder is present by looking for uid.
  • p:before — attribute that is used for ordering of rendering on page.
  • p:after — similar to p:before. It is used to set order of elements on a page.
  • s:ds — datasource of the element. It corresponds to the ID of the item that was selected as datasource for this rendering
  • s:par — rendering parameters. It is a serialized dictionary of key-value pairs divided by ampersand between pairs and with an equal sign between key and value. It also contains the caching configuration of rendering. (It looks like in old Sitecore versions, caching was serialized by other attributes, like cac, vbd, vbdev, vbl, vbp, vbqs, vbu, ciu. But they are not used anymore)
  • s:ph — placeholder, where rendering should be inserted.
  • s:pt — personalization test ID if it is present of the rendering
• rls and ruleset — containers for configuration rules on rendering. ruleset has one attribute
  • s:pet — equals true, when you personalize not only data source, but also change rendering. It equals false or absent when the only datasource is changed
• rule — container for rule definition. It contains:
  • uid — unique identifier of rule
  • s:name — name of rule
• conditions — is a container for all conditions of a rule
• or and and elements — are used for building logical conditions when there are many rules. They also have a unique identifier attribute:
  • uid — unique identifier
• condition — condition serialization. It can have many different values because each condition can have different values. Here are listed only attributes that are common for each condition:
  • uid — unique identifier
  • s:id — ID of the Sitecore item which corresponds to definition of the condition
• actions — container for all actions that should be done with rendering if rules execution returned true
• action — definition of an action that should be done on a rendering. It has next attributes:
  • uid — unique identifier
  • s:id — ID of the Sitecore item which corresponds to definition of action. Usually, it is ID of "Hide Rendering", "Set Data Source", "Set Rendering" or "Set Parameters" item
  • s:DataSource — if action is "Set Data Source" then this attribute corresponds to new datasource ID of the Sitecore item
  • s:RenderingItem — if action is "Set Rendering" then this attribute corresponds to new rendering ID of the Sitecore item

Conclusion

It is not a full list. There also are others XML elements and attributes that could be present in your rendering definition. But they are quite rare and there is very small chance that you will face with them. This list give you additional knowledge to perform some tasks quicker. But, please use this knowledge with caution. It is very easy to break something when you edit rendering XML directly and don't use Sitecore interfaces(Content Editor or Experience editor) for it.

CSS Grid Layout for Sitecore

It is copy of my article to keep everything in one place, initially published here.

Before reading this blog, I recommend familiarising yourself with CSS Grid Layout. I like this guide. Or if you prefer to learn it during play in game, try CSS Grid Garden.

Major part of Sitecore projects from my experience has either predefined preset of layouts(containers for components) or are based on basic components of CSS frameworks: rows and columns(e.g.: Bootstrap, Foundation and others).

First approach is clear and obvious, you have predefined list of possible layouts: single column, two equal columns, three equal columns, one narrow column one wide column and others. This approach works good, but when site editor would need some new layout, he would not be able to create it without help of a developer. After passing of some time you will get a lot of containers that are designed only to build grid system. And when you are creating new page it is hard to select right container control from bunch of “three column layouts”.

Second approach is more flexible. You have 2 generic controls: Row and Column. You can define column width, row height. Exactly, like you do with Bootstrap grid system. Difference is only that you set column and row parameters on the level of rendering parameters in Sitecore. By combination of different rows and columns, you would be able to get any layout you can imagine. And you have only two controls that respond for grid structure: row and column. You know exactly what they do and how they will behave in different situations. The back side of coin is difficulties in designing complex layout. You get dozen of rows and columns. You are able to manage them somehow in the Experience Editor, making time to time mistakes with adding components to the wrong placeholder. And you get mess in the layout details of your page. You see bunch of rows and columns in the list with absence of understanding what is inside of them and are they still in use?

Mixed path of first and second approaches can resolve some of their limitations. But misuse of it by site managers could create a mess.

CSS Grid layout offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. It is supported by modern browsers:

sing CSS Grid allow you to get column/row layout without needs to include any additional frameworks. You can have only one container component per page in Sitecore. This component is configurable, you can set any amount of columns and rows, spacing between columns and rows, alignment.

I have created prototype of CSS Grid Layout for Sitecore.

You can try it by yourself:

1. Download Sitecore update package from AppVeyor
2. Install it using update installation wizard /sitecore/admin/UpdateInstallationWizard.aspx
3. You will be able to insert "Container" component /sitecore/layout/Renderings/CSSGrid/Container. Amount of columns and rows is configurable using rendering parameters.
4. Inside placeholder under "Container" component you will be able to insert any amount of "Item" components /sitecore/layout/Renderings/CSSGrid/Item. Location(row/column) and size(rows/columns) of “Item” component is configurable using rendering parameters (It is expected that all UI components will be compatible with Grid CSS and you will be able to place them inside container. And configure location/size/alignment using rendering parameters)

If you have any difficulties, refer to example how to use it.

Few screenshots, how it will work:

Using CSS Grid Layout for Sitecore we have got flexible layout for Sitecore project without mess in layout details. We have only one container for unlimited number of controls. Location of each control is configured by its rendering parameters. In the next part I will describe how to use this module in details.

P.S. If you are interested in free automated system that prepares Sitecore CSS Grid Layout package from GitHub sources, please read my article about possible CI/CD configuration for open source projects.