UI-O-Matic Docs

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 

Usage

Last modified 8mo ago

Copy link

Contents

How can I install it?

Getting Started

Example