Select with default on change

[KyooMario]

I am trying to configure a select box with specific values and a default value based on another select box value selected. My present configuration is as below but I cannot select another option then the default one. Please advise the correct way.

{ "display": "form", "settings": { "pdf": { "id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0", "src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0" } }, "components": [ { "label": "Type", "widget": "choicesjs", "tableView": true, "data": { "values": [ { "label": "Storing", "value": "Storing" }, { "label": "Vraag", "value": "Vraag" } ] }, "selectThreshold": 0.3, "validate": { "unique": false, "multiple": false }, "key": "Type", "type": "select", "indexeddb": { "filter": {} }, "input": true }, { "label": "Priority", "widget": "choicesjs", "tableView": true, "dataSrc": "custom", "data": { "values": [ {} ], "custom": "thisValues = [];\r\nif(data.Type == \"Storing\" || data.Type == \"Schade\")thisValues = [{\"label\":\"Prioriteit 1\",\"value\":\"Urgent\"}];\r\nif(data.Type == \"Vraag\" || data.Type == \"Onderhoud\" || data.Type == \"Update\")thisValues = [{\"label\":\"Prioriteit 3\",\"value\":\"Niet urgent\"}];\r\nvalues = thisValues;" }, "searchEnabled": false, "selectThreshold": 0.3, "allowCalculateOverride": true, "validate": { "unique": false, "multiple": false }, "key": "Priority", "logic": [ { "name": "SetValue Storing", "trigger": { "type": "simple", "simple": { "show": true, "when": "Type", "eq": "Storing" } }, "actions": [ { "name": "SetValue", "type": "value", "value": "value = 'Prioriteit 2';" } ] }, { "name": "SetValue Vraag", "trigger": { "type": "simple", "simple": { "show": true, "when": "Type", "eq": "Vraag" } }, "actions": [ { "name": "SetValue", "type": "value", "value": "value = 'Niet urgent'" } ] } ], "type": "select", "indexeddb": { "filter": {} }, "input": true }, { "type": "button", "label": "Submit", "key": "submit", "disableOnInvalid": true, "input": true, "tableView": false, "validate": { "unique": false, "multiple": false } } ] }

Kind regards, Mario

[randallknutson]

Default values only trigger when the form is initially attached or when a component is made visible. Because of this you can't use another component's value in default value after the form is rendered. There are a couple of ways of doing this though.

First, make the component visible at the point you want to set the default. This will cause the default to be calculated.

Second, you can use calculated value and set "allowCalculateOverride" to true. This allows the calculated value to run any time the first field is changed and yet allow users to override the value. This appears to be what you are trying to do but you need to use calculated value instead of default to set the value.

[KyooMario]

Hello Randall,

OK. I understand. So my present state is that after the form load when I make a selection in Select box A the Select box B is showing the correct values and default value. But when I make a selection in Select box B this value is "locked in" meaning that when I change the selection in Select box A the earlier selected value in Select box B shows as the default value even if this value is not (even) part of the values (options).

So how would I remove the selected value in Select box B after a change in Select box A.

Kind regards, Maro

[randallknutson]

There should be another option for "Clear Value On Refresh Options" that will clear the selected item when the options change.

[KyooMario]

With "custom" values this option is not available.

[KyooMario]

I am looking into the choicesjs options and it includes "removeHighlightedItems();" which might be a solution but I don't know how to execute this. Any advise how to use the choicesjs methods?: https://github.com/jshjohnson/Choices

Kind regards, Mario

[randallknutson]

I don't think we expose that option or have a good way of calling it. Based on the way we handle the options ourselves it may not work at all.

You may be able to to instance.setValue() within the custom select to reset the value.

[KyooMario]

Hello Randall,

I have got it working now with the addition of a hidden field that is triggered by a change and executes its code when the Select box A value old is not equal to the new value. In the code I call the following code snippet from the calculated value. setThisValue("SelectBoxB","value");

And on the server I have got: window.setThisValue = function(component,value){ const thisComponent = form.getComponent(component); thisComponent.setValue(value); thisComponent.redraw(); }

Now question: I have to create server side code snippets like this because I cannot call the functions like "form.getComponent(component)" directly from the calculated value in the form. Is there a way I can call these functions directly from the calculated value? This would give me more flexibility on the client side.

Kind regards, Mario

[randallknutson]

We are actually actively working on this solution. Essentially we want to create the ability to extend the server by adding actions and modules to the server. This would allow you to add code to the server to add code like this for validations. Unfortunately this won't be ready for a little bit yet. Global variables more than likely won't work still though since execution is isolated in a vm on the server so they won't cross executions.

[ahka01]

Hello @KyooMario,

Would please elaborate more how you were able to change the selection of Select depending on other value during runtime?

Hello Randall,

OK. I understand. So my present state is that after the form load when I make a selection in Select box A the Select box B is showing the correct values and default value. But when I make a selection in Select box B this value is "locked in" meaning that when I change the selection in Select box A the earlier selected value in Select box B shows as the default value even if this value is not (even) part of the values (options).

So how would I remove the selected value in Select box B after a change in Select box A.

Kind regards, Maro

[Tatsiana8]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!