Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Topic author was deleted

    Dec 30, 2013 @ 22:09

    Umb 7 Property Editor Add a Controller to Prevalue Fields

    I just wanted to float this here before I create a Feature Request.

    Problem:

    I want to add dynamic functionality to the prevalue of a custom property editor.  There appears no way (in the docs) to add a dependency/controller to the views to each prevalue property.

    Ultimately I want to add sorting to a list of input.

    Research Done:

    I noticed that the Umbraco.CheckboxList and Umbraco.DropdownList both have add/remove buttons.  But after combing through the core, I couldn't see how a custom script could be injected.

    I didn't see anything in the docs: http://umbraco.github.io/Belle/#/tutorials/CreatingAPropertyEditor

    I tried adding a javascript property like so to no avail:

    prevalues: {

    fields: [

    {

    label: "Column Names",

    description: "Enter the column names",

    key: "columns",

    view: "~/App_Plugins/TextMatrix/prevalues.columns.view.html",

    javascript: [

    '~/App_Plugins/TextMatrix/prevalue.columns.controller.js' ],

    validation: [

    {

    type: "Required" 

    }                     

    ]

    }

    ]

    }

     

    I suppose I could try adding a script tag to the view but this doesn't seem like the 'angular' way.

    Any helpers?

  • David Zweben 268 posts 753 karma points
    Dec 31, 2013 @ 02:40
    David Zweben
    1

    Just to make sure I understand correctly, you're looking to modify the behavior of the 'multivalues' prevalue editor (the one that checkboxlist and dropdownlist use) so that the textboxes are sortable, correct?

    I'm not aware of any official way to inject code into the prevalue editor from the manifest or the property editor's view. I suspect it simply isn't supported though; I believe the official way to do something like this would be to build a custom prevalue editor and specify that in place of the built-in one.

    Tim Geyssens has a good post that discusses custom prevalue editors on his blog here: http://www.nibble.be/?p=377 (scroll down to "Using Prop Editors as Prevalue Editors"). These links might help with the Angular sorting code: (1), (2)

    I'm interested in building a sortable prevalue editor for my own property editor project, so I'm interested to see what you're able to do here. If I get something working myself, I'll let you know.

    Regards,
    David

  • Comment author was deleted

    Dec 31, 2013 @ 04:57

    @David

    Yep you've got the right line of thinking.

    Thanks for Tim's post.  I'll have to try out his solution and see if by simply specifying the view it'll bring in the associated controller logic too.

    I have the sort logic down so far (http://bit.ly/1c4XAa5).

    I'm looking to build a suite of property editors but this is the major issue holding me back.

    I'll share what I learn and will welcome anything you do as well.

  • David Zweben 268 posts 753 karma points
    Jan 01, 2014 @ 20:38
    David Zweben
    100

    Kevin,

    I got a sortable prevalue editor working. You did 90% of the work with that sort logic you linked to; all I really had to do was specify it as the view for a prevalue option on a new property editor's manifest, and use an ng-repeat to output the values. You were correct that it finds the controller for the prevalue editor on its own, no need to link to that anywhere in the property editor manifest.

    Here's a sample property editor with sortable prevalue editor, based on your sort code: Rough sortable prevalue editor example code

    I modified your sortable example to contain only one textbox per row for my purposes, and all the property editor does is display the prevalues in a <ul>, but this should be enough to give you the idea.

    This is just something I threw together as test, so let me know if it doesn't work right for you. You should be able to just copy over the two property editor folders into App_Config, touch web.config, add the TestPropertyEditor as a new data type, configure, and add that data type to a document type to get started, though.

    Your example sort code was very helpful, so thanks.

    Regards,
    David

  • Comment author was deleted

    Jan 01, 2014 @ 22:30

    Very nice!  Thank you so much.

  • David Zweben 268 posts 753 karma points
    Jan 04, 2014 @ 04:22
    David Zweben
    0

    I was about to post here to see if you could help me with an Angular-UI/ng-sortable issue I was having, but it was resolved as I was typing it up, so I think it's only fair that I share it with you in case you have any use for it:

    Grouped Item Sorting JSFiddle Example

    I'm going to be using it to configure the values of a <select> menu with <optgroup> grouping, but it could probably be used in a number of ways. Both groups and items can be sorted with drag-and-drop, and items can be dragged across groups.

Please Sign in or register to post replies

Write your reply to:

Draft