Call a function on element

Description:
For a given element, call a function on that element

{
    "type": "dom_utils",
    "action": "call_on_element",
    "args": {
        "element": "my-element",
        "action": "getValue",
        "parameters": [1000, "in-progress"],
        "target": "$data.result"
    }
}

In the described scenario, we utilize the “getValue” method which necessitates two arguments, “id” and “status.” Therefore, we supply these parameter values in the form of an array.

Get property value on element

Description:
For the given element, read the defined property of property path value and return the result.

{
    "type": "dom_utils",
    "action": "get_property",
    "args": {
        "element": "my-element",
        "property": "value",
        "target": "$data.result"
    }
}

Set property values on a element

Description:
Assign specified values to the properties of a pre-defined element.

{
    "type": "dom_utils",
    "action": "set_properties",
    "args": {
        "element": "my-element",
        "properties": {
          "value": "Hello World"
        }
    }
}

The properties object functions as a dictionary, with the property path as the key and the corresponding value to be assigned to the property as its value.

Open new tab using url

Description:
Create a URL and specify parameters to populate it. This process utilizes the string inflate method; for more details, refer to the string actions. Launch the constructed URL in a new browser tab.

{
    "type": "dom_utils",
    "action": "open_tab",
    "args": {
        "element": "my-element",
        "url": "https://localhost/${id}",
        "parameters": {
            "id": "$data.selectedId"
        }
    }
}

Get element bounds rect

Description:
Retrieve the AABB (Axis-Aligned Bounding Box) structure of a specified element, which includes its x, y coordinates, and its width and height dimensions.

{
    "type": "dom_utils",
    "action": "get_element_bounds",
    "args": {
        "element": "my-element",
        "target": "$data.bounds"
    }
}

Find parent element of type

Description:
Traverse up the DOM tree, examining each parent element in succession, until you find one that matches the specified query criteria for the parent you are seeking.

{
    "type": "dom_utils",
    "action": "find_parent_of_type",
    "args": {
        "element": "my-element",
        "query": "ul",
        "stop_query", "my-view",
        "target": "$data.parent"
    }
}

The “stop_query” serves as an optional argument, designed to halt the search once a match for this query is found.