# Controling bindings evaluation order

**URL:** <https://forum.inductiveautomation.com/t/controling-bindings-evaluation-order/75842>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [July 3, 2023, 1:09pm UTC](https://forum.inductiveautomation.com/t/controling-bindings-evaluation-order/75842 "2023-07-03T13:09:02Z")\
**Posts on this page:** 1\
**Showing post:** 23

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [July 3, 2023, 4:27pm UTC](https://forum.inductiveautomation.com/t/controling-bindings-evaluation-order/75842/23 "2023-07-03T16:27:43Z")

</div>

Try this:

> **View JSON**
>
> ```auto
> {
> "custom": {
> "isFresh": true
> },
> "params": {
> "category_id": "",
> "family_id": "",
> "item_id": ""
> },
> "propConfig": {
> "custom.isFresh": {
> "access": "PRIVATE",
> "binding": {
> "config": {
> "expression": "coalesce({view.params.family_id}, {view.params.category_id}, {view.params.item_id})"
> },
> "transforms": [
> {
> "expression": "true",
> "type": "expression"
> }
> ],
> "type": "expr"
> },
> "persistent": true
> },
> "params.category_id": {
> "paramDirection": "input",
> "persistent": true
> },
> "params.family_id": {
> "paramDirection": "input",
> "persistent": true
> },
> "params.item_id": {
> "onChange": {
> "enabled": null,
> "script": "\tself.getChild(\"root\").getChild(\"families\").getChild(\"Dropdown\").props.value \u003d self.params.family_id\n\tself.getChild(\"root\").getChild(\"categories\").getChild(\"Dropdown\").props.value \u003d self.params.category_id\n\tself.getChild(\"root\").getChild(\"items\").getChild(\"Dropdown\").props.value \u003d self.params.item_id"
> },
> "paramDirection": "input",
> "persistent": true
> }
> },
> "props": {},
> "root": {
> "children": [
> {
> "children": [
> {
> "events": {
> "component": {
> "onActionPerformed": {
> "config": {
> "params": {},
> "view": "Pascal2"
> },
> "scope": "C",
> "type": "nav"
> }
> }
> },
> "meta": {
> "name": "Button"
> },
> "position": {
> "basis": "80px"
> },
> "props": {
> "text": "Return"
> },
> "type": "ia.input.button"
> },
> {
> "meta": {
> "name": "Label"
> },
> "position": {
> "basis": "100px"
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "path": "view.custom.isFresh"
> },
> "type": "property"
> }
> }
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "return"
> },
> "position": {
> "basis": "50px"
> },
> "type": "ia.container.flex"
> },
> {
> "children": [
> {
> "meta": {
> "name": "Label"
> },
> "position": {
> "basis": "150px"
> },
> "props": {
> "text": "families"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Dropdown"
> },
> "position": {
> "basis": "256px"
> },
> "propConfig": {
> "props.options": {
> "binding": {
> "config": {
> "queryPath": "sandbox/list_families"
> },
> "type": "query"
> }
> },
> "props.value": {
> "binding": {
> "config": {
> "expression": "if(true, {view.params.family_id}, {this.props.options})"
> },
> "transforms": [
> {
> "code": "\treturn value if self.view.custom.isFresh else None",
> "type": "script"
> }
> ],
> "type": "expr"
> },
> "onChange": {
> "enabled": null,
> "script": "\tif origin \u003d\u003d \u0027Browser\u0027:\n\t\tself.view.custom.isFresh \u003d False"
> }
> }
> },
> "props": {
> "showClearIcon": true
> },
> "type": "ia.input.dropdown"
> },
> {
> "meta": {
> "name": "value"
> },
> "position": {
> "basis": "150px"
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "path": "../Dropdown.props.value"
> },
> "type": "property"
> }
> }
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "families"
> },
> "position": {
> "basis": "34px"
> },
> "props": {
> "style": {
> "gap": "3px"
> }
> },
> "type": "ia.container.flex"
> },
> {
> "children": [
> {
> "meta": {
> "name": "Label"
> },
> "position": {
> "basis": "150px"
> },
> "props": {
> "text": "categories"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Dropdown"
> },
> "position": {
> "basis": "256px"
> },
> "propConfig": {
> "props.options": {
> "binding": {
> "config": {
> "parameters": {
> "family_id": "{.../families/Dropdown.props.value}"
> },
> "queryPath": "sandbox/list_categories"
> },
> "type": "query"
> }
> },
> "props.value": {
> "binding": {
> "config": {
> "expression": "if(true, {view.params.category_id}, {this.props.options})"
> },
> "transforms": [
> {
> "code": "\treturn value if self.view.custom.isFresh else None",
> "type": "script"
> }
> ],
> "type": "expr"
> },
> "onChange": {
> "enabled": null,
> "script": "\tif origin \u003d\u003d \u0027Browser\u0027:\n\t\tself.view.custom.isFresh \u003d False"
> }
> }
> },
> "props": {
> "showClearIcon": true
> },
> "type": "ia.input.dropdown"
> },
> {
> "meta": {
> "name": "value"
> },
> "position": {
> "basis": "150px"
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "path": "../Dropdown.props.value"
> },
> "type": "property"
> }
> }
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "categories"
> },
> "position": {
> "basis": "34px"
> },
> "props": {
> "style": {
> "gap": "3px"
> }
> },
> "type": "ia.container.flex"
> },
> {
> "children": [
> {
> "meta": {
> "name": "Label"
> },
> "position": {
> "basis": "150px"
> },
> "props": {
> "text": "items"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Dropdown"
> },
> "position": {
> "basis": "256px"
> },
> "propConfig": {
> "props.options": {
> "binding": {
> "config": {
> "parameters": {
> "category_id": "{.../categories/Dropdown.props.value}"
> },
> "queryPath": "sandbox/list_items"
> },
> "type": "query"
> }
> },
> "props.value": {
> "binding": {
> "config": {
> "expression": "if(true, {view.params.item_id}, {this.props.options})"
> },
> "transforms": [
> {
> "code": "\treturn value if self.view.custom.isFresh else None",
> "type": "script"
> }
> ],
> "type": "expr"
> },
> "onChange": {
> "enabled": null,
> "script": "\tif origin \u003d\u003d \u0027Browser\u0027:\n\t\tself.view.custom.isFresh \u003d False"
> }
> }
> },
> "props": {
> "showClearIcon": true
> },
> "type": "ia.input.dropdown"
> },
> {
> "meta": {
> "name": "value"
> },
> "position": {
> "basis": "150px"
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "path": "../Dropdown.props.value"
> },
> "type": "property"
> }
> }
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "items"
> },
> "position": {
> "basis": "34px"
> },
> "props": {
> "style": {
> "gap": "3px"
> }
> },
> "type": "ia.container.flex"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column",
> "style": {
> "gap": "10px",
> "padding": "15px"
> }
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

The only scripts are very simple transforms that check the semaphore. The use of `coalesce()` with the `custom.isFresh` view property is solely to have something that will respond to parameter changes.

Similarly, the `if(true, ...)` expressions for the dropdowns' `props.value` is there purely to monitor changes to the options.

{ You'll have to reset the nav target to the your real project's view name. }

---

_[View the full topic](https://forum.inductiveautomation.com/t/controling-bindings-evaluation-order/75842)._