Estimated reading time:
I have come across this issue many times in implementing Sitecore websites. You need a field to show on the page with some surrounding markup. The field is optional, and if the field has no content, the markup should not be displayed at all. A common way I have seen this done is by just checking the value of the field before calling the render method:
But apart from looking a bit ugly and verbose, it means we have to get the contents of the field twice. We could do that in the controller/business layer of our project. But then we would be mixing presentation into the business layer. Also in this example, the experience editor is not supported. We would have to add an extra check for page edit mode!
No imagine that you have 10 fields like that on your rendering, things are starting to get very ugly!
RenderFieldArgs we find a couple of properties that might help. There is
EnclosingTag, this is just a string containing the type of tag,
div etc… - the field renderer pipeline then surrounds the field content with that tag. Helpfull, but a bit limiting.
There are also properties for
After - now we are getting closer. These properties take a string containing whatever markup you want to add and logically add those string before and after the field.
So how do we use those parameters. Well one of the overloads for
string fieldName, Item item, object parameters - this parameters object takes a dynamic object and converts the properties on the dynamic to matching properties on
RenderFieldArgs, so using this method you can set any property in the
Example (Standard Sitecore):
As a site note, if you are using Fortis - we have mirrored this implementation of the field renderer. So you can use the
.Render method of a field wrapper and set the same properties.
Example (Using Fortis):
This looks much better. Nice and clean and keeps page editor support. You can imagine my dissapointment then when I discovered that Sitecore renders both the enclosing tag and the before and after fields, even if the field content is empty.
The enclosing tag field does not render the tags if the field is empty, and so works as expected. Before and After do not work the same way.
The pipeline pipeline that handles all this is the imaginatively titled
AddBeforeAndAfterValues in the
RenderFieldPipeline. Its a pretty simple processor and the change to make it work as expected was also fairly simple:
Finally - create an include file that replaces the original processor with your new one:
Now we simply check if the field contains anything or if we are in page edit mode. All bases covered! Now when our field is empty, the Before, After and EnclosingTag contents are not rendered to the output, Keeping out razor script markup nice and clean and not leaving empty html tags in our site!