Multiple instance of the same jsComponent in a screen

Support
#1

Hi,
I’ve read the documentation on topic “Generic JavaScriptComponent”, and in particular I liked the live demo of the time picker java-script-component-time-picker
In documentation is written “The initialization function name must be unique within a window”: does this mean that if I want to use multiple instances of the java-script-component-time-picker in the same screen I have to replicate the same js file changing only the name of the function?
Is there a more appealing way?

thank you

#3

Hi,

In case of time-picker you can add several components on the screen. But in general, it highly depends on a particular JS library, because the way they integrate into DOM tree differs. For example, some libraries replaces element, some add their layout into an element, some requires specific element id, class name, etc. For example, to avoid any conflicts, the time picker connector can be changes as follows:

io_jmix_sampler_screen_ui_components_javascript_component_TimePicker = function () {
    let connector = this;
    let element = connector.getElement();
    // Kind of unique id. Needs polishing
    let id = "timepicker" + Math.floor(Math.random() * 100);
    element.innerHTML = "<input id=\"" + id + "\" type=\"text\" name=\"timepicker\" class=\"timepicker\"/>";

    let timepicker;

    // Handle changes from the server-side
    this.onStateChange = function () {
        let data = this.getState().data;

        let options = {
            now: data.now,
            twentyFour: data.twentyFour,
            showSeconds: data.showSeconds,
            beforeShow: function () {
                connector.onBeforeShow();
            },
            show: function () {
                connector.onShow();
            }
        };

        timepicker = $('#' + id).wickedpicker(options);

        // Define a function that can be called from the server side
        connector.showValue = function () {
            alert(timepicker.wickedpicker('time'));
        };
    };
};

So, I’ve added kind of unique id.

Regards,
Gleb

#5

thank you Gleb