Nibble

Archive for the 'Uncategorized' Category


Custom Umbraco Sections Made easy with UI-O-Matic v2 0

In collaboration with Matt Brailsford I’m am happy to announce the v2 release of UI-O-Matic. In addition to the beta we’ve also added the following:

Installation

Simply install on your Umbraco instance with Nuget

Install-Package Nibble.Umbraco.UIOMatic

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

And the following petapoco poco

1 [TableName(People)] 2 public class Person 3 { 4 [PrimaryKeyColumn(AutoIncrement = true)] 5 public int Id { get; set; } 6 7 public string FirstName { get; set; } 8 9 public string LastName { get; set; } 10 11 public string Picture { get; set; } 12 }

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 }

will generate the following crud UI

gettingstartedexample

Documentation

You can find the v2 docs at http://uiomatic.readthedocs.io/en/stable/

So we hope this is a valuable tool for Umbraco devs that can save you several hours/days of your precious time

Screen Shot 2016-10-31 at 08.53.16

UI-O-Matic Loves Umbraco FOrms 0

A year ago I introduced an Umbraco addon called UI-O-Matic which allows you to build up an integrated UI for your custom db tables in minutes (if you haven’t seen it I would recommend to check it out since it’s a real time saver!)

But of course all the CRUD action happens in the backoffice and I thought it would be nice to allow you to easily genereate forms based on your UI-O-Matic models that you can use in the front end of your site.

So I’m glad to present you a couple of Umbraco Forms addons that will make it super easy to link and submit data from your custom db tables.

Prevalue source type

The UI-O-Matic prevalue source type allows you to hook list field types (checkboxlist, dropdownlist, radiobuttonlist) to your Models (so to your db)

PrevalueSourceType

Simply select the type of object (your available models decorated with the UIOMatic attribute) the sort column and order and that’s it… it will use the primary key column as prevalue id and the ToString() method on the model as the value

Workflow type

The UI-O-Matic workflow type allows you to extend the functionality of a form in this case it will allow you to submit your record to a database table.

WorkflowType

If you have ever used the save as Umbraco document workflow type it will look very similar, first select the type of object then you can map the different properties on that object to record fields or setup a static value.

Data source type

And finally there is also a UI-O-Matic datasource type that will give you the option to generate a form based on a Model.

DataSourceType

Simply select the type of object and then follow the wizard.

Bonus

A small bonus that you’ll also find in the project is an attribute that can be used to decorate your UI-O-Matic model so that it creates the assiciated table for you [CreateTable]

Where can I get it?

You can simply install it from Nuget. Of course this depends on Umbraco Forms and UI-O-Matic but Nuget should take care of the dependencies if you haven’t already installed them.

PM> Install-Package Nibble.Umbraco.UIOMaticLovesForms

What’s next?

I’ll try to do some follow up posts with real world examples.

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 Property Editor 15

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 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!

Media picker directive for Umbraco v7 2

In the previous post I showed how you can use the media picker in your custom backoffice pages, now I’ve reworked the example by using an Angularjs directive. So with a directive we’ll end up with a component that is easily reusable accross different pages.

The Directive

1 angular.module("umbraco.directives") 2 .directive(umbMediaPicker, function (dialogService, entityResource) { 3 return { 4 restrict: E, 5 replace: true, 6 templateUrl: /App_Plugins/Example/umb-media-picker.html, 7 require: "ngModel", 8 link: function (scope, element, attr, ctrl) { 9 10 ctrl.$render = function () { 11 var val = parseInt(ctrl.$viewValue); 12 13 if (!isNaN(val) && angular.isNumber(val) && val > 0) { 14 15 entityResource.getById(val, "Media").then(function (item) { 16 scope.node = item; 17 }); 18 } 19 }; 20 21 scope.openMediaPicker = function () { 22 dialogService.mediaPicker({ callback: populatePicture }); 23 } 24 25 scope.removePicture = function () { 26 scope.node = undefined; 27 updateModel(0); 28 } 29 30 function populatePicture(item) { 31 scope.node = item; 32 updateModel(item.id); 33 } 34 35 function updateModel(id) { 36 ctrl.$setViewValue(id); 37 38 } 39 } 40 }; 41 });

The Template

1 <div> 2 <ul class="unstyled list-icons" ng-if="node"> 3 <li> 4 <i class="icon icon-delete red hover-show pull-right" ng-click="removePicture()"></i> 5 6 <i class="icon {{node.icon}} hover-hide"></i> 7 {{node.name}} 8 </li> 9 </ul> 10 <ul class="unstyled list-icons"> 11 <li> 12 <i class="icon icon-add blue"></i> 13 <a href ng-click="openMediaPicker()" prevent-default> 14 Select 15 </a> 16 </li> 17 </ul> 18 </div>

Using the directive

First we of course need to make sure to update the package manifest and include the directive in the array of js files. Then the directive can be used as

1 <umb-media-picker ng-model="person.pictureId" />

This directive has been added to the example project.

Using the media picker in your custom Umbraco backoffice pages 0

I’ve extended the Custom sections/trees/Pages/Dialogs in Umbraco v7 example project with the use of a media picker. I’ll quickly outline the bits needed.

So first we need a place to store the media id, this will be on the person class

1 [DataMember(Name = "pictureId")] 2 public int PictureId { get; set; }

Then update the view to display a media picker (you have full control over this markup). Important bits here are the openMediaPicker call, the ng-if and the stuff between {{}}

1 <umb-control-group label="Picture" description="Person’s picture’"> 2 <ul class="unstyled list-icons" ng-if="node"> 3 <li> 4 <i class="icon icon-delete red hover-show pull-right" ng-click="removePicture()"></i> 5 6 <i class="icon {{node.icon}} hover-hide"></i> 7 {{node.name}} 8 </li> 9 </ul> 10 <ul class="unstyled list-icons"> 11 <li> 12 <i class="icon icon-add blue"></i> 13 <a href ng-click="openMediaPicker()" prevent-default> 14 Select 15 </a> 16 </li> 17 </ul> 18 </umb-control-group>

Now in the controller we need the openMediaPicker function (it’s using the dialogService here)

1 $scope.openMediaPicker = function() { 2 dialogService.mediaPicker({ callback: populatePicture }); 3 }

And the callback method being

1 function populatePicture(item) { 2 $scope.node = item; 3 $scope.person.pictureId = item.id; 4 }

So we set the pictureId property of the person to the id of the returned media entity. To display the node name and node icon we set a node property on the model.

To remove the selected media item

1 $scope.removePicture = function() { 2 $scope.node = undefined; 3 $scope.person.pictureId = 0; 4 }

So this will now work to select and remove an item but we also need to make sure that when the page loads the node property on the model is populated (making use of entityResource so make sure to inject that).

1 if ($scope.person.pictureId > 0){ 2 entityResource.getById($scope.person.pictureId, "Media").then(function (item) { 3 $scope.node = item; 4 }); 5 }

That’s it, complete example project is available at https://github.com/TimGeyssens/UmbracoAngularBackofficePages/

EmbeddedMedia.config , supporting additional third party services in the Umbraco RTE 0

The RTE in Umbraco 7 (and since v4.9) offers a super simple way of inserting rich content from third party services (videos from youtube, image from flickr, …) but sometimes your editors will try to insert something that isn’t supported…

image

Luckily you can easily plug in additional third party services

If service support oembed

In that case it should just be a matter of adding an additinal entry to the EmbeddedMedia.config file. Let’s say you want to support videos from TED.

The details we get from oembed:

So with those details I can add a new entry to the config file (just look at the existing ones to get an overview of the xml elements you need).

1 <!– TED Settings –> 2 <provider name="TED" type="Umbraco.Web.Media.EmbedProviders.OEmbedVideo, umbraco" supportsDimensions="False"> 3 <urlShemeRegex><![CDATA[ted\.com/]]></urlShemeRegex> 4 <apiEndpoint><![CDATA[http://www.ted.com/talks/oembed.xml]]></apiEndpoint> 5 <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco"></requestParams> 6 </provider>

And now content editors can easily insert talks from ted.com

image

If service doesn’t support oembed

Even if the third party service doesn’t offer oembed support it’s still possible to provide this easy way of inserting rich content.

Since you can write custom providers, so if the service has an API you can take advantage of that.

Here is an example of a custom provider, this one adds Giphy support.

1 public class Giphy : AbstractProvider 2 { 3 public override bool SupportsDimensions 4 { 5 get { return false; } 6 } 7 8 public override string GetMarkup(string url, int maxWidth, int maxHeight) 9 { 10 var u = new Uri(url); 11 //Example url http://giphy.com/gifs/reactiongifs-2vA33ikUb0Qz6 12 var id = u.Segments.Last().Split(-).Last(); 13 //using public api key atm 14 var api = string.Format("http://api.giphy.com/v1/gifs/{0}?api_key=dc6zaTOxFJmzC", id); 15 16 using(var apiClient = new HttpClient()) 17 { 18 19 var dataFromAPI = apiClient.GetAsync(api).Result; 20 21 if (dataFromAPI.IsSuccessStatusCode) 22 { 23 var APIresult = dataFromAPI.Content.ReadAsStringAsync(); 24 25 var result = JObject.Parse(APIresult.Result); 26 27 var embedUrl = result.SelectToken("data.images.original.url").Value<string>(); 28 29 return string.Format("<img src=\"{0}\"/>", embedUrl); 30 } 31 } 32 //fall back to a default ‘fail’ gif 33 return string.Format("<iframe src=\"//giphy.com/embed/{0}\" width=\"{1}\" height=\"{2}\" frameBorder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>", 34 "bJAi9R0WWOohO",250,153); 35 } 36 }

So once this provider is in place we also need to add an entry to the config file

1 <!– Giphy Settings , not an OEmbed one –> 2 <provider name="Giphy" type="AnimatedGifs.Giphy, AnimatedGifs"> 3 <urlShemeRegex><![CDATA[giphy\.com/]]></urlShemeRegex> 4 </provider>

And now our content editors can insert gifs Glimlach

image

So that’s how you can use the EmbeddedMedia.config file, sourcecode for the example provider is available on github https://github.com/TimGeyssens/UmbracoExampleEmbedProvider

Making use of resources and services on your Umbraco v7 Controllers 1

As you can see on the Umbraco v7 API documentation, v7 is shipped with several resources and services you can use in your own controllers. Lets take a look at a simple example. The notification service.

I’m actually making use of the service in the demo project, to display a success notification if the custom item has been saved correctly.

image

First simply inject the service (as a param on your controller function, similiar to how $scope is injected)

1 angular.module("umbraco").controller("People.PersonEditController", 2 function ($scope, personResource, notificationsService) { 3

And after that you can make use of the service

1 notificationsService.success("Success", person.firstName + " " + person.lastName + " has been saved");

That’s it! Make sure to check out the docs to see the options you have with each service/resource.

Next Page »