Nibble

Introducing UI-O-Matic for Umbraco, Integrated crud UI for custom db tables in minutes

With great pleasure I can announce the first release of a new package: UI-O-Matic.

What can it do?

Well a bit over a year ago I showed an example of how you could create a crud UI for a third party db table. As you can see in that post it is quite a bit of work to make it function…it consists of a petapoco poco, a tree controller, an api controller, angularjs views and controllers and more…

Instead of doing that now you can simply use UI-O-Matic, UI-O-Matic makes it super simple to create a crud ui for your tables, all you need to do is add some additional attributes and implement an interface that has a single member on your poco. UI-O-Matic will use that information to auto generate the UI for you.

Example please

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 );

This class

1 [UIOMaticAttribute("People","icon-users","icon-user")] 2 [TableName("People")] 3 public class Person: IUIOMaticModel 4 { 5 public Person() { } 6 7 [UIOMaticIgnoreField] 8 [PrimaryKeyColumn(AutoIncrement = true)] 9 public int Id { get; set; } 10 11 [UIOMaticField("First name","Enter the persons first name")] 12 public string FirstName { get; set; } 13 14 [UIOMaticField("Last name", "Enter the persons last name")] 15 public string LastName { get; set; } 16 17 [UIOMaticField("Picture", "Select a picture", View = "file")] 18 public string Picture { get; set; } 19 20 public override string ToString() 21 { 22 return FirstName + " " + LastName; 23 } 24 25 public IEnumerable<Exception> Validate() 26 { 27 var exs = new List<Exception>(); 28 29 if(string.IsNullOrEmpty(FirstName)) 30 exs.Add(new Exception("Please provide a value for first name")); 31 32 if (string.IsNullOrEmpty(LastName)) 33 exs.Add(new Exception("Please provide a value for last name")); 34 35 36 return exs; 37 } 38 }`

will generate the following integrated crud UI

example

Where can I get it?

You can simply install it from nuget (after installation make sure to give your users access to the new section)

PM> Install-Package Nibble.Umbraco.UIOMatic

Is there documentation?

Yup, you can find that at http://uiomatic.readthedocs.org/

And there is also a recent uHangout showing the state of the project

Now what?

So please give it a try (it should do an awesome job on simple tables but haven’t tested that much on complex ones) and let me know if there are any issues , of course it’s open for collab so fork and submit pull request at will!

12 Comments so far

  1. Robert Bullock on October 12th, 2015

    Tim, this looks fantastic, but is there anyway to include tables from outside the Umbraco database? I don’t see how to do that…

  2. Tim Geyssens on October 12th, 2015

    @Robert yup check out the docs here http://uiomatic.readthedocs.org/en/latest/usage/#decorate-your-class-with-the-uiomatic-attribute , on the UIOMatic attribute you can specify a connection string name if you want to point it to a different db then the current Umbraco one

  3. Matt on October 14th, 2015

    Looks fab Tim.
    I’ve not tried it yet but I assume insert and delete operations are options on the nodes in the usual Umbraco way?

  4. Tim Geyssens on October 14th, 2015

    @Matt, yup you get those options when interacting with the tree

  5. Matthieu on October 22nd, 2015

    This is awesome! Like, seriously awesome! However in my haste I mistook package for “umbraco backoffice package” and I ran the nuget installer against an existing dev project so now I’m having a really bad day. All that aside can you give some pointers for adding this to an existing project manually (non-nuget)

  6. Tim Geyssens on October 22nd, 2015

    @Mattieu download the nuget package, rename the extension to zip and unzip it, you should then get some files that you can drop in your install

  7. Matthieu on October 22nd, 2015

    Perfect, I can see the .dll and app_plugin contents including manifest all in place. Is there something I’m missing to get it register within Umbraco as I’m still not seeing it, even after an appPool recycle?

  8. Matthieu on October 22nd, 2015

    Dont’ worry, I’ve got it! Currently preparing a solution for our Umbraco UK Festival talk next week. If I can get this working I’ll see if we can slip it into our presentation ;)

  9. Tim Geyssens on October 23rd, 2015

    @Matthieu sweet :) yeah you still need to give your user access to the new section

  10. Luc van Soest on November 12th, 2015

    Nice work, looking forward to using this in future projects. I build this summer a pretty elaborate custom backend module using your article “crud UI for a third party db” as a starting point and it was a massive amount of painstaking work. So kudos to you! ;-)

  11. jonas on December 2nd, 2015

    Hi,

    I am doing something wrong I think, have followed the guide and.

    Received an error from the server
    Failed to retrieve data for child nodes undefined

    Object reference not set to an instance of an object.

    EXCEPTION DETAILS:

    System.NullReferenceException: Object reference not set to an instance of an object.

  12. Tim Geyssens on December 3rd, 2015

    @Jonas, mind sharing the full stack trace, and if possible the table definition, you can mail to tim at nibble dot be

Leave a Reply