Can I change the order of components in placeholder based on personalization?

Question

I've seen a few examples on how you can use personalization in Sitecore to personalize the way a component (rendering / sub-layout) is displayed on your webpage. However, most of these guides explain how you can show/hide a component, given a certain criteria is met. In my case I would like to change the order, in which the components are sorted inside a placeholder.

Is that this something that can be achieved using personalization, is this out-of-the-box functionally, or does it require custom development to do so?

Answer 1

No. But it won't take all that much custom development to achieve.

A full detailed answer would be blog post sized; so am just posting the general principle here for inspiration.

Your problem is; the Rules Engine operates on an if-else-then basis, and it does so by-component. You have no control over component relationships. Reasons for this are many; but looking at the underlying XML structure in the __Renderings field will pretty much tell the tale.

What you can do however, is create a simple "Item Renderer" component of your own. Its datasoure would be little more than a simple Treelist or Multilist control. In that - you will select your datasource items to be rendered and - given you do have control over this in both Treelist and Multilist - you can control their individual ordering as well.

The Item Renderer would then loop through items, in the order listed, and render the item. How? Well there are several ways - but the __Renderers field is an obvious candidate. I've also used the __Controller and __Action fields on items to achieve this, but this limits your rendering choices to purely Controller Renderings.

With this in place; all you need to do is create multiple variations of the "Item Renderer" datasource Multilist and use those in your Rules Engine based personalisation.

Not an ideal solution and plenty of room for improvement; but hopefully gets you thinking a little bit outside the box and help you along :-)

Answer 2

A less ideal, but easier to implement solution, would be to personalize both the datasource and the rendering (assuming these are different types of components). Assuming you have a placeholder with two renderings (A and B) defined, you add personalization to A and B to swap.

e.g. On A, set a personalization rule to display B with B's datasource when the rule is true. On B, set a personalization rule with the same condition, but to display A with A's datasource.

While not elegant, this would allow you to 're-order' the components. Remember to enable personalization of the component design!