Nibble

One Umbraco package action to rule all config transforms 4

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

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.

Custom sections/trees/Pages/Dialogs in Umbraco v7 9

As promised as a follow up on the example project i posted I’ll also outline the different steps.

Step 1: Petapoco

The custom tree needs some data to work with and to do that we’ll use the db and since Umbraco is shipped with Petapoco we can take advantage of that. So first I’ll define the POCO:

1 [TableName("People")] 2 public class Person 3 { 4 public Person(){} 5 6 [PrimaryKeyColumn(AutoIncrement = true)] 7 public int Id { get; set; } 8 public string FirstName { get; set; } 9 public string LastName { get; set; } 10 11 public override string ToString() 12 { 13 return FirstName + " " + LastName; 14 } 15 }


Then make sure this table is created if it doesn’t exist

1 public class RegisterEvents : ApplicationEventHandler 2 { 3 protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) 4 { 5 var db = applicationContext.DatabaseContext.Database; 6 7 //Check if the DB table does NOT exist 8 if (!db.TableExist("People")) 9 { 10 //Create DB table - and set overwrite to false 11 db.CreateTable<Person>(false); 12 } 13 } 14 }

 

Step 2: The Api Controller

Next we’ll create the controller that will contain the different methods for crud operations with our data (again using Petapoco)

1 [PluginController("Example")] 2 public class PersonApiController : UmbracoAuthorizedJsonController 3 { 4 public IEnumerable<Person> GetAll() 5 { 6 7 var query = new Sql().Select("*").From("people"); 8 return DatabaseContext.Database.Fetch<Person>(query); 9 } 10 11 public Person GetById(int id) 12 { 13 14 var query = new Sql().Select("*").From("people").Where<Person>(x => x.Id == id); 15 return DatabaseContext.Database.Fetch<Person>(query).FirstOrDefault(); 16 17 } 18 19 public Person PostSave(Person person) 20 { 21 if (person.Id > 0) 22 DatabaseContext.Database.Update(person); 23 else 24 DatabaseContext.Database.Save(person); 25 26 return person; 27 } 28 29 public int DeleteById(int id) 30 { 31 return DatabaseContext.Database.Delete<Person>(id); 32 } 33 34 }

 

Step 3: The section

We’ll place our new tree in a new section so let’s create a new section

1 [Application("example", "Example","icon-people", 15)] 2 public class Section: IApplication {}

 

Basicly you need a class and decorate that with the Application attribute, that needs an application alias, name, icon and sort order.

Make sure to give your user access to this section otherwise it won’t show up yet.

Step 4: The tree

Next we’ll create the tree that will list data from our custom People table

1 [Tree("example", "peopleTree", "People")] 2 [PluginController("Example")] 3 public class PeopleTreeController: TreeController 4 { 5 6 7 protected override Umbraco.Web.Models.Trees.TreeNodeCollection GetTreeNodes(string id, System.Net.Http.Formatting.FormDataCollection queryStrings) 8 { 9 //check if we’re rendering the root node’s children 10 if (id == Constants.System.Root.ToInvariantString()) 11 { 12 var ctrl = new PersonApiController(); 13 var nodes = new TreeNodeCollection(); 14 15 foreach (var person in ctrl.GetAll()) 16 { 17 var node = CreateTreeNode( 18 person.Id.ToString(), 19 "-1", 20 queryStrings, 21 person.ToString(), 22 "icon-user", 23 false); 24 25 nodes.Add(node); 26 27 } 28 return nodes; 29 } 30 31 //this tree doesn’t suport rendering more than 1 level 32 throw new NotSupportedException(); 33 } 34 35 protected override Umbraco.Web.Models.Trees.MenuItemCollection GetMenuForNode(string id, System.Net.Http.Formatting.FormDataCollection queryStrings) 36 { 37 //not worying about menu atm 38 var menu = new MenuItemCollection(); 39 return menu; 40 } 41 }

So we return a TreeNodeCollection and create a TreeNode for each item in our data source (People table). So when we deploy this we should have a tree listing the data in the table now.

The menu is emtpy atm but we’ll get to that later on.

Step 5: AngularJS resource

Before we start with the edit page and the dialogs we’ll create an AngularJS resource that interacts with the APIController and that we will be able to inject in our future AngularJS controllers

1 angular.module("umbraco.resources") 2 .factory("personResource", function ($http) { 3 return { 4 getById: function (id) { 5 return $http.get("backoffice/Example/PersonApi/GetById?id=" + id); 6 }, 7 save: function (person) { 8 return $http.post("backoffice/Example/PersonApi/PostSave", angular.toJson(person)); 9 }, 10 deleteById: function(id) { 11 return $http.delete("backoffice/Example/PersonApi/DeleteById?id=" + id); 12 } 13 }; 14 });

Step 6: Package manifest

And of course make sure Umbraco knows about this new file by adding a package manifest

1 { 2 javascript: [ 3 ~/App_Plugins/Example/person.resource.js 4 ] 5 }

Step 7: The edit page controller

The AngularJS controller used by the edit page, will fetch a person by it’s id using the resource and will also save a person

1 angular.module("umbraco").controller("People.PersonEditController", 2 function ($scope, $routeParams, personResource, notificationsService) { 3 4 $scope.loaded = false; 5 6 if ($routeParams.id == -1) { 7 $scope.person = {}; 8 $scope.loaded = true; 9 } 10 else{ 11 //get a person id -> service 12 personResource.getById($routeParams.id).then(function (response) { 13 $scope.person = response.data; 14 $scope.loaded = true; 15 }); 16 } 17 18 $scope.save = function (person) { 19 personResource.save(person).then(function (response) { 20 $scope.person = response.data; 21 22 notificationsService.success("Success", person.firstName + " " + person.lastName + " has been saved"); 23 }); 24 }; 25 });

of course also make sure to update your manifest file to include this js file

Step 8: the edit page view

The actual edit page, will show an input for the firstName and lastName

1 <form name="personForm" 2 ng-controller="People.PersonEditController" 3 ng-show="loaded" 4 ng-submit="save(person)" 5 val-form-manager> 6 <umb-panel> 7 <umb-header> 8 9 <div class="span7"> 10 <umb-content-name placeholder="@placeholders_entername" 11 ng-model="person.firstName" /> 12 </div> 13 14 <div class="span5"> 15 <div class="btn-toolbar pull-right umb-btn-toolbar"> 16 <umb-options-menu ng-show="currentNode" 17 current-node="currentNode" 18 current-section="{{currentSection}}"> 19 </umb-options-menu> 20 </div> 21 </div> 22 </umb-header> 23 24 <div class="umb-panel-body umb-scrollable row-fluid"> 25 <div class="tab-content form-horizontal" style="padding-bottom: 90px"> 26 <div class="umb-pane"> 27 28 29 30 <umb-control-group label="First name" description="Person’s first name’"> 31 <input type="text" class="umb-editor umb-textstring" ng-model="person.firstName" required /> 32 </umb-control-group> 33 34 <umb-control-group label="Last name" description="Person’s last name’"> 35 <input type="text" class="umb-editor umb-textstring" ng-model="person.lastName" required /> 36 </umb-control-group> 37 38 39 <div class="umb-tab-buttons" detect-fold> 40 <div class="btn-group"> 41 <button type="submit" data-hotkey="ctrl+s" class="btn btn-success"> 42 <localize key="buttons_save">Save</localize> 43 </button> 44 </div> 45 </div> 46 47 </div> 48 </div> 49 </div> 50 51 </umb-panel> 52 </form>

 

Step 9: Update the treecontroller with menu items

So we also want some actions on our tree, a refresh and create on the root and a delete on the items

1 protected override Umbraco.Web.Models.Trees.MenuItemCollection GetMenuForNode(string id, System.Net.Http.Formatting.FormDataCollection queryStrings) 2 { 3 var menu = new MenuItemCollection(); 4 5 if (id == Constants.System.Root.ToInvariantString()) 6 { 7 // root actions 8 menu.Items.Add<CreateChildEntity, ActionNew>(ui.Text("actions", ActionNew.Instance.Alias)); 9 menu.Items.Add<RefreshNode, ActionRefresh>(ui.Text("actions", ActionRefresh.Instance.Alias), true); 10 return menu; 11 } 12 else 13 { 14 15 menu.Items.Add< ActionDelete>(ui.Text("actions", ActionDelete.Instance.Alias)); 16 17 } 18 return menu; 19 }

 

Step 10: The delete controller

For create we don’t need a controller and view since it uses a convention but for the delete one we do.

1 angular.module("umbraco") 2 .controller("People.PersonDeleteController", 3 function ($scope, personResource, navigationService) { 4 $scope.delete = function (id) { 5 personResource.deleteById(id).then(function () { 6 navigationService.hideNavigation(); 7 8 }); 9 10 }; 11 $scope.cancelDelete = function () { 12 navigationService.hideNavigation(); 13 }; 14 });

 

Step 11: The delete view

1 <div class="umb-pane" ng-controller="People.PersonDeleteController"> 2 <p> 3 Are you sure you want to delete {{currentNode.name}} ? 4 </p> 5 6 <div> 7 <div class="umb-pane btn-toolbar umb-btn-toolbar"> 8 <div class="control-group umb-control-group"> 9 <a href="" class="btn btn-link" ng-click="cancelDelete()"><localize key="general_cancel">Cancel</localize></a> 10 <a href="" class="btn btn-primary" ng-click="delete(currentNode.id)"><localize key="general_ok">OK</localize></a> 11 </div> 12 </div> 13 </div> 14 </div>

 

And those are all the different steps invoved in creating your own section/tree/page/dialog in Umbraco v7. The complete project is available on github.

Umbraco v7 trees, DefaultMenuAlias 0

Something you can do in trees created with a TreeController is define a default menu item. So instead of having the ability to choose an action it will default to the set action (like in content it will default to create).

To do this all you have to set is the DefaultMenuAlias property on your menu.

So in the example project I created I just add menu.DefaultMenuAlias = ActionDelete.Instance.Alias;

to make delete the default action on my tree items (it’s also the only option so it makes sense to default to it).

So now I don’t get the following screen anymore (the overview of available actions)

actions

but it will default to the delete action immedialty showing the delete dialog

default

If you stil wish to show the overview you can use nav.hideDialog(true) in your view

Extending the Umbraco backend Using Angularjs and WebAPI 2

After the example project I creating using MVC I thought it would be fun to show how you can now extend the Umbraco v7 backoffice with AngularJS and WepAPI. So in Umbraco v7 you have three options webforms, mvc or angularjs/webapi.

So I’ve just published a new project to github that does extactly that https://github.com/TimGeyssens/UmbracoAngularBackofficePages

image

I’l follow up this post with some more detailed ones describing the different steps

Umbraco Contour Masterclass 1

Better late then never! During the annual Umbraco conference codegarden I taught a workshop on Contour.

It contained the following things;

  • Modifying form markup (bootstrap markup)
  • Creating custom form elements (field types) 
  • Attaching extra functionality to a form (workflow types)
  • Connecting Contour to third party services (podio)
  • Hooking in custom validation rules
  • And making all these components as flexible as possible so you can deploy them across projects

So I just wanted to share the workbook and start solution for those that are interested in learning more about Contour.

« Previous PageNext Page »