Nibble

Extending UI-O-Matic V2 With custom List View filters

In the contact entries example you’ll see that we use a relative date filter to output the created date in the format of … minutes ago, hours ago,…days ago

With the following config on the standard label list view field

1 [UIOMaticListViewField(Config = {’format’ : ‘{{value|relativeDate}}’})] 2 [UIOMaticField(View = UIOMatic.Constants.FieldEditors.DateTime)] 3 public DateTime Created { get; set; }

But of course it’s also possible to plug in custom filters

Show me

So let me extend the contact entries example and truncate the message if it’s to large.

I’ve downloaded this truncate filter from github and added that to my project, also added a package manifest and a script where I do the include, so I get the following structure in my AppPlugins folder

Screen Shot 2016-10-28 at 17.49.08

Import looks like

1 var app = angular.module(umbraco); 2 3 //These are my Angular modules that I want to inject/require 4 5 app.requires.push(truncate);

So with that in place I can now use the new filter

1 [SpecialDbType(SpecialDbTypes.NTEXT)] 2 [Required] 3 [UIOMaticListViewField(Config = {’format’ : ‘{{value|characters:25}}’})] 4 [UIOMaticField(View = UIOMatic.Constants.FieldEditors.Textarea)] 5 public string Message { get; set; }

And now we get a truncated message (tailed with …)

Screen Shot 2016-10-28 at 17.53.32

btw RC is out! https://www.nuget.org/packages/Nibble.Umbraco.UIOMatic/2.0.0-rc (last chance to test before final hits the shelves)

Leave a Reply