Demo – Using Media
Demonstrated Features
- Image URL (Beginner Level)
- Column Renderer
Required Skills
- Beginner Level
- JavaScript Hooks
Required License
- Premium
Insights
The Image URL feature can be applied to columns in tables (docs) and forms (docs). This feature only works if the table column contains the full image path or a relative path. When the form is opened in view mode, the image appears. When the form is opened in edit mode, an editable field is displayed.
The following CSS was added using the CSS Table Editor to save some space when the column filters are displayed left tot the table:
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.
Column Render Hook for the Description Column
This renderer adds a link beneath the description content.
((columnName, originalValue, renderedValue, row) => {
if (renderedValue === null || renderedValue === "") {
return null;
}
const productImage = row.product_image;
const hyperlink = `<a href="https://wpdataaccess.com/${productImage}" target="_blank">🔍︎ View image in new tab</a>`;
return `<div>${renderedValue}</div><br>${hyperlink}`;
})Column Render Hook - Docs