UI-O-Matic Docs
The official home of the documentation for the umbraco package UI-O-Matic
UI-O-Matic allows you to auto generate an integrated crud UI in Umbraco v7 and v8 for a db table based on a petapoco / npoco (the default ORM in Umbraco) poco.
Please be aware of the License Model before using this package since additional charges might apply if you are an Umbraco Gold Partner.

How can I install it?

UI-O-Matic can be installed from the Nuget package repository, or build manually from the source-code​
For Umbraco v8 use v3.latest of UI-O-Matic
For Umbraco v7 use v2.latest of UI-O-Matic

Getting Started

Of course make sure that UI-O-Matic is installed, your user has access to the new UI-O-Matic section and then create your poco

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
);
Copied!
And the following petapoco/npoco poco
1
[TableName("People")]
2
public class Person
3
{
4
​
5
[PrimaryKeyColumn(AutoIncrement = true)]
6
public int Id { get; set; }
7
​
8
public string FirstName { get; set; }
9
​
10
public string LastName { get; set; }
11
​
12
public string Picture { get; set; }
13
​
14
}
Copied!
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
}
Copied!
will generate the following crud UI
v8
v7
Last modified 9mo ago