Episerver: All Properties component for showing and hiding content using a drop-down
As a follow up to my previous article about grouping properties in a property block, I’ll describe how to create a component for showing and hiding content in all properties mode using a drop-down.
Having part of your form visible depending on some selection is a pretty normal use case. It is clear to the user what is selected and which other inputs are available, instead of just showing everything.
The challenge was figuring out how backend (Blocks) and frontend (Dojo) are working in together Episerver. There is a great article that helped me understand this. My goal was slightly different, so I’ll describe my thought process while figuring out the solution.
The scenario I will describe is following: There are three different pet types in our system. The user can choose only one using a dropdown. Each choice shows only properties for that pet type. Each pet type is a block with its own properties, and we are using each of those blocks as a property block next to a dropdown.
To create a demo project, follow instructions from the last blog post.
First step is pretty straigh foreward - create a new page type or a block with all the properties described in the scenario. For a dropdown use single selection solution from Episerver.
Next step is to create editor descriptor so that Episerver knows on which object we want the Dojo script to load, and the actual path to the script. Editor descriptors are usually placed inside the Business folder. ClientLayoutClass path is related to what is described in the next step.
In the root of your project in modules.config you have to declare what your Episerver scripts folder is - in this case it is in ProjectRoot\ClientResources\Scripts. ClientResources folder is Episerver convention.
myapp is a connection between the script and ClientLayoutClass path from StartPageEditorDescriptor
<?xml version="1.0" encoding="utf-8"?>
The script is the mix of Dojo and jQuery. It is not an elegant solution, but it works. The challenge was finding the right element which represents one of the added blocks we want to show/hide. I asked on Epi formus about some inconsistencies regarding generated HTML, but no cigar.