First of I want to say that I'm both new to Dojo and not very good at javascript.

I'm trying to create a new custom property that will hold some values (x, y and path to an image). I have successfully created a property and a dojo widget so that when i set the value (this._set("value", value)), the data sets to my property and episerver "saves".

The problem

If I create an episerver "LightWeight dialog" I have a hard time to make episerver "save" with this "this._set("value", value)". Here is some example code

define([
    "dojo",
    "dojo/_base/declare",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "epi/shell/widget/dialog/LightWeight",
    "dojo/text!./someHtml.html"
],
function (
    dojo,
    declare,
    _Widget,
    _TemplatedMixin,
    LightWeight,
    template
) {

    return declare("myProject.editors.myWidget", [_Widget, _TemplatedMixin], {
        
        // Template contains an image that will go to onImageClick
        templateString: template,

        value: null,

        _onImageClick: function (event) {
            var that = this;
            var relativeX = event.clientX - this.image.x;
            var relativeY = event.clientY - this.image.y;

            // Opens a LightWeightDialog
            this.dialog = new LightWeight({
                content: new myProject.editors.ImagePopup({
                    imageUrl: that.imageUrl
                }),
            });
            
            this.dialog.show();
            
            this.connect(this.dialog, "onButtonClose", this._onRemoveDialog);
            this.connect(this.dialog.doneButtonNode, "onClick", this._onDialogDone);
            
            // If i should be running this dummy data right here, then everything works fine.
            //this.storeValues(20, 20);
        },
        
        storeValues: function (x, y) {
            var value = {
                x: x,
                y: y,
                imageUrl: this.imageUrl
            };
            
            // Save to db
            this._set("value", value);
        },
        
        _onDialogDone: function () {
            var point = this.dialog.getChildren()[0].imagePoint;
            
            // Remove the dialog
            this.destroyDialog();

            // If I store it here when the dialog button is clicked, nothing is happening
            // Store values
            this.storeValues(point.X, point.Y);
        },
        
        destroyDialog: function () {
            if (this.dialog) {
                this.dialog.destroyRecursive();
                delete this.dialog;
            }
        },
        
        _onRemoveDialog: function() {
            // Remove the dialog
            this.destroyDialog();
        }
    });
});

This opens up a dialog when I click on an image in the forms mode. And when I press the "done" button in the dialog, the function "onDialogDone" is called.

This is the other widget that the popup displays

require([
        "dojo/_base/declare", "dojo/dom-construct", "dojo/ready", "dojo/_base/window",
        "dijit/_WidgetBase", "dijit/_TemplatedMixin"
],
function (declare, domConstruct, ready, win, _WidgetBase, _TemplatedMixin) {

    declare("myProject.editors.ImagePopup", [_WidgetBase, _TemplatedMixin], {
        templateString: "<div><img data-dojo-attach-point='image' data-dojo-attach-event='onclick:_onPopupImageClick'></div>",

        startup: function () {
            this.inherited(arguments);
            
            var that = this;
            $(this.image).attr('src', that.imageUrl);

            this.connect(this.image, "_onPopupImageClick", this._onPopupImageClick);
        },
        
        _onPopupImageClick: function (event) {
            var relativeX = event.clientX - this.image.x;
            var relativeY = event.clientY - this.image.y;
            this.imagePoint = { x: relativeX, y: relativeY };

            domConstruct.destroy("imageFocusPointPopup_point");
            
            var top = (relativeY + 10) + 'px';
            var left = (relativeX + 10) + 'px';

            domConstruct.create("div", { id: "imageFocusPointPopup_point", style: { top: top, left: left, position: "absolute", width: "10px", height: "10px", background: "red", border: "1px solid white" } }, this.domNode);
        }
    });
});

The question

How can I make episerver save when I press the button "done" in the lightweight dialog?