Copied to clipboard

Flag this post as spam?

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


  • Harsheet 71 posts 302 karma points
    Nov 18, 2016 @ 04:26
    Harsheet
    0

    Create custom & dynamic property editor

    Hi,

    I have a requirement like this.

    I want to create a property editor which should select the values from the document types I will create under the home node.

    Eg. Under home - I have cat1, cat2, cat3

    Now I want a checkbox list created from these that I want to use in one of the templates.

    Is this possible??

  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    Nov 18, 2016 @ 07:16
    David Brendel
    0

    Hi Harsheet,

    yes that should be possible. Your editor need a controller which get the id of the current node you are one. Then in the controller fetch your categorie nodes under the home node and return them (maybe just id and name).

    Then render the checkboxes for each returned node and save the id of the selected checkbox.

    Regards David

  • Alan Hill 14 posts 57 karma points
    Nov 18, 2016 @ 09:16
    Alan Hill
    0

    I've done exactly this - we have a page of our site where users can create category pages and articles - inside the articles we need to allow them to choose a category that the article belongs to.

    So I created a custom property editor that calls an API controller in App_Code, passing the "document type alias" that we want to filter by. The controller then performs a "GetChildren" on the contentService with this clause:

    .Where(x => x.ContentType.Alias.Equals(documentTypeAlias))

    The list is returned to the calling js where it sets:

    $scope.documents = response.data;

    That list of documents is then output as a select list in the angular/html.

    Hope that's of some help.

    Cheers.

  • Harsheet 71 posts 302 karma points
    Nov 22, 2016 @ 04:31
    Harsheet
    0

    Hi,

    Can you give me some more code details for this solution of yours.?

  • Alan Hill 14 posts 57 karma points
    Nov 22, 2016 @ 10:43
    Alan Hill
    1

    Let me dig out some code (and remove proprietary stuff) and I'll get back to you.

  • Alan Hill 14 posts 57 karma points
    Nov 22, 2016 @ 11:09
    Alan Hill
    101

    Ok, here goes, hope this helps.

    We have a custom property editor called "CategoryPicker", in it we have a CategoryPicker.controller.js containing this:

    CategoryPickerResource.getChildren(rootNode, "<pageType>").then(function (response) {
        $scope.documents = response.data;
    }, function () {
        notificationsService.error("Error", "Error loading documents");
    });
    
    • the "rootNode" is a prevalue that we set up when using the datatype, it's pointing to the parent node under which the categories are children.
    • the "pageType" is the document type we want to filter the list of children by

    This then uses the CategoryPicker.resources.js file to call the API, this code is:

    getChildren: function (rootNode, documentTypeAlias) {
            return $http.get("backoffice/Plugins/CategoryPickerApi/GetChildDocuments/?rootNode=" + rootNode + "&documentTypeAlias=" + documentTypeAlias);
        }
    

    This then calls our "CategoryPickerApiController.cs" which is contained in our "App_Code" folder. This contains:

    public IEnumerable<DocumentInfo> GetChildDocuments(int rootNode, string documentTypeAlias)
        {
            var contentService = ApplicationContext.Services.ContentService;
    
            return contentService.GetChildren(rootNode).Where(x => x.ContentType.Alias.Equals(documentTypeAlias)).Select(x => new DocumentInfo { Id = x.Id.ToString(CultureInfo.InvariantCulture), Name = x.Name });
            //return contentService.GetChildren(rootNode)
            //    .Select(x => new DocumentInfo { Id = x.Id.ToString(CultureInfo.InvariantCulture), Name = x.Name});
        }
    

    You can see in the resource file that the response.date was set to the $scope.documents, that populates the dropdown in our editor.html:

    <div ng-controller="CategoryPicker.Controller">
    <select name="CPDropdownList"
            class="umb-editor umb-dropdown"
            ng-model="model.value"
            ng-options="d.Id as d.Name for d in documents" />
    

    Obviously these aren't full code files, but the main bits from each, I'm not writing the whole thing for you :-).

    Let me know how you get on.

  • Harsheet 71 posts 302 karma points
    Nov 22, 2016 @ 21:46
    Harsheet
    0

    Hey Thanks for this info.

  • Harsheet 71 posts 302 karma points
    Nov 22, 2016 @ 23:18
    Harsheet
    0

    Hi Alan, I am able to populate the dynamic list. Thanks for your solution.

    Another problem now is (Should have asked this before).

    I already had a checkbox list (hardcoded one), which I have changed to dynamic one.

    Now in the newly created dynamic checkbox list, the checkboxes will not be selected. Offcourse!!!

    Is there any way that allow me to get the checked checkboxes Id from the old hardcoded checkbox list so that I can prepopulate the newly dynamic list with these.

    Thanks

  • Alan Hill 14 posts 57 karma points
    Nov 23, 2016 @ 11:13
    Alan Hill
    1

    I assume you are meaning that your existing checkbox list is hardcoded from the perspective of the available options being hard-coded (by being selected as pre-values in your data type). If the alias of your new property editor is the same as the hard coded one, then you should be able to get the value out using $scope.model in the controller of your custom editor.

    If you put a breakpoint in your javascript at the top of your plugin controller, can you see if $scope.model.value has value of any sort? That's where I'd start looking - since that's how I would look to set the editor to show the current value (eg from the last time the page was edited).

    That's all I can think of at the moment, hope it's of some help.

    Cheers,

    Alan

  • Harsheet 71 posts 302 karma points
    Nov 25, 2016 @ 02:50
    Harsheet
    0

    Hi Alan,

    I am able to create a custom property editor for categories checkbox list.

    Everything is working fine, but when I get the value using getPropertyValue() of the selected category from the checkbox list, instead of getting the name/alias of the category, I am getting the Id.

    Can you help in this?

  • Harsheet 71 posts 302 karma points
    Nov 20, 2016 @ 23:10
    Harsheet
    0

    Hey Thanks guys, I will try these

Please Sign in or register to post replies

Write your reply to:

Draft