Episerver custom property LightWeight dialog

Vote:
 

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?

#79523
Dec 19, 2013 12:01
Vote:
 

Hi,

Did it work out for you, if yes, please let me know how did you resolve this issue?

Many thanks,
Naz

#117035
Feb 10, 2015 13:04
Vote:
 

I am no expert and this is suggestions based on my experience on what have worked and not worked

First you need to have this in your javascript file for the widget definition

onChange: function (value) {
        },

It is empty and that is ok, it is just good that it is there

I would also add another function that I call when a value  change

_updateValue: function (value) {
            if (this._started && epi.areEqual(this.value, value)) {
                return;
            }

            this._set("value", value);
            this.onChange(value);
        }

And then change the _onIputWidgetChange to look like this:

  _onInputWidgetChanged: function (value) {
            this._updateValue(value);
        },

There might be more, If you want insperation, create a new Alloy project from the VS extension and look at the StringList.js file in the clientresources\script\editors folder

#117036
Feb 10, 2015 13:32
Vote:
 

Hi Henrik,

Thank you for a quick response.

What I need is a custom property in the CMS editor tab for any pagetypes, 

When I click on the edit section, the custom property say "Add Entries" and on clicking that button, 
I get a popup interface/dialogue window, which has few input controls takes text boxes and a page reference field.
Bascially it will be a custom dialog window to open with episerver interface
and then I need them to store back to the page? I need some suggestion as how to store those 3 or 4 fields value back onto CMS page too
I believe i need to use Dojo for this. I am no expert of Dojo and just started reading it I am using version CMS version 7.0 and 7.1
What do you think I should do or any quick help to start with? Do you have any code or sample available for similar nature?
Best regards,
Naz
#117037
Feb 10, 2015 13:46
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.