Dynamically initial selectbox values

[ZoltanZen]

I would like to initial value for the listboxes. But somehow I can't set the values.

This is the script:

tinymce.PluginManager.add("ag-grid", function (editor, url) {
  editor.ui.registry.addToggleButton("ag-grid", {
    onAction: () => {
      let selectboxCount = 3;

      const panel = editor.windowManager.open({
        title: "Settings",
        body: {
          type: "panel",
          items: [
            {
              type: "input",
              name: "title",
              label: "Title:",
            },
            ...Array.from({ length: selectboxCount }, (_, index) => ({
              type: "selectbox",
              name: `selectbox${index + 1}`,
              label: `Select Box ${index + 1}`,
              items: [
                { text: "Option 1", value: "1" },
                { text: "Option 2", value: "2" },
                { text: "Option 3", value: "3" } /* preselect this option */,
              ],
              value: "3", // this isn't work
            })),
          ],
        },
        buttons: [
          {
            type: "submit",
            text: "Save",
            buttonType: "primary",
          },
        ],
        onChange: function (dialogApi, details) {},
        initialData: {
          title: "something",
          selectbox2: "3", // this is work, but I need dynamically initial values
          ...Array.from({ length: selectboxCount }, (_, index) => ({
            //this isn't work
            [`selectbox${index + 1}`]: "3",
          })),
        },

        onSubmit: (api) => {},
      });
    },
  });
});

I tried set the value when the selectbox created.

value: "3", // this isn't work

I tried set the value in initialData function.

selectbox2: "3", // this is work, but I need dynamically initial values
...Array.from({ length: selectboxCount }, (_, index) => ({ //this isn't work
    [`selectbox${index + 1}`]: "3",
})),

, but only the selectbox2 get the desired value '3'.

So I found one answer, but I don't know how to use in my case.
The return value from editor.windowManager.open() is a Dialog Instance API, which has a setData method tiny.cloud/docs/ui-components/dialog/#dialogdataandstate github.com/tinymce/tinymce/issues/4765

[lostkeys]

@ZoltanZen Hi. I'll convert this to a discussion topic because it's not a feature request or a bug.

[ZoltanZen]

Thanks god, so you have a solution, because you know the answer for my question.
Can you help me than?
I thought It was a bug, because the value set and the initialData method aren't working.
I tried many method with setData with onInit function, but I can't figure it out how could be work.

[TheSpyder]

We keep the structure and data separate, so yes the initial value cannot be set through the dialog specification. Only initialData.

Try running your initialData code by itself and inspect the result. I think you'll find it doesn't do what you expect it to.

As for the setData method, I thought the docs were fairly clear on this point (perhaps the link moved, my comment was nearly 5 years ago). Both getData and setData work with object structures that match initialData. The setData method supports passing partial objects to only update required fields.
https://www.tiny.cloud/docs/tinymce/latest/dialog-apis/#dialog-api-methods

[ZoltanZen]

So I tried many options.

This is working, but only with a button after the dialog window created.

tinymce.PluginManager.add("ag-grid", function (editor, url) {
  editor.ui.registry.addToggleButton("ag-grid", {
    onAction: () => {
      let selectboxCount = 3;

      const panel = editor.windowManager.open({
        title: "Settings",
        body: {
          type: "panel",
          items: [
            {
              type: "input",
              name: "title",
              label: "Title:",
            },
            ...Array.from({ length: selectboxCount }, (_, index) => ({
              type: "selectbox",
              name: `selectbox${index + 1}`,
              label: `Select Box ${index + 1}`,
              items: [
                { text: "Option 1", value: "1" },
                { text: "Option 2", value: "2" },
                { text: "Option 3", value: "3" } /* preselect this option */,
              ],
              value: "3", // this isn't work
            })),
          ],
        },
        buttons: [
          {
            type: "custom",
            name: "SetData",
            text: "SetData",
          },
          {
            type: "submit",
            text: "Save",
            buttonType: "primary",
          },
        ],
        onChange: function (dialogApi, details) {},
        initialData: {
          title: "something",
          selectbox2: "3", // this is work, but I need dynamically initial values
          ...Array.from({ length: selectboxCount }, (_, index) => ({
            //this isn't work
            [`selectbox${index + 1}`]: "3",
          })),
        },

        onSubmit: (api) => {},
        onInit: (api) => {
          api.setData({ selectbox1: "2" }) //not working
        },
        onAction: (dialogApi) => {
          for (let index = 0; index < selectboxCount; index++) {
            dialogApi.setData({  [`selectbox${index + 1}`]: "3", }) // this is working, but how can be automate run when the window is created?
            
          }
        }
      });
    },
  });
});

So when I press the setData button, the selectboxes value changed to "Option 3", but I need to start this funtion when the dialog window is created.

Or I miss something? and there is easier method for dinamically fill a listboxes?

[TheSpyder]

You can set it to 3 when the dialog loads using initialData. This is why I suggested trying your initialData code in a standalone context, it's not doing what you think it's doing.

[ZoltanZen]

Where can I use initialData code than other in initialData function?

[ZoltanZen]

I am a little dissapoint about the result, but this is working well:

tinymce.PluginManager.add("ag-grid", function (editor, url) {
  editor.ui.registry.addToggleButton("ag-grid", {
    onAction: () => {
      let selectboxCount = 3;

      const createwindowprom = new Promise((resolve, reject) => {
      const panel = editor.windowManager.open({
        title: "Settings",
        body: {
          type: "panel",
          items: [
            {
              type: "input",
              name: "title",
              label: "Title:",
            },
            ...Array.from({ length: selectboxCount }, (_, index) => ({
              type: "selectbox",
              name: `selectbox${index + 1}`,
              label: `Select Box ${index + 1}`,
              items: [
                { text: "Option 1", value: "1" },
                { text: "Option 2", value: "2" },
                { text: "Option 3", value: "3" } /* preselect this option */,
              ],
            })),
          ],
        },
        buttons: [
          {
            type: "submit",
            text: "Save",
            buttonType: "primary",
          },
        ],
        onChange: function (dialogApi, details) {},
        initialData: {
          title: "something",
        },
        onSubmit: (api) => {}
      });
      resolve(panel);
    });

    createwindowprom.then(
      (panel) => {
        for (let index = 0; index < selectboxCount; index++) {
          panel.setData({  [`selectbox${index + 1}`]: "3", })
        }
      },
      (reason) => {
        console.error(reason); // Error!
      },
    );

    },
  });
});

I know you have many todo, but if you have some time, can you implement in initialdate function, what can do dinamically fill data?
But I can live without this, so just do what you think good.

And thanks for help.

[TheSpyder]

This is an editor support area, not a JavaScript tutorial area. I'm telling you to look at the value of your initialData object after it is created. You'll see the object does not match the dialog data structure. When you spread an array of objects into an object it does not merge the objects. You get numbered properties from the array and those have object values.

If your initialData object had properties for each of the selectbox${index+1} fields, it would work. Currently it does not have those fields.

Paste this into your browser console and it'll print the object value.

let selectboxCount = 3;
let initialData = {
          title: "something",
          selectbox2: "3", // this is work, but I need dynamically initial values
          ...Array.from({ length: selectboxCount }, (_, index) => ({
            //this isn't work
            [`selectbox${index + 1}`]: "3",
          })),
        };
initialData

[ZoltanZen]

My original script made of array of object, what was bad in case. I was very sure my code is doing good what I thought, but what is wrong is wrong.

Here is my corrected code:

tinymce.PluginManager.add("ag-grid", function (editor, url) {
  editor.ui.registry.addToggleButton("ag-grid", {
    onAction: () => {
      let selectboxCount = 3;


      const initialDatadata = {
        title: "something"
      }

      for (let index = 0; index < selectboxCount; index++) {
        initialDatadata[`selectbox${index + 1}`] = '3';
      }

      const panel = editor.windowManager.open({
        title: "Settings",
        body: {
          type: "panel",
          items: [
            {
              type: "input",
              name: "title",
              label: "Title:",
            },
            ...Array.from({ length: selectboxCount }, (_, index) => ({
              type: "selectbox",
              name: `selectbox${index + 1}`,
              label: `Select Box ${index + 1}`,
              items: [
                { text: "Option 1", value: "1" },
                { text: "Option 2", value: "2" },
                { text: "Option 3", value: "3" } /* preselect this option */,
              ],
            })),
          ],
        },
        buttons: [
          {
            type: "submit",
            text: "Save",
            buttonType: "primary",
          },
        ],
        onChange: function (dialogApi, details) {},
        initialData: initialDatadata,
        onSubmit: (api) => {}
      });
    

    },
  });
});

Thanks for devs.