Manage App Settings

Manage App Settings Interactively from Custom Buttons

This example adds a button to the DOM with an event listener. A setTimeout function is used to ensure the button exists in the DOM before the event listener is attached.

This code is compatible with the following hooks:

• Table hook: customActionsTop
• Table hook: customActionsBottom
• Table column hook: render
• Form hook: customActionsBottom

✨ Example

The required arguments (...) depend on the specific hook used.

((...) => {

    // Create a unique ID for the button.
    const buttonId = "custom-btn-" + Date.now()
    
    // Use setTimeout to ensure DOM is ready.
    setTimeout(() => {

        const button = document.getElementById(buttonId)

        if (button) {
            button.addEventListener("click", () => {
                app.setColumnValue("location", "NEW-LOCATION")
            })
        }

    }, 0)
    
    return `<button id="${buttonId}">
        UPDATE LOCATION
    </button>`

})

Notes

• While the examples above can manage app permissions, it is recommended to follow the rules outlined in Client-Side Permission Control with Hooks.