Nibble

Advanced property editors for Umbraco v7, strongly typed values in your views using PropertyValueConverters

As you could see in the previous post, if we have a prop editor where the value type is set the JSON we can also iterate this in your razor views

<table>
<tbody>
@foreach(var row in CurrentPage.matrix)
{
<tr>
@foreach(var val in row)
{
<td>@val</td>
}
</tr>
            }
</tbody>
</table>

Of course the type of object in this case is dynamic but a little thing called PropertyValueConverters make it possible to convert this into a strongly typed object!

Here is an example implementation

    [PropertyValueType(typeof(Matrix))]
    [PropertyValueCache(PropertyCacheValue.All, PropertyCacheLevel.Content)]
    public class MatrixValueConverter : PropertyValueConverterBase
    {
        public override bool IsConverter(PublishedPropertyType propertyType)
        {
            return propertyType.PropertyEditorAlias.Equals("Nibble.MatrixEditor");
        }
 
        public override object ConvertDataToSource(PublishedPropertyType propertyType, object source, bool preview)
        {
            if (source == null) return null;
            var sourceString = source.ToString();
 
            if (sourceString.DetectIsJson())
            {
                try
                {
                    var obj = JsonConvert.DeserializeObject<string[][]>(sourceString);
                    var matrix = new Matrix();
                    var rows = obj.Select(r => new Row {Values = r.ToList()}).ToList();
                    matrix.Rows = rows;
                    return matrix;
                }
                catch (Exception ex)
                {
                    return null;
                }
            }
 
            return sourceString;
        }
    }

That turns our json data into a custom Matrix object that looks like

    public class Matrix
    {
        public IEnumerable<Row> Rows { get; set; }
 
        public Matrix()
        {
            Rows = new List<Row>();
        }
    }

And the Row class looks like

    public class Row
    {
        public IEnumerable<string> Values { get; set; }

        public Row()
        {
            Values = new List<string>();
        }
    }

So now when I deploy this to my site when I fetch the value of a property that is using my custom matrix prop editor I’ll get an object of type Matrix Smile

If I then cast I get intellisense in Visual studio!

Intel

or you can also use Model.Content.GetPropertyValue<type>(“propAlias”)

More

Code for this is up on github https://github.com/TimGeyssens/MatrixPropEditor/tree/master/SamplePropertyValueConverter

Just a small gotcha, currently in the RC release you’ll have to remove the JSON value type from your custom prop editor if you want to attach a custom prop value convertor but that should be solved soon http://issues.umbraco.org/issue/U4-3591

10 Comments so far

  1. Stephan on November 20th, 2013

    Teasing:
    With upcoming strongly typed models, it should be possible to write:
    foreach (var row in Model.Content.Matrix.Rows)
    !

  2. Jeroen Breuer on November 20th, 2013

    @Stephan,

    You can do it like this:

    foreach (var row in Model.Content.GetPropertyValue(”matrix”).Rows)

  3. Jeroen Breuer on November 20th, 2013

    My comment was changed. It should be like this without the spaces:

    foreach (var row in Model.Content.GetPropertyValue(”matrix”).Rows)

  4. Jeroen Breuer on November 20th, 2013

    Ok that also failed…

  5. Niels Hartvig on November 20th, 2013

    @Jeroen: Post a link to a gist perhaps?

  6. Tim Geyssens on November 20th, 2013

    @Niels I updated the post with Jeroens suggestion :)

  7. Florian on November 20th, 2013

    Looks great! @Jeroen Breuer, what’s that about strongley typed models? Could someone give my more details or a link or so. Thanks

  8. Tim Geyssens on November 20th, 2013

    @Florian updated the post with Jeroens example

  9. Jamie Pollock on November 20th, 2013

    Looking good, Tim! I can’t wait to try this out soon.

  10. Lars-Erik on December 1st, 2013

Leave a Reply