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
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
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’}}’}”)]
@Jamie, take a look at the example here http://www.nibble.be/?p=525
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