Nibble

UI-O-Matic Event Model 0

The most recent version of UI-O-Matic (1.4.0 at this moment) introduces a couple of events that allow you to do some interesting stuff. The events are all placed on the PetaPocoObjectController (that’s the controller responsable for handling the crud operations).

Following the Umbraco convention there are before and after events.

BuildingQuery and BuildedQuery

These execute when UI-O-Matic builds the sql query for fetching the list view data. By default UI-O-Matic will fetch all the data from the table but using these events you can limit that by still having control over the query before it is executed.

CreatingObject and CreatedObject

These will execute when UI-O-Matic is inserting an object, so you can use these events to set values.

UpdatingObject and UpdatedObject

These will execute when UI-O-Matic is updating an object

Examples

1 public class EventHandlerscs: ApplicationEventHandler 2 { 3 protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) 4 { 5 UIOMatic.Controllers.PetaPocoObjectController.CreatingObject += PetaPocoObjectController_CreatingObject; 6 UIOMatic.Controllers.PetaPocoObjectController.BuildingQuery += PetaPocoObjectController_BuildingQuery; 7 } 8 9 void PetaPocoObjectController_CreatingObject(object sender, UIOMatic.ObjectEventArgs e) 10 { 11 if (e.Object.GetType() == typeof (ccpEvent)) 12 { 13 ccpEvent ob = (ccpEvent) e.Object; 14 ob.IsApproved = true; 15 } 16 } 17 18 void PetaPocoObjectController_BuildingQuery(object sender, UIOMatic.QueryEventArgs e) 19 { 20 if (e.TableName == ccpEvent) 21 e.Query.Where(AREAID = @0, 2); 22 } 23 }

UI-O-Matic 1.1.0 Release 0

Today UI-O-Matoc 1.1.0 is available (get it from nuget), it features 2 new improvements coming from community pull requests! So thanks Tom Fulton and Serena Benny.

Introducing the UIOMaticNameField attribute

With this new attribute you can mark a single property that will be used as the ‘name’ field of your object, in the UI it will now appear at the top (so making it even more consistent with the Umbraco UI).

And if you are using a list view this name property will be the column that will link through to the detail page

Not limited to primary key columns of type int

With this version it’s also possible to have unique identifiers as the type on your primary key columns so now it should be able to handle almost every table

Haven’t given it a go yet? You should since it’s a huge time saver! For full details check out http://www.nibble.be/?p=464

UI-O-Matic, handling Foreign Keys 10

Something you’ll bump into sooner or later when working with custom tables are relationships between tables.

Let’s say we have the following 2 pocos (and matching tables)

People

1 [UIOMatic("People", "icon-users", "icon-user",SortColumn="FirstName")] 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("Firstname","Enter your firstname")] 12 public string FirstName { get; set; } 13 14 [UIOMaticField("Lastname", "Enter your lastname")] 15 public string LastName { get; set; } 16 17 [UIOMaticField("Picture", "Please 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 }

Dogs

1 [UIOMatic("Dogs", "icon-users", "icon-user", RenderType = UIOMaticRenderType.List)] 2 [TableName("Dogs")] 3 public class Dog : IUIOMaticModel 4 { 5 public Dog() { } 6 7 [UIOMaticIgnoreField] 8 [PrimaryKeyColumn(AutoIncrement = true)] 9 public int Id { get; set; } 10 11 12 public string Name { get; set; } 13 14 [UIOMaticField("Is castrated", "Has the dog been castrated")] 15 public bool IsCastrated { get; set; } 16 17 18 19 public int OwnerId { get; set; } 20 21 public override string ToString() 22 { 23 return Name; 24 } 25 26 public IEnumerable<Exception> Validate() 27 { 28 var exs = new List<Exception>(); 29 30 if (string.IsNullOrEmpty(Name)) 31 exs.Add(new Exception("Please provide a value for name")); 32 33 if (OwnerId == 0) 34 exs.Add(new Exception("Please select an owner")); 35 36 37 return exs; 38 } 39 }

You’ll see that the Dog class has an property of type int called OwnerId, this will be populated with the id of a Person.

If we let UI-O-Matic render this you’ll get an input of type number but that isn’t what we want since we don’t know which number matches a certain person.

Screen Shot 2015-10-26 at 10.57.47

So instead we want the see the persons full name and be able to select it from a dropdown.

All that we’ll need to do is use the UIOMaticField attribute and say that we want to use a dropdown and pass our dropdown some configuration

1 [UIOMaticField("Owner", "Select the owner of the dog", View = "dropdown", 2 Config = "{’typeName’: ‘Example.Models.Person, Example’, ‘valueColumn’: ‘Id’, ’sortColumn’: ‘FirstName’, ‘textTemplate’ : ‘FirstName + \" \"+ LastName ‘}")] 3 public int OwnerId { get; set; }


So the view is set to dropdown and the config we are passing is (in json format)

  • The name of the type that will be used to populate the dropdown
  • The column used for the value of the item
  • The template used for the text of the item
  • The column used for sorting

Now if we let UI-O-Matic render this we’ll get the following result

Screen Shot 2015-10-26 at 11.04.57

Besides dropdown you can also use a checkboxlist or radiobuttonlist, for more info please check the documentation

UI-O-Matic Property Editor 2

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

UI-O-Matic + T4 Templates = Almost instant CRUD UI for your custom tables in Umbraco 0

I’ve just published a new package on Nuget that makes it even easier to generate an integrated CRUD UI for custom tables in Umbraco, as you know for UI-O-Matic you only need to create a PetaPoco poco and decorate that with some additional attibute + implement an interface for each table, if you have a lot of tables that’s really boring work mapping a table manually to a poco. So I’m happy to introduce you to the t4 templates that will do that mapping for you.

Show me

Simply install the package through nuget

PM> Install-Package Nibble.Umbraco.UIOMaticT4Templates

That will add 3 new files to your project

  • \Models\Generated\Database.tt
  • \Models\Generated\UIOMatic.Core.ttinclude
  • Models\Generated\UIOMatic.Generator.ttinclude

To now generate your pocos you’ll just have to save the Database.tt file, if no connectionstring is supplied it will use the Umbraco one, but if you point it to a different conn string (by adding it’s name) it will use that.

Example

I must note that I only modified the PetaPoco t4 templates so all credit for the excellent work in that one goes to the PetaPoco team.

UI-O-Matic ListView 2

UI-O-Matic also provides the option to display your objects in a listview (since the tree isn’t the best choice when working with a lot of data).

Setup

You can specify the render type on the UIOMatic attribute (by default this is set to Tree)

1 [UIOMatic("cmsDataType", "icon-box-open", "icon-box-open", 2 RenderType = UIOMaticRenderType.List)]

Now you wont see the items in the tree anymore but in a list view

Screen Shot 2015-10-19 at 12.08.49

The listview allows you to sort by column and also filter by searching (all of this is server driven so should allow working with large datasets).

Screen Shot 2015-10-19 at 12.09.05

Ignoring columns

If you wish to exlude certain columns/properties from being displayed in the listview you can decorate your properties with the UIOMaticIgnoreFromListView attribute.

For more details on UI-O-Matic please check out the docs

Special thanks to Tom Fulton for his contributions to the listview.

Less, Sass, Coffeescript and typescript with Umbraco v7 0

From noticing a couple of questions on the our forums, it seems like plenty of folks don’t know how you would start with adding less/sass/coffeescript/typescript to your Umbraco project.

One of the easiest options is to use Optimus, it’s main feature is to do bundling and minifications. But besides that  Optimus also features a provider model for dynamic css and js languages.

Show me

When installing the Optimus core the final step of the installation will let you install additional providers for dynamic styleheet (less, sass) and script languages (coffeescript and typescript).

Screen Shot 2015-10-13 at 12.32.03

Depending on the ones you choose you’ll get an additional dynamic stylesheets/dynamic scripts tree in the settings section where you can start creating files of the installed providers.`

Screen Shot 2015-10-13 at 12.33.43

You can then start editing and saving your less/sass/coffescript/typescript file

Screen Shot 2015-10-13 at 12.36.18

These will then compile to css (in the case of less and sass) or js files (in the case of typescript and coffeescript).

That’s how easy it is!

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

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!

One Umbraco package action to rule all config transforms 2

While working on the page not found manager one of the final steps is to package up the project and release it as an umbraco package and nuget package. Sometimes your package will need to update existing files (adding a app setting to the web.config,…)

Something that is extremely useful when working with nuget is that you can include xdt files that will transform config files.

And for the umbraco package you can use package actions to perform those actions but that can quickly end up in having to use different actions and even having to write custom ones since the functionality of individual package actions is pretty specific. (for example take a look at the ones for Optimus)

Why not make it possible to also use xdt files…

So now instead of having to write or use different package actions to update config/xml files you can use this single config transform package action.

For example this is how you could add an additional provider to the config/embeddedmedia.config

1 <Action runat="install" undo="false" alias="PNFM.TransformConfig" file="~/config/embeddedmedia.config" xdtfile="~/app_plugins/temp/embeddedmedia.xdt"></Action>

And the xdt file contents will looks like

1 <?xml version="1.0"?> 2 <embed xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform"> 3 4 <provider name="Instagram" type="Umbraco.Web.Media.EmbedProviders.OEmbedJson, umbraco" xdt:Transform="Insert"> 5 <urlShemeRegex><![CDATA[instagram\.com/]]></urlShemeRegex> 6 <apiEndpoint><![CDATA[http://api.instagram.com/oembed]]></apiEndpoint> 7 <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco"></requestParams> 8 </provider> 9 10 11 </embed>

If you aren’t familiar with xdt check out this link.

Currently the package action is part of the page not found manager project but I’ll also release this as a standalone package making it possible to include it in your own projects.

EAsy Custom 404 Pages for Umbraco 2

Introducing a small new package that allows you to set your Umbraco site 404 page(s) from within the UI. The page not found manager will extend the content context menu for admins with a new option “404 page”.

Screen Shot 2015-09-22 at 10.44.23

The new option will open a dialog where you are able to select a 404 page for the current page and it’s children (either by searching or selecting a page from the content tree).

Screen Shot 2015-09-22 at 10.48.34

So you can also setup multiple 404 pages (in case you have a multilingual site or an umbraco instance running multiple sites). Since it works this way it’s more versatile then the standard umbraco 404 page setup.

You can download the package on our.umbraco.org https://our.umbraco.org/projects/backoffice-extensions/umbraco-page-not-found-manager/

Or install it through nuget https://www.nuget.org/packages/Nibble.Umbraco.PageNotFoundManager/

If you are insterested in the sourcecode that can be found on GitHub https://github.com/TimGeyssens/UmbracoPageNotFoundManager

And if you wanna learn more you can view a live demo and a run through of the code on this weeks uHangout https://www.youtube.com/watch?v=bFL0xUhRerI

Next Page »