Nibble

Using UI-O-Matic V2 as an entries viewer for your custom forms

Posted October 27, 2016

As promised I would share some real world examples of using UI-O-Matic. One thing I tend to use if for is as a quick entries viewer for custom made forms on your Umbraco site.

Prerequisites

So of course we first need to setup a form on our frontend, for that we’ll need a model, view and (surface)controller. If you arent’ familiar with how to set that up check out the chapter on Umbraco.tv http://umbraco.tv/videos/umbraco-v7/developer/fundamentals/surface-controllers/introduction/ or I’ve also seen this video recently https://www.youtube.com/watch?v=3V0A1AYJbys explaining the process.

Model

 1 [TableName("ContactEntries")]
 2 [PrimaryKey("Id", autoIncrement = true)]
 3 public class ContactEntry
 4 {
 5     [PrimaryKeyColumn(AutoIncrement = true)]
 6     public int Id { get; set; }
 7 
 8     [Required]
 9     public string Name { get; set; }
10 
11     [Required]
12     [EmailAddress]
13     public string Email { get; set; }
14 
15     [SpecialDbType(SpecialDbTypes.NTEXT)]
16     [Required]
17     public string Message { get; set; }
18 
19     public DateTime Created { get; set; }
20 }


View

 1 @if (TempData["success"] != null)
 2 {
 3     <p>Thank you for your message!</p>
 4 }
 5 else
 6 {
 7     using (Html.BeginUmbracoForm<ContactController>("HandlePost"))
 8     {
 9         <div>
10             @Html.LabelFor(m => m.Name)
11             @Html.TextBoxFor(x => x.Name)
12             @Html.ValidationMessageFor(m => m.Name)
13         </div>
14 
15         <div>
16             @Html.LabelFor(m => m.Email)
17             @Html.TextBoxFor(x => x.Email)
18             @Html.ValidationMessageFor(m => m.Email)
19         </div>
20 
21         <div>
22             @Html.LabelFor(m => m.Message)
23             @Html.TextAreaFor(x => x.Message)
24             @Html.ValidationMessageFor(m => m.Message)
25         </div>
26 
27         <div>
28             <button type="submit">Submit</button>
29         </div>
30     }
31 }


Controller

 1 public class ContactController : SurfaceController
 2 {
 3     [ChildActionOnly]
 4     public ActionResult Render()
 5     {
 6         return PartialView("ContactEntry",new Models.ContactEntry());
 7     }
 8 
 9     [HttpPost]
10     public ActionResult HandlePost(Models.ContactEntry model)
11     {
12         if (!ModelState.IsValid)
13             return CurrentUmbracoPage();
14 
15         //add to db
16         model.Created = DateTime.Now;
17         var db = ApplicationContext.DatabaseContext.Database;
18         db.Insert(model);
19 
20         //send email, do other things…
21 
22         TempData["Success"] = true;
23         return RedirectToCurrentUmbracoPage();
24     }
25 }

 

Of course you’ll also need to make sure your db table exist, that can be done with this piece of code

 1     public class App: ApplicationEventHandler
 2     {
 3         protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
 4         {
 5             var ctx = applicationContext.DatabaseContext;
 6             var db = new DatabaseSchemaHelper(ctx.Database, applicationContext.ProfilingLogger.Logger, ctx.SqlSyntax);
 7 
 8             //Check if the DB table does NOT exist
 9             if (!db.TableExist("ContactEntries"))
10             {
11                 //Create DB table - and set overwrite to false
12                 db.CreateTable(false, typeof(ContactEntry));
13             }
14 
15         }
16     }

So far this has nothing to do with UI-O-Matic it’s just standard Umbraco, MVC and PetaPoco (to insert a db entry).

But of course we now want to show these entries to the client…

Adding UI-O-Matic V2 into the mix

The only thing we have to do now is install UI-O-Matic v2 (at this moment it’s in beta and you can get it from Nuget or build the latest source from github). In this example I’ve build the latest source and installed that but all these features will make it into the final release.

 1 [TableName("ContactEntries")]
 2 [PrimaryKey("Id", autoIncrement = true)]
 3 [UIOMatic("contactentries", "Contact Entries", "Contact Entry",
 4     FolderIcon = "icon-users", ItemIcon = "icon-user",
 5     SortColumn = "Created", SortOrder = "desc",
 6     RenderType = UIOMaticRenderType.List)]
 7 public class ContactEntry
 8 {
 9     [PrimaryKeyColumn(AutoIncrement = true)]
10     public int Id { get; set; }
11 
12     [Required]
13     [UIOMaticListViewField]
14     [UIOMaticField]
15     public string Name { get; set; }
16 
17     [Required]
18     [EmailAddress]
19     [UIOMaticListViewField]
20     [UIOMaticField]
21     public string Email { get; set; }
22 
23     [SpecialDbType(SpecialDbTypes.NTEXT)]
24     [Required]
25     [UIOMaticListViewField]
26     [UIOMaticField(View = UIOMatic.Constants.FieldEditors.Textarea)]
27     public string Message { get; set; }
28 
29     [UIOMaticListViewField(Config = "{’format’ : ‘{{value|relativeDate}}’}")]
30     [UIOMaticField(View = UIOMatic.Constants.FieldEditors.DateTime)]
31     public DateTime Created { get; set; }
32 }

 

So first we simply decorate the class with the UIOMatic attribute, providing a unique alias, a singular name and a plural name for our object and some optional parameters like which icon to use and that we would like to render in a list instead of the tree

Then we can mark the items we want in the actual editor (marked with UIOMaticField, can also specify a different editor then textstring as you can see in the example)

And mark the ones we want in the list view (marked with UIOMaticListViewField)

Result

Screen Shot 2016-10-27 at 13.02.11

Screen Shot 2016-10-27 at 13.40.54

As you see simply by decorating our model with some additional attributes we now get an entries viewer/editor! Kapow!

Leave a Reply