Instructions for Creating a Feather (MVC) widget

These instructions are for a Feather (MVC) widget, but you’d retrieve the same value if you were using a regular Sitefinity widget. Skip to the code

Let’s suppose, for the sake of illustration, you’ve a dynamic module with a multiple choice field for choosing the color — maybe a hero image that has some text and a “learn more” button over top of it.

Your fields would be something like this:

• Related media field called Image
• Short text field called Headline
• Short text field called Learn More URL
• Choices field called Button Color

The client is going to want to make sure that the button color is going to match the background. It would be really difficult to see a light blue button over a picture of a clear blue sky, for example. So it’s important to give the client some button color options that they can select from. One of those options is labeled Dark Blue with a value of dkblue. The plan here is that you are going to get the value from the button color field, because the values of the color selection options correspond to CSS classes for the buttons.

@item.Fields.Color will give you “Dark Blue” which is pretty much useless because you can’t have a CSS class that has two words for its name. But how do you get the selected value, instead of the selected label?

One option would be to use the values as the labels, but if you did that you could end up with a bunch of users who are confused over what the labels stand for. It really would be much better to show the user “Dark blue” while allowing you to get the value “dkblue” instead.

To accomplish that, you just need to get the persisted value of the multiple choice field:

var bgcolor = item.Fields.Color.PersistedValue;
<div class=”card-over @bgcolor”>