Custom Button not working in the Rendering/Embedding

Hi, i have a custom button , which clear the values / reset the particular component. i.e. data.firstname='';

It works fine inside the Form.io Online / Open source . But when it comes to the Rendering/Embedding side , it wont work at all. Even there is no error in the console. I tired this on the Form.io Online portal , and i found out the same problem. It works fine when we view the form in the Form Viewer , but when we use the single line script tag inside the HTML , its not working .

<script src="https://unpkg.com/formiojs@latest/dist/formio.embed.js?src=https://qfeuvqlfrsmdign.form.io/message"></script> I think the embed.js has missing some functions . Any ways to solve this Issue.

And i wanted to know much more about the Actions in the Button , Like Event , Auth etc. I didn’t find much more information about these usage . Any information provided would be a useful.

Thank You

[travist]

There are several issues that arise when allowing one component to alter the state of other components (as it is suggested here).

1.) The state of any component is mutable by other components and conflicts in state changes can cause erratic behavior such as when one component sets the state of one component to one value while another component sets it to a different value.

2.) Performance is negatively affected where all button events would need to trigger global form redraw since it would be hard to determine from reading custom code which components may be affected by the change.

We are deliberately making this not supported via setting the data attribute. However, there is a way to “break the rules” if you insist. In every code execution, we do provide the instance variable which points to the component instance. Within the instance you have access to the root form object, which is the most top-level component of a rendered from. From that perspective, you can then get the component you wish to alter, and set the value directly. Something like this may work.

Use at your own risk!!

var component = instance.root.getComponent('componentA');
component.setValue('testing');

[wag110894]

Hello Pradeep,

You cannot use a button using custom javascript to change another component’s value in our new renderer. This is by design. You can use a button event and field logic to set the value.

Here is an example of this: http://formio.github.io/formio.js/app/examples/fieldLogic.html Here is schema for Field Logic: https://github.com/formio/formio.js/wiki/Field-Logic-Schema Please let me know if you have any further questions or concerns.

Thanks,