global #
The global hook at the app level allows developers to write reusable functions. For example, these functions can be used in column renderers.
Parameters #
None
Return value #
None
Examples #
Example of a custom button added using a JavaScript template #
myCustomAction = (columnName) => {
return `<div>
<button onclick="alert('My custom action from column ${columnName}')">My Custom Action</button>
</div>`
}The same example using vanilla JavaScript #
myCustomAction = (columnName) => {
const div = window.document.createElement("div")
const button = window.document.createElement("button")
button.innerHTML = "My Custom Action"
button.setAttribute("onclick", `alert('My custom action from column ${columnName}')`)
div.append(button)
return div
}The same example using jQuery #
myCustomAction = (columnName) => {
if (window.jQuery) {
const div = window.jQuery(<div>
<button onclick="alert('My custom action from column ${columnName}')">My Custom Action</button>
</div>`)
return div
} else {
return null
}
}NOTES #
- It is not possible to add event listeners to dynamically added elements. In the example above, the onclick event was added using the setAttribute method.
- Do not define a function name as a constant. Doing so will result in an error when the function body is updated.
