How to add a dropdown as an Umbraco v8 macro
This was one of the key sentences that I used on my Google search. If you are currently working with Umbraco, you probably know that the number of results is surprisingly low.
Sometimes the solutions are so old that they do not work on recent versions of Umbraco. This article will help you to add a dropdown as an Umbraco macro.
If you need to have one or more dropdowns inside your macro parameters, you need to create it as a custom macro parameter.
Creating a custom macro parameter
A dropdown is different from a true-false or text input. A dropdown gives the user the ability to choose from custom values. You’ll need to create a custom parameter too.
First, create a folder inside the App_Plugins folder named macroParametersEditors — you can name it whatever you want.
Then create a folder named dropdown and add the following two files:
The probability of needing more than one dropdown on Umbraco is high, so it makes sense for the dropdown macro to be dynamic.
That’s why I’ve got two files in a folder named dropdown — it is the dropdown code. Every variation of the dropdown will use those two files. What differs is the package.manifest file — this is the file that populates the dropdown options.
If you’re building a button macro and want to have a dropdown where you can choose the button type, you need to create a folder inside macroParametersEditors folder and name it buttonTypeDropdown.
Package.manifest is the file where you connect all the files and also where you insert your options information. You can also define the parameter icon or group but they are optional. A list of icons you can use is available here.
Now we should be able to see the dropdown parameter in our parameter options. Inside our button macro, in the parameters tab, we can create one for button type, and when the parameter type options appear you can see that the newly created dropdown is already there inside our new group dropdowns.
This can be repeated for all the other dropdowns that you will need. I’ve created one more for the Warning Icon macro too.
Rendering the macro in the rich text editor
Once you’ve added all the parameters needed, you need to give macro instructions about what to render. Edit the file connected to this macro. In this example, button.cshtml inside the MacroPartials folder.
It is important to know how to get the selected option from the custom dropdown.
string btnType = HttpUtility.HtmlDecode(
Model.MacroParameters["buttonType"].ToString()
);JObject _btnTypeJson = JObject.Parse(btnType);string _btnTypeClass = (string)_btnTypeJson["value"];
The button dropdown type only affects the appearance of the button. You need to apply it to the button’s classes:
<a href="@_btnLink" @_btnTarget title="@_btnLinkTitle" class="wmnds-btn @_btnTypeClass"> @_btnContent</a>
(wmnds-btn is our design system’s button class)
Below is the complete file that renders the button macro:
I hope it’s useful!
This article was published as part of #ServicesWeek 2021, a cross-organisational UK public sector event series.
You can also read more of blogs from our team on the WMCA Digital and Data Medium publication.
