Nibble

UI-O-Matic Property Editor

Besides building a crud UI for your custom tables UI-O-Matic also comes with a property editor that should make it easy to integrate your custom data with the content,member and media sections of Umbraco.

Example

Say we have the following 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 );

Then you’ll need to create the following class in order for UI-O-Matic to generate the crud UI

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 }

And now with at least one class in place we can create a new datatype using the UI-O-Matic prop editor. So in this case I want a person selector on my document types that is driven by the data coming from the third party table. So first select the prop editor UIOMatic Dropdown and then you’ll have to specify some additional settings.

Screen Shot 2015-10-22 at 11.31.05

  • Type of object (here we’ll get all our classes marked with the UI-O-Matic attribute)
  • Value property (select the property containing the value we wish to store, typically this will be the id)
  • Object text template (define the text template)
  • Column to sort on (which column to sort on)
  • Sort order

So with all of these specified we’ll get a new datatype that we can use on content/media/members and that looks like (so a dropdown populated with data coming from the custom table).

Screen Shot 2015-10-22 at 11.34.46

15 Comments so far

  1. Roger Davies on January 22nd, 2016

    Hi Tim,

    Awesome idea for a package! Would be great to use - we’re getting an error (via Angular) in backoffice of Umbraco 7.3.5 - using the ‘People’ database in the example and copying the sample people model suggested, the error is below. Do you know if this would work with Umbraco 7.3.5 and any ideas what may cause this?

    Many thanks

    Failed to retrieve data for child nodes undefined

    EXCEPTION DETAILS:

    System.NotSupportedException: Specified method is not supported.
    STACKTRACE:

    at UIOMatic.Trees.UIOMaticTreeController.GetTreeNodes(String id, FormDataCollection queryStrings)
    at Umbraco.Web.Trees.TreeControllerBase.GetNodes(String id, FormDataCollection queryStrings)
    at lambda_method(Closure , Object , Object[] )
    at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ActionExecutor.c__DisplayClass10.b__9(Object instance, Object[] methodParameters)
    at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ExecuteAsync(HttpControllerContext controllerContext, IDictionary`2 arguments, CancellationToken cancellationToken)
    — End of stack trace from previous location where exception was thrown —
    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
    at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
    at System.Web.Http.Controllers.ApiControllerActionInvoker.d__0.MoveNext()
    — End of stack trace from previous location where exception was thrown —
    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
    at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult()
    at System.Web.Http.Filters.ActionFilterAttribute.d__5.MoveNext()
    — End of stack trace from previous location where exception was thrown —
    at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
    at System.Web.Http.Filters.ActionFilterAttribute.d__5.MoveNext()
    — End of stack trace from previous location where exception was thrown —
    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
    at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
    at System.Web.Http.Filters.ActionFilterAttribute.d__0.MoveNext()
    — End of stack trace from previous location where exception was thrown —
    at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)

  2. Tim Geyssens on January 22nd, 2016

    @Roger must say I haven’t tried it on 7.3.5 so might be a bug, will see what happens when I upgrade the sample test site to 7.3.5

  3. Laszlo on February 19th, 2016

    Hi Tim,

    Congrats on your package. It is awesome, you should be very proud of your work :).

    I have watch your videos on youtube and tried to apply the same on our current project. I am using Umbraco 7.4.1 ( installed your package via nuget), I have got the Poco classes generated and decorated with attributes necessary for you plugin. When I run the project I cannot see any new section in the backoffice tree at all, just the standard umbraco ones.

    Would you mind to point out what could be the problem ?

    Thanks

  4. Tim Geyssens on February 19th, 2016

    @Laszio, make sure your user has access to the new section by setting it up on the user object (user section)

  5. Roger Davies on February 22nd, 2016

    Hi Tim,

    Thanks for the latest build! This seems to have solved the issue I reported when first posting (I can now view the tree and visit edit for a particular item). However, Angular now errors (when clicking the ’save’ button with:)

    Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    I’ve trace this through and what is happening here: .NET is throwing an exception inside method Validate() (within UIOMatic.dll) actually at UIOMatic.Controllers.ObjectController.Validate(ExpandoObject) - I have a suspicion it’s something to do with what Umbraco is passing to this method (object wise). We are on Umbraco 7.3.5

    I can also confirm it never gets as far as calling the method Validate(…) (implemented in the Poco/UIOmatic model that UIOMatic uses (I imagine this would happen next after the Validate method in the ObjectController was called)

    Would be grateful for any suggestions on what we might check here! One thing I haven’t yet mentioned - this project was originally Umbraco 4.11.8 and was upgraded - though I would think (hope?) this wouldn’t change anything about Angular and it’s controllers since this is all new stuff anyway.

    Would be grateful for any suggestions or thoughts as to what I should check here. It is now basically just the saving that errors, and if we can even turn off validation, that would be fine for now,

    Kind regards,

    Roger Davies

  6. Tim Geyssens on February 23rd, 2016

    @Roger yeah if your upgrade was successful it shouldn’t matter that you are coming from an older build. Mind sharing your poco? Then I can test it out, you can mail to tim at nibble dot be

  7. Laszlo on February 24th, 2016

    Hi Tim,

    Thanks, you have made my day, that is sorted my issue ( not seeing the module in the tree). I have completely forgotten about it :)
    Is there any way in your plugin to mark a field with default value?
    If not, would would be the best approach to tackle that?

    Cheers
    Laszlo

  8. Tim Geyssens on February 24th, 2016

    @Lazlo, yeah you can use the event model :) will try to do a blog post on it later today

  9. Tim Geyssens on February 24th, 2016

    @Lazlo but you can already find some info in this post http://www.nibble.be/?p=493

  10. Tim Geyssens on February 24th, 2016

    @Lazlo just made it a bit simpler to set default values, check out http://www.nibble.be/?p=497

  11. m on February 25th, 2016

    Hi Tim

    First of all thanks for this package, it’s awesome. i just wish i knew about it earlier as im bit of an MVC noob and it took me a while to create my various custom sections. I’m trying to build in multi tenancy into my custom sections and im having a bit of trouble as im still quite new to the world of microsoft programming. i’m trying to populate a tennant field in the person table based on a checkbox selection. to get these values for the checkbox im using.

    [UIOMaticField(”Tennants”, “Example checkboxlist property”, View = “checkboxlist”,
    Config = “{’typeName’: ‘MultiTennantSite.Models.Tennants, MultiTennantSite’, ‘valueColumn’: ‘domainName’}”)]
    public string Tennants { get; set; }

    I have a poco class to fetch the domain names from the umbraco table.

    [TableName(”umbracoDomains”)]
    public class Tennants
    {
    public string domainName { get; set; }
    }

    Am i going the right way about this? Angular is giving me a 500 (Internal Server Error) in the backoffice, You can drop a reply here or email if possible.

    Many thanks
    M

  12. Jan Willem on September 28th, 2016

    Hi Tim,

    I fail to get ui-o-matic working in Umbraco 7.5.3. Will there be a new release for 7.5.3?

    When retrieving data, I get the message: { “errorMsg”: “Failed to retrieve data for child nodes undefined”, “data”: { “message”: “An error has occurred.”}, “Status”: 500}

    When adding a record I get a 500 message: http: //mympsumbraco.local/umbraco/backoffice/UIOMatic/Object/PostCreate

    Regards
    Jan Willem

  13. Jan Willem on September 28th, 2016

    Forget my previous post. Never use ‘type’ as field name :-)

  14. Tim Geyssens on September 28th, 2016

    @Jan yeah must be a reserved word type so don’t use it :) will check Friday if it works as it should on 7.5.3 and release an update if necessary

  15. Tim Geyssens on September 28th, 2016

    @Jan just updated the core to Umbraco 7.5.3 and it appears everything is working as it should. Let me know if you hit any issues

Leave a Reply