Hiding Areas on Shared Sections
It’s fairly trivial to hide fields/areas on pages by using Experience Design Studio or Page Composer to tweak the visible property. It’s a bit harder when the field/area that you wish to hide is on a shared component, however you only want to hide it on one of the pages it appears on.
In the Responsive ‘Personal Information’ tile we found that the Comments and Attachments section under ‘Add Disability’ was shared with ‘Resignation’.
We still wanted the fields to show on the resignation page, but not on the disability page. How do we achieve this?
Our first thought whenever there’s some conditional logic is to turn to Expression Language (EL). We needed a statement that we could put against the visible property of the fields along the lines of:
when page = Resignation, then visible = true
when page = Disability, then visible = false
So we just needed an EL statement that would allow us to check the page name. After consulting the documentation here we noticed the following:
Unfortunately we couldn’t get #{pageDocBean.title} to return the page title – or anything at all, in fact. Other EL expressions from the same page in the documentation worked (e.g. #{securityContext.userName}), but there were none that provided what we needed.
It looks like we’re not the only ones to hit this issue, as there’s a post on Customer Connect about the same issue.
We gave up on this approach and reverted to using a personalisation to inject a small piece of CSS onto the page.
Within a sandbox and Page Composer we inserted an HTML markup area into just the disability page (where we wanted the fields hidden). We then used Chrome Dev tools to locate the ID of the fields that we wanted to hide, and constructed an HTML snippet thus:
<style>
<div selector goes here> {
display: none;
}
</style>
It worked perfectly. Sometimes you have to fall back to basic tools and methods to achieve what you need.
Fusion Tipster 