Copied to clipboard

Flag this post as spam?

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


  • MrFlo 159 posts 403 karma points
    Apr 27, 2015 @ 18:50
    MrFlo
    0

    Using memberpicker control in a custom angular section

    I have created a custom section inside umbraco to allow user to send messages to members. (v7.2.4)

    I can not have the memberpicker to work inside my plugin controller.

    I have tried to do the same as the http://www.enkelmedia.se/blogg/2013/12/4/umbraco-7-use-the-rich-text-editor-tinymce-in-a-custom-section.aspx but I have undefined config properties or the model is not properly created.

    How can I use this memberpicker inside my custom controller and get the memberId (only one member) ? 

    thanks in advance,

    MrFlo

  • MrFlo 159 posts 403 karma points
    Apr 28, 2015 @ 11:09
    MrFlo
    0

    Hi, 

    I manage to have it working, I have use this code from github: 

    <div ng-controller="Umbraco.PropertyEditors.MemberPickerController" class="umb-editor umb-memberpicker">
        <ul class="unstyled list-icons"
            ng-model="renderModel">
            <li ng-repeat="node in renderModel">
    
                <i class="icon icon-navigation handle"></i>
    
                <a href="#" prevent-default ng-click="remove($index)" style="text-decoration:none;">
                    <i class="icon icon-delete red hover-show"></i>
                    <i class="{{node.icon}} hover-hide"></i>
                    {{node.name}}
                </a>
            </li>
        </ul>
    
        <ul class="unstyled list-icons" ng-show="model.config.multiPicker === true || renderModel.length === 0">
            <li>
                <i class="icon icon-add blue"></i>
                <a href="#" ng-click="openMemberPicker()" prevent-default>
                    <localize key="general_add">Add</localize>
                </a>
            </li>
        </ul>
    </div>

    And I have initialised the config like this: 

     $scope.model.config = {};
     $scope.model.config.alias = "recipientId";
     $scope.model.config.minNumber = 1;

     

    Now I am trying to get the member id value. Do you guys have an idea how to do that ?

    Thanks,

    MrFlo

  • Comment author was deleted

    Apr 28, 2015 @ 12:43

    Can you share the controller code, you'll probably need to do this in a callback function of the open media picker dialog

  • MrFlo 159 posts 403 karma points
    Apr 28, 2015 @ 13:40
    MrFlo
    0

    Thanks for your quick reply :-)

    Here is my controller: 
    It's the send function where I need the member Id.  How can I use the callback from the Umbraco.PropertyEditors.MemberPickerController ?

     

    function MessageCreateDialogController($scope, $routeParams, $route, $q, $timeout, $window, appState, memberResource, entityResource, navigationService, notificationsService, dialogService, angularHelper, serverValidationManager, contentEditingHelper, fileManager, formHelper, umbRequestHelper, umbModelMapper, $http, notificationsService) {
    
        //setup scope vars
        $scope.model = {}; 
        $scope.loaded = false;
    
        $scope.model.config = {};
        $scope.model.config.alias = "recipientId";
        $scope.model.config.minNumber = 1;
    
        function performGet(){
            var dialogOptions = $scope.$parent.dialogOptions;       
            var deferred = $q.defer();
    
            $scope.loaded = true;
            if (dialogOptions.message !== undefined)
                $scope.model = dialogOptions.message;
            return deferred.promise;
        }
    
        $scope.send = function (id, body, recipientId) {
            //alert('test:'+$scope.model.alias+' '+$scope.model);
            dialogService.closeAll();
            //Save & send
            var dataUrl = "Backoffice/MemberManager/MemberApi/PostMessage";
            var deferred = $q.defer();
            var data = {};
            data.Body = body;
            data.ParentId = id;
            data.RecipientId = recipientId;
    
    
            $http.post(dataUrl, data).success(function (data) {
                $scope.loaded = true;
                $scope.model = data;
                $route.reload();
                notificationsService.success("Success", "You message has been sent to the member");
    
                return deferred.resolve(data);
            })
            .error(function (data, status, headers, config) {
                notificationsService.error("error", "Youre message has NOT been sent to the member: " + data.ExceptionMessage);
            });
        }
    
        performGet();
    
    
    
    }
    angular.module("umbraco").controller("Messages.Dialogs.Message.CreateController", MessageCreateDialogController);
  • Comment author was deleted

    Apr 28, 2015 @ 15:42

    Haven't done it in the way enkelmedia describes it...

    Why not simply use the memberpicker that's available on the dialogservice, http://umbraco.github.io/Belle/#/api/umbraco.services.dialogService

    Then it should be similar to what I did here http://www.nibble.be/?p=453

    there you can define the callback method and that should return an object representing the member

  • MrFlo 159 posts 403 karma points
    Apr 28, 2015 @ 18:36
    MrFlo
    0

    I have tried to do it with no luck. My callback is not triggered.

    Is it ok to do like this in my view? 

                <div ng-controller="CustomMemberController">
                    <ng-form>
                        <div ng-controller="Umbraco.PropertyEditors.MemberPickerController" ng-model="model.recipientId" class="umb-editor umb-memberpicker" ng-hide="model.AuthorName" style="margin: 38px 0px 0px 15px">
                            <ul class="unstyled list-icons"
                                ng-model="renderModel">
                                <li ng-repeat="node in renderModel">
    
                                    <i class="icon icon-navigation handle"></i>
    
                                    <a href="#" prevent-default ng-click="remove($index)" style="text-decoration:none;">
                                        <i class="icon icon-delete red hover-show"></i>
                                        <i class="{{node.icon}} hover-hide"></i>
                                        {{node.name}}
                                    </a>
                                </li>
                            </ul>
    
                            <ul class="unstyled list-icons" ng-show="model.config.multiPicker === true || renderModel.length === 0">
                                <li>
                                    <i class="icon icon-add blue"></i>
                                    <a href="#" ng-click="openMemberPicker()" prevent-default>
                                        <localize key="general_add">Add</localize>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </ng-form>
                </div>

    Here is my controllers: 

    function MessageCreateDialogController($scope, $routeParams, $route, $q, $timeout, $window, appState, memberResource, entityResource, navigationService, notificationsService, dialogService, angularHelper, serverValidationManager, contentEditingHelper, fileManager, formHelper, umbRequestHelper, umbModelMapper, $http, notificationsService) {
    
        //setup scope vars
        $scope.model = {}; 
        $scope.loaded = false;
    
         function performGet(){
            var dialogOptions = $scope.$parent.dialogOptions;       
            var deferred = $q.defer();
    
            $scope.loaded = true;
            if (dialogOptions.message !== undefined)
                $scope.model = dialogOptions.message;
            return deferred.promise;
        }
    
    
        $scope.send = function (id, body, recipientId) {
            dialogService.closeAll();
            //Save & send
            var dataUrl = "Backoffice/MemberManager/MemberApi/PostMessage";
            var deferred = $q.defer();
            var data = {};
            data.Body = body;
            data.ParentId = id;
            data.RecipientId = recipientId;
    
    
            $http.post(dataUrl, data).success(function (data) {
                $scope.loaded = true;
                $scope.model = data;
                $route.reload();
                notificationsService.success("Success", "You message has been sent to the member");
    
                return deferred.resolve(data);
            })
            .error(function (data, status, headers, config) {
                notificationsService.error("error", "Youre message has NOT been sent to the member: " + data.ExceptionMessage);
            });
        }
    
        performGet();
    }
    
    function CustomMemberController($scope) {
    
        $scope.model = {
            alias: 'recipientId',
            config: {}
        }
    
        $scope.openMemberPicker = function () {
            dialogService.memberPicker({
                multiPicker: false,
                callback: populateMember
            });
        }
    
        function populateMember(item) {
            alert('yes'+item.id);
            $scope.recipientId = item.id;
        }
    }
    
    angular.module("umbraco").controller("Messages.Dialogs.Message.CreateController", MessageCreateDialogController);

     

  • Q-ten 16 posts 116 karma points
    Sep 23, 2017 @ 12:21
    Q-ten
    0

    I had the same problem. I looked into the Umbraco controller code (js/umbraco.controllers.js) and it turns out that the callback is never called. You can set it (and they even set a default callback) but it's not used.

    The default callback adds the selected items to the model. That's not good to rely on in a replaceable callback. So my guess is that it was changed to add the items without referring to the callback (which is what happens when the dialog is submitted - almost identical to the default callback), but then they deleted the line calling the callback.

    I ended up changing the Umbraco code on my install to include the callback if it's defined (but removing the default callback that is no longer needed.)

    I'm doing this because I'm trying to reuse a bunch of properties set up in a document type. I'm pretty much defining my editor by defining a docType. Using properties I don't have to worry about getting it to look right as the css tends to be ok.

Please Sign in or register to post replies

Write your reply to:

Draft