Nibble

Custom Umbraco Sections Made easy with UI-O-Matic v2

Posted October 31, 2016

In collaboration with Matt Brailsford I’m am happy to announce the v2 release of UI-O-Matic. In addition to the beta we’ve also added the following:

Installation

Simply install on your Umbraco instance with Nuget

Install-Package Nibble.Umbraco.UIOMatic

Example

If you have the following db table

1 CREATE TABLE [People] (
2   [Id] int IDENTITY (1,1) NOT NULL
3 , [FirstName] nvarchar(255) NOT NULL
4 , [LastName] nvarchar(255) NOT NULL
5 , [Picture] nvarchar(255) NOT NULL
6 );

And the following petapoco poco

 1 [TableName(“People“)]
 2 public class Person
 3 {
 4     [PrimaryKeyColumn(AutoIncrement = true)]
 5     public int Id { get; set; }
 6 
 7     public string FirstName { get; set; }
 8 
 9     public string LastName { get; set; }
10 
11     public string Picture { get; set; }
12 }

The next additions to the class (attributes)

 1 [UIOMatic(“people“,“People“,“Person“, FolderIcon = “icon-users“, ItemIcon = “icon-user“)]
 2 [TableName(“People“)]
 3 public class Person
 4 {
 5     [PrimaryKeyColumn(AutoIncrement = true)]
 6     public int Id { get; set; }
 7 
 8     [Required]
 9     [UIOMaticField(Name = “First name“, Description = “Enter the persons first name“)]
10     public string FirstName { get; set; }
11 
12     [Required]
13     [UIOMaticField(Name = “Last name“,Description = “Enter the persons last name“)]
14     public string LastName { get; set; }
15 
16     [UIOMaticField(Name = “Picture“,Description = “Select a picture“, View =  UIOMatic.Constants.FieldEditors.File)]
17     public string Picture { get; set; }
18 
19     public override string ToString()
20     {
21         return FirstName + “ “ + LastName;
22     }
23 
24 }

will generate the following crud UI

gettingstartedexample

Documentation

You can find the v2 docs at http://uiomatic.readthedocs.io/en/stable/

So we hope this is a valuable tool for Umbraco devs that can save you several hours/days of your precious time

Screen Shot 2016-10-31 at 08.53.16

3 Comments so far

  1. Jamie Attwood on January 30th, 2017

    Awesome. How can i do a simple date format like this on the list view column: mm/dd/yyyy anything appreciated! I’ve tried this but not sure I can do anything in line:
    [UIOMaticListViewField(Name= “Date”, Config = “{’format’ : ‘{{value | date:’yyyy-MM-dd’}}’}”)]

  2. Tim Geyssens on January 31st, 2017

    @Jamie, take a look at the example here http://www.nibble.be/?p=525

  3. Peter on March 15th, 2017

    Hi Tim,

    I followed your tutorial on section (before this UI). Now i found this and i was wondering about two things:

    First: Would this also work if you had an external database where you know the connectionId from (as in you have the connectiondetails in your config).

    Second: Do you have a tutorial on how you to create such a nuget package? Havent been able to find it yet.

    #h5yr

Leave a Reply