Copied to clipboard

Flag this post as spam?

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


  • Alex Perotti 53 posts 94 karma points
    Jan 11, 2016 @ 10:40
    Alex Perotti
    0

    Umbraco 7.4 backoffice - overlays dialog

    Hi everyone,

    I was playing around with the new umbraco backoffice.

    I saw that dialogs are moving to a new overlay approach and I wonder if there is something that could give me a basic example to start implementing it for custom property editors.

    Thank you,

    Alex

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Jan 11, 2016 @ 11:05
    Dennis Aaen
    0

    Hi Alex,

    Perhaps this documentation about the dialogService can help you a step further to achieve what you are trying to do.

    http://umbraco.github.io/Belle/#/api/umbraco.services.dialogService

    Hope this helps,

    /Dennis

  • Alex Perotti 53 posts 94 karma points
    Jan 11, 2016 @ 11:47
    Alex Perotti
    0

    Hi Denis,

    thank you for your answer. I already know how to implement a dialog, I've done it many times.

    What I'm saying is that in the 7.4 beta devs are changing the way dialogs are implemented (and the change is still undocumented) using a new angular directive umb-overlay (if you look the 7.4 scripts/views of the backoffice you can see yourself).

    I am hoping a dev has a moment to share basic example of thisnew approach

    Alex

  • Mads Rasmussen 7 posts 142 karma points
    Jan 11, 2016 @ 21:07
    Mads Rasmussen
    102

    Hi Alex,

    7.4 docs are still in the making but I hope this basic example will get you started. You can extend the overlay object with all the properties you need just as the old dialogService.

    In your html

        <umb-overlay
           ng-if="overlay.show"
           model="overlay"
           view="overlay.view"
           position="right">
        </umb-overlay>
    

    In your controller

           $scope.openOverlay = function() {
               $scope.overlay = {
                   view: "path/to/view.html",
                   title: "Set your title here",
                   show: true,
                   submit: function(model) {
    
                       // do submit magic here
    
                       $scope.overlay.show = false;
                       $scope.overlay = null;
                   },
                   close: function(oldModel) {
    
                       // do close magic here
    
                       $scope.overlay.show = false;
                       $scope.overlay = null;
                   }
               };
           };
    
  • Gerard Konings 6 posts 55 karma points
    Apr 08, 2016 @ 14:40
    Gerard Konings
    0

    Hey Mads,

    Do you have any idea how I can pass parameters to this overlay?

    I see in Umbraco.Dialogs.MediaPickerController for example:

    var dialogOptions = $scope.dialogOptions;
    

    But I don't get where those dialogoptions come from.

  • Rasmus Eeg 91 posts 457 karma points c-trib
    Jul 01, 2016 @ 19:42
    Rasmus Eeg
    0

    Hi Gerards,

    any model you pass to the <umb-overlay model="myModel">

    Is also returned trough the callbacks submit: function (myModel) and close: function (myModel)

    so in this case its the $scope.overlay

  • Bo Jacobsen 604 posts 2402 karma points
    Dec 06, 2016 @ 15:13
    Bo Jacobsen
    0

    I am trying to make my dialogService into umb-overlay.

    How do you get the model data sendt into your custom view?

    <umb-overlay
            ng-if="overlay.show"
            model="overlay"
            view="overlay.view"
            position="right">
        </umb-overlay>
    
    $scope.overlay = {
        view: "../my/view.html",
        show: true,
        title: "Overlay",
        submit: function (model) {
            $scope.overlay.show = false;
            $scope.overlay = null;
            console.log("Submit");
        },
        close: function (oldModel) {
            $scope.overlay.show = false;
            $scope.overlay = null;
            console.log("Close");
        },
        dialogModel: $scope.control.value
    }
    
    angular.module("umbraco").controller("My.Custom.ViewController", function ($scope, dialogService) {
        console.log($scope); // Gives
        /*
            $$childHead : null
            $$childTail : null
            $$listeners : Object
            $$nextSibling : null
            $$prevSibling : null
            $$watchers : null
            $id : "0CM"
            $parent : Object
            dialogModel : undefined
            this : a
            __proto__ : Object
        */
        console.log($scope.dialogData); // Gives nothing
        console.log($scope.dialogModel); // Gives nothing
    });
    

    I hope someone still see this ;)

  • Rasmus Eeg 91 posts 457 karma points c-trib
    Dec 06, 2016 @ 17:03
    Rasmus Eeg
    0

    Hi Bo,

    Take a look at this new UI documentation

    https://our.umbraco.org/apidocs/ui/#/api/umbraco.services.dialogService

  • Bo Jacobsen 604 posts 2402 karma points
    Dec 07, 2016 @ 08:10
    Bo Jacobsen
    0

    Yes i know the https://our.umbraco.org/apidocs/ui/#/api/umbraco.services.dialogService, but i cant seem to find out how to make the overlay from the dialogService.

    Atm i use this

    $scope.openDialog = function () {
        dialogService.open({
            template: '../App_Plugins/myPlugin/myview.html',
            show: true,
            dialogData: $scope.control.value,
            callback: function (value) {
                $scope.control.value = value;
            }
        });
    };
    

    And it works. But i would like it as an umb-overlay.

    Do you know how to?

  • Mads Rasmussen 7 posts 142 karma points
    Dec 07, 2016 @ 08:23
    Mads Rasmussen
    0

    Hi Bo,

    On the umbOverlay component in your html you can see that you pass in your “overlay” model into the component in the “model” attribute. This means that you will have access to all the data from that model on $scope.model inside the component.

    You can try to do a console log on $scope.model.title and then you will hopefully see “Overlay” in your log. And if you log $scope.model.dialogModel you will see the value from $scope.control.value

    I hope this makes sense.

    Have a wonderful day.

  • Bo Jacobsen 604 posts 2402 karma points
    Dec 07, 2016 @ 08:49
    Bo Jacobsen
    0

    Thanks Mads.

    Now it all makes sence to me. Saved me alot of headache.

  • Alex Perotti 53 posts 94 karma points
    Jan 11, 2016 @ 21:14
    Alex Perotti
    0

    Thank you Mads,

    this was exactly what I was looking for, thank you very much

    Alex

Please Sign in or register to post replies

Write your reply to:

Draft