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.
Here are the individual blocks whose content we want to toggle by changing the values in the dropdown.
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
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
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.
As a final step, if you created a block instead of a page - add that block compoment to the page.
The end result is a dropdown that shows different blocks.
This turned out to be very usefull feature for my project, and hopefully you will find good use for it in your projects as well!