Unable to dynamically update widget content

Webix JS
1

I am currently having an issue when it comes to dynamically updating widget content. I have a custom made sticky note widget, that when an icon is clicked a popup appears where the user can enter in a new note to be displayed and then the user clicks the update button and the text should be changed.

The text is represented in a window, where the head contains the toolbar that has the edit icon in it, and the body is just a template with default text in it now. Ideally what I want to do is just use the define() function in webix to update the template field of the body, but I don’t know how to access it.

I have tried actually using the define function and nothing happens, I have tried setting a global variable that has its value changed whenever a user clicks update and that did not work, I have also tried fully replacing a label view with another that has the updated content and that just resulted in a blank view.


sticky_note = webix.ui({
        view: "window",
        id: "win2",
        move: true,
        container: "widgets",
        left: 150, top: 300,
        head: {
            view: "toolbar", margin: -2, cols: [
                {view: "icon", icon: "times-circle", click: "$$('win2').hide();"},
                {view: "icon", icon: "edit", popup: "edit_text"}
            ]
        },
        template: "Back in 15."

    });

    webix.ui({
        view:"popup",
        id:"edit_text",
        head:"Edit note",
        width:300, height: 100,
        body:{ rows:[
            {view:"text", id:"input", label:"New note: "},
            {view:"button", value:"Update",
            click:"$$('win2').define('template',$$('input').getValue());$$('edit_text').hide(); "}
        ]
        }
    });
2

Please check the sample with the following corrections:

  • the window content should be defined in the body:{}.
  • at least the top layout of the body (or the entire ui.window) should have a height. It’s also possible to set the autoheight:true
  • therefore, you can get the needed object as windowView.getBody()
  • after setting the new template, refresh() is required

http://webix.com/snippet/ce166556

3

Thank you so much!