Nibble

Extending UI-O-Matic v2 with custom List Actions

Something that we’ve just added to UI-O-Matic v2 is the ability to plug in additional actions. So by default you get CRUD but now you will also be able to plug in third party ones!

Example

Let’s say you want to provide export functionality to your clients, here is how do do that (this is currently run on the latest source so still subject to change)

Defining the action

Step 1 is that we’ll need to define our action, each action consist of a name, alias and a view it will open

1 [UIOMaticAction("export","Export", "~/App_Plugins/UIOMaticAddons/export.html")] 2 public class ExportAction { }

Next we add the our model (if we take the previous example we can just add the new Action by adding it to the ListActions parameter of our UIOMatic attribute)

1 [TableName("ContactEntries")] 2 [PrimaryKey("Id", autoIncrement = true)] 3 [UIOMatic("contactentries", "Contact Entries", "Contact Entry", 4 FolderIcon = "icon-users", 5 SortColumn = "Created", SortOrder = "desc", 6 RenderType = UIOMaticRenderType.List, 7 ListActions = new[]{ typeof(ExportAction)})] 8 public class ContactEntry

The Angular View and Controller

As you see we pointed the new action to ~/App_Plugins/UIOMaticAddons/export.html so we now have to build that dialog

1 <div ng-controller="uioMaticAddons.ExportController"> 2 <p ng-show="loading">Generating Export…</p> 3 <a href="{{file}}" ng-hide="loading" target="_blank">Download export here</a> 4 </div>

 

1 angular.module("umbraco").controller("uioMaticAddons.ExportController", 2 function ($scope, uioMaticExportResource) { 3 $scope.loading = true; 4 uioMaticExportResource.getExport($scope.dialogData.typeAlias).then(function (response) { 5 $scope.file = response.data; 6 $scope.loading = false; 7 }); 8 });

 

As you can see here we just call a resource and provide it with the typeAlias (that is provided to us in the dialog data).

The resource will return the file name of the csv export.

AngularJS Resource

1 angular.module("umbraco.resources") 2 .factory("uioMaticExportResource", function ($http, umbRequestHelper) { 3 return { 4 getExport: function (typeAlias) { 5 return umbRequestHelper.resourcePromise( 6 $http.get(Umbraco.Sys.ServerVariables.uioMaticAddons.ecBaseUrl + "GetExport?typeAlias="+typeAlias), 7 Failed to generate export 8 ); 9 } 10 } 11 });

this one basicly calls our .net controller

.NET Controller

1 using CsvHelper; 2 using System; 3 using System.IO; 4 using Umbraco.Core.IO; 5 using Umbraco.Web.Editors; 6 7 namespace TestUIOMatic2Take2.Controllers 8 { 9 public class ExportController: UmbracoAuthorizedJsonController 10 { 11 public object GetExport(string typeAlias) 12 { 13 var guid = Guid.NewGuid(); 14 15 using (var textWriter = File.CreateText(IOHelper.MapPath(@"~\App_Plugins\UIOMaticAddons\Exports\" + guid + ".csv"))) 16 { 17 using (var csv = new CsvWriter(textWriter)) 18 { 19 var os = new UIOMatic.Services.PetaPocoObjectService(); 20 21 var data = os.GetAll(UIOMatic.Helper.GetUIOMaticTypeByAlias(typeAlias)); 22 23 csv.Configuration.Delimiter = ";"; 24 csv.Configuration.HasHeaderRecord = true; 25 26 csv.WriteRecords(data); 27 } 28 } 29 30 return new { data = "../App_Plugins/UIOMaticAddons/Exports/" + guid.ToString() + ".csv" }; 31 } 32 } 33 }

 

This uses the great and simple CsvHelper package to easily generate a csv file out of our data and then stores it on disk and returns the file location.

Result

I now got an additional export action I can apply to any model I wish!

Screen Shot 2016-10-27 at 22.18.45

Screen Shot 2016-10-27 at 22.18.58

Future

Once v2 final is out, I’ll make a nuget package out of this (and probably make some tweaks since this is just a proof of concept at the moment) so you can easiliy install it and extend your UI-O-Matic models

1 Comment so far

  1. Tim Geyssens on October 29th, 2016

Leave a Reply