Table with Chart and BUY Button
Demonstrated Features
- Column Filters
- Embedded Charts (docs)
- Column Renderer
- Detail Panel Renderer
Required Skills
- Mostly Beginner Level
- JavaScript Hooks
Required License
- Premium
Insights
This demo app is based on MySQL's Classic Model sample database.
Transactions are prohibited for anonymous users. Any attempt to insert, update, or delete data results in an "Unauthorized" error message.
Using the App Builder requires no coding. Hooks are an optional feature meant for users who want to go beyond the basic App Builder functionality to add their own custom logic, fine-tune app behavior, extend features, and integrate with custom workflows. If you are not interested in hooks, you can skip the hook examples. Show Hook Examples
Column Render Hook for the Stock Column
- Adds a thumbs-up if stock >= 2000
- Adds an orange background color if stock < 2000
- Adds a red background color if stock < 500
((columnName, originalValue, renderedValue, row) => {
if (originalValue < 500) {
setBackgroundColor("red")
setColor("white")
return renderedValue
} else {
if (originalValue < 2000) {
setBackgroundColor("orange")
setColor("white")
return renderedValue
}
}
return `<span>
<i class="fa-solid fa-thumbs-up"></i>
${renderedValue}
</span>`
})Products Table - The BUY NOW Button
The BUY NOW button is added via a computed code field. This computed field requires "allow inline HTML" to be enabled.
(() => {
return wpda.button(
"BUY NOW",
(() => window.open('https://wpdataaccess.com/pricing', '_blank').focus())
)
})()