Form.IO - Form events not firing

Question

I'm using Form.IO JS library for developing various new forms. Recently, the need to perform some actions upon opening the form has been presented. So, I searched the documentation on form events. Except from 'change' / 'submit' / 'focus' / 'blur' events, no other event is firing after initialising my form. I'm providing some of my code below:

Formio.createForm(document.getElementById('formio'), components, formOptions)
      .then(function(form) {
         // Working
         form.on('change', function() {
           console.log('change');
         });
         // NOT WORKING
         form.on('initialized', function() {
           console.log('initialized');
         });
         // NOT WORKING
         form.on('render', function() {
           console.log('render');
         });
       });

Does someone have any ideas whatsoever on why those events are not firing? Thanks in advance!

Brendan Bond · Accepted Answer · 2023-01-05T11:54:19.880

1

The initialized event should fire just fine as you've described. The render event will fire when you re-render the form.

See JSFiddle and take a look at the comments and the console output.

EDIT:

From our discussion below, it seems like you just want to know a certain point in the form render process where it's OK to add some custom logic. When the createForm resolves to the form instance, we're already in a place where a form has been initialized and rendered.

Formio.createForm(document.getElementById('formio'), components).then((formInstance) => {
  // the createForm promise has resolved to 
  // the already-initialized and rendered form instance
  console.log(formInstance);
});

We can add event listeners here...

Formio.createForm(document.getElementById('formio'), components).then((formInstance) => {
  customUploadBtnClickListener();
});

but there's no need, Form.io handles that for you! A button with "action: 'custom'" takes a "custom" property, which is just a javascript string that the renderer will safely evaluate.

var formJson = {
  components: [
    /* ...rest of components... */
    {
      label: "<br>",
      action: "custom",
      showValidations: false,
      leftIcon: "fa fa-paperclip fa-rotate-90",
      customClass: "customUploadBtn",
      tableView: false,
      key: "customUploadBtn",
      type: "button",
      custom: "console.log(\"Clicked!\");",
      input: true
    },
    /* etc... */
  ]
};

I've made a JSFiddle with all this explained and some more conceptual stuff, let me know if this helps clear things up.

edited Jan 05 '23 at 11:54

answered Dec 25 '22 at 17:11

Brendan Bond

1,737
1
10
8

Thanks for the response! In my case, `initialized` & `formLoad` keep on not firing inside `then()` (but in JSFiddle `initialized` is running perfectly). Is there any other way to make changes when a form loads? – kkaragki Jan 02 '23 at 08:15
@kkaragki can you set up a JSFiddle that behaves like your local code does? – Brendan Bond Jan 02 '23 at 12:52
Sure! You can check it [here](https://jsfiddle.net/k3vxj8yu/9/). The only difference that I can see, is that I use a mock object that contains all my components, rather than using a URL. – kkaragki Jan 02 '23 at 14:02
What changes would you like to make to the form after initialization? – Brendan Bond Jan 02 '23 at 22:03
Let's say that I want to have a custom button that has a specific functionality (e.g. attach files). I updated the [JSFiddle](https://jsfiddle.net/w1qvs8hn/7/) to show you that I call the respective code at `change` event, but I think this is wrong. – kkaragki Jan 03 '23 at 07:13
1

@kkaragki I've edited my answer above – Brendan Bond Jan 05 '23 at 11:54
That was extremely helpful mate! Huge thanks! So, just to make it crystal clear, I could also do this inside the `custom` attribute: `custom: "customUploadBtnClickListener()"`, in order to call a custom made funstion. Is that right? – kkaragki Jan 05 '23 at 12:24
1

@kkaragki yeeeeeeep see [here](https://jsfiddle.net/brendanbond/frstp8hL/13/) – Brendan Bond Jan 05 '23 at 12:29
But why can't @kkaragki (and me neither) get the form.on("initialized" ...) to work? The documentation says it should work - https://help.form.io/developers/form-development/form-renderer#form-events – Jörgen Lundgren May 31 '23 at 14:44
Hey @JörgenLundgren thanks for your question, see [here](https://github.com/formio/formio.js/blob/1e7adb5b836195a8cd9293f71004f26058281baa/src/Webform.js#L1427): for whatever reason, the `initialized` event isn't emitted until after the first change event – Brendan Bond Jun 19 '23 at 21:31

Form.IO - Form events not firing

1 Answers1