Nibble

Advanced property editor for Umbraco v7, single file deployment

One of the community packages that is in progress of being migrated to v7 is uComponents, as you may know the current v4/v6 version is compiled into a single assembly so it’s easy to deploy and to update (since it’s just a single file).

As a test I wanted to see if that’s also possible with v7 prop editors (so embed the views and controllers in the assembly).

If you have seen some of the v7 prop editor examples out there you know that to define your extra components you’ll need to create a manifest file http://umbraco.github.io/Belle/#/tutorials/manifest (no more need for vs)

You can also define your prop editors in code (all the core ones are defined like that) just take a look at https://github.com/umbraco/Umbraco-CMS/tree/7.0.2/src/Umbraco.Web/PropertyEditors 

So if I take the char limit example http://www.nibble.be/?p=285 the manifest file becomes

 [PropertyEditor("Example", "Example Editor", "/App_Plugins/Example/Resource/editor.html", ValueType = "TEXT")]
    [PropertyEditorAsset(ClientDependencyType.Javascript, "/App_Plugins/Example/Resource/controller.js")]
    public class ExamplePropEditor : PropertyEditor
    {
        protected override PreValueEditor CreatePreValueEditor()
        {
            return new ExamplePreValueEditor();
        }
 
        internal class ExamplePreValueEditor : PreValueEditor
        {
            public ExamplePreValueEditor()
            {
                //create the fields
                Fields.Add(new PreValueField()
                {
                    Description = "Enter the number of chars to limit on",
                    Key = "limit",
                    View = "requiredfield",
                    Name = "Number of chars"
                });
                
            }
        }
    }

 

THe editor and controller is still the same but in vs make sure to set the build action of the js and html file to embedded resource

image

Final bit is getting the controller and view out of the assembly and this is done with a simple controller

   public class EmbeddedController : Controller
    {
        public FileStreamResult Resource(string id)
        {
            var resourceName = Assembly.GetExecutingAssembly().GetManifestResourceNames().ToList().FirstOrDefault(f => f.EndsWith(id));
 
            var a = typeof(EmbeddedController).Assembly;
 
            return new FileStreamResult(a.GetManifestResourceStream(resourceName), GetMIMEType(id));
        }
 
        private string GetMIMEType(string fileId)
        {
            if (fileId.EndsWith(".js"))
            {
                return "text/javascript";
            }
            if (fileId.EndsWith(".html"))
            {
                return "text/html";
            }
            if (fileId.EndsWith(".css"))
            {
                return "text/stylesheet";
            }
            return "text";
        }
       
    }

Of course since it’s a normal mvc controller it isn’t auto routed and I need to setup the routing

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
 
            routes.MapRoute(
                name: "Example",
                url: "App_Plugins/Example/{action}/{id}",
                defaults: new { controller = "Embedded", action = "Resource", id = UrlParameter.Optional }
            );
        }
    }

 

And make sure that the route get’s registered when the application starts

 public class StartUpHandlers : ApplicationEventHandler
    {
        protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }
    }

So now we can fetch the embedded resource by requesting

/App_Plugins/Example/Resource/resourcefilename.extension

like

/App_Plugins/Example/Resource/editor.html

And that’s it, build and just deploy the assemby to the umbraco v7 instance

Complete source of this example is available here https://github.com/TimGeyssens/EmbeddedPropEditorExample

4 Comments so far

  1. Martin on January 29th, 2014

    Absolutely AWESOME!

  2. Markus Johansson on January 30th, 2014

    Awesome post Tim!!

    Will this alao work for action dialogs? Like create, delete and so on? Feels like a very appealing way to distribute a package. Any known limitations?

  3. Tim Geyssens on January 30th, 2014

    @Markus Johansson yeah should work since in v7 all of these are just html/js/css

    for v4/v6 and usercontrols check out the 301 url tracker code for those you can use a virtual path provider

  4. Carlos Casalicchio on January 31st, 2018

    how about embedding language files (localization)? I didn’t find a PropertyEditorAsset that has Language as a option

Leave a Reply