Nibble

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

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