Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Dan Lister 416 posts 1974 karma points c-trib
    Aug 18, 2014 @ 13:20
    Dan Lister
    0

    How to reuse an Umbraco Property Editor from dialogService

    Developing Umbraco 7 packages

    Hi,

    I'm looking to try and reuse some of the Umbraco property editors within a custom property editor, ideally being presented within the right hand dialog. I assumed I would have to use the dialogService. Specifically, the propertyDialog method. Unfortunately, I've not had much luck. Would anyone know how to accomplish this?

    The below is an example of my property editor controller which wants to display the Umbraco.DataTime editor within the right hand side dialog:

    $scope.addDate = function () {
    dialogService.propertyDialog({
        editor: "Umbraco.DateTime",
        value: null,
        callback: function (value) {}
    });
};

    Thanks, Dan.

    Copy Link
  • Dan Lister 416 posts 1974 karma points c-trib
    Aug 18, 2014 @ 16:18
    Dan Lister
    103

    Turns out I should have spent a little more time looking at Umbraco's source. Its relatively simple. I created a custom dialog and dialog controller which renders out an emb-editor element. Passing the correct object and config worked a treat. Here is my dialog view:

    <div class="mdp-dialog" ng-controller="Dialog">
    <form name="insertkeyvalue_form" novalidate ng-submit="submit(datepicker.value)">
        <div class="umb-panel">
            <div class="umb-panel-body no-header umb-scrollable">
                <div class="tab-content umb-control-group">
                    <umb-editor model="datepicker"></umb-editor>
                </div>
            </div>
            <div class="umb-panel-footer">
                <div class="btn-toolbar umb-btn-toolbar pull-right">
                    <a class="btn btn-link" ng-click="close()">
                        <localize key="cancel" />
                    </a>
                    <button type="submit" class="btn btn-primary" ng-disabled="!insertkeyvalue_form.$valid">
                        <localize key="buttons_save">Save</localize>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

    And my custom view:

    angular.module("umbraco").controller("Dialog", function ($scope) {

    if (typeof $scope.dialogData === 'object')
        $scope.dialogData = null;

    $scope.datepicker = {
        view: 'datepicker',
        config: {
            pickDate: true,
            pickTime: false,
            pick12HourFormat: false,
            format: "yyyy-MM-dd"
        },
        value: $scope.dialogData
    };
});
    Copy Link
  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Oct 27, 2014 @ 10:56
    Dave Woestenborghs
    0

    Hi Dan,

    How do you tie your custom dialog to your property editor. When I use the code from your first post i doesn't load my custom view.

    Dave

    Copy Link
  • Dan Lister 416 posts 1974 karma points c-trib
    Oct 29, 2014 @ 09:47
    Dan Lister
    0

    Hi Dave,

    The custom dialog view is used within a custom package. Have you got the package manifest setup correctly to use your custom view?

    Thanks, Dan.

    Copy Link
  • Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib
    Oct 29, 2014 @ 10:07
    Dave Woestenborghs
    1

    Hi Dan,

    I solved it like this : 

    dialogService.open({
                template: "pathtoview",
                dialogData: mydata,
                callback: function(value) {
                    // my call back handling                 
                }
            });

    Dave

    Copy Link
  • Sören Deger 733 posts 2844 karma points c-trib
    Mar 10, 2015 @ 13:32
    Sören Deger
    0

    Hi Dave,

    can you tell me how do you access the dialogdata "mydata" in dialog template?

    Thanks in advance.

     

    Best,

    Sören

    Copy Link
  • Sören Deger 733 posts 2844 karma points c-trib
    Mar 10, 2015 @ 13:34
    Sören Deger
    0

    Hi Dave,

    It has resolved itself, with $scope.dialogData :-) Sometimes it is too easy.
     

    Best,

    Sören

    Copy Link
  • mmaty 109 posts 281 karma points
    Jul 10, 2015 @ 16:42
    mmaty
    0

    Hi all,

    I digged out this conversation, because I try to reuse a colorpicker.

    As part of my dialog I write:

    ...
<umb-control-group label="Farbe">
    <umb-editor model="fgcolorpicker"></umb-editor>
</umb-control-group>
...

    In my controller I write:

    angular.module( "umbraco" ).controller( "MyControllerName", function ( $scope ) {
...

    $scope.fgcolorpicker = {
        view: 'colorpicker',
        config: {
        // don't know, what to write here
        },
        value: $scope.dialogData.color
    };
});

    The colorpicker doesn't appear and in the console I get a message: 

    Error: No controller: form

    Seems, as if a had to mock a property Dialog. But how do I do that?

    Does anybody has an idea what's missing here?

    Mirko

    Copy Link
  • Christian Thillemann 8 posts 73 karma points c-trib
    Dec 17, 2015 @ 15:06
    Christian Thillemann
    0

    regarding the error

    Error: No controller: form

    I wrapped the html in a form-tag 

    <form> 
 <umb-control-group label="Farbe">
       <umb-editor model="fgcolorpicker">
       </umb-editor>
   </umb-control-group>    
</form>
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft