renderDetailPanel #
The renderDetailPanel hook allows developers to implement custom detail panels. This hook is highly versatile, enabling the creation of banners, data entry forms, or any HTML content containing your desired elements. As a JavaScript hook, it also supports adding external resources via AJAX calls.
Parameters #
- log: reference to WP Data Access logger
- columnValues: column labels, original values and rendered values
Return value #
Template literal, DOM element or jQuery object
Example of a renderDetailPanel hook that returns the default detail panel #
((log, columnValues) => {
// Variable log contains a reference to the built-in logger.
// Variable columnValues contains all column labels, original values and rendered values.
// Use logger to view columns on console.
// log.info(columnValues)
// Create an HTML element for each column. Elements are added to the template below.
const columnElements = Object.keys(columnValues).map(columnName =>
`<div class="panel-column">
<div class="label">${columnValues[columnName].label}</div>
<div class="content">${columnValues[columnName].renderedValue}</div>
</div>`
)
// Return template
// This example template contains all detail panel CSS. CSS can also be defined outside the template.
return `
<div class="my-custom-detail-panel">
${columnElements.join("")}
</div>
<style>
.my-custom-detail-panel {
margin: 0;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 0.25rem;
}
.my-custom-detail-panel .panel-column {
display: grid;
grid-template-columns: 2fr 4fr;
align-items: start;
gap: 0.5rem;
}
.my-custom-detail-panel .panel-column .label {
text-align: right;
white-space: no-wrap;
overflow: visible;
direction: rtl;
}
.my-custom-detail-panel .panel-column .content {
font-weight: bold;
}
</style>
`
})Example of a renderDetailPanel hook that returns all columns except the 8th column #
((log, columnValues) => {
// Variable log contains a reference to the built-in logger.
// Variable columnValues contains all column labels, original values and rendered values.
// Use logger to view columns on console.
// log.info(columnValues)
// Define a final list of columns to display
const MyColumns = Object.keys(columnValues).slice(0,7);
// Create an HTML element for each column. Elements are added to the template below.
const columnElements = MyColumns.map(columnName =>
`<div class="panel-column">
<div class="label">${columnValues[columnName].label}</div>
<div class="content">${columnValues[columnName].renderedValue}</div>
</div>`
)
// Return template
// This example template contains all detail panel CSS. CSS can also be defined outside the template.
return `
<div class="my-custom-detail-panel">
${columnElements.join("")}
</div>
<style>
.my-custom-detail-panel {
margin: 0;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 0.25rem;
}
.my-custom-detail-panel .panel-column {
display: grid;
grid-template-columns: 2fr 4fr;
align-items: start;
gap: 0.5rem;
}
.my-custom-detail-panel .panel-column .label {
text-align: right;
white-space: no-wrap;
overflow: visible;
direction: rtl;
}
.my-custom-detail-panel .panel-column .content {
font-weight: bold;
}
</style>
`
})Defining the final list of columns to display uses the
slice() array method. To learn more, please visit: Array.prototype.slice() – JavaScriptcustomActionsTop #
The customActionsTop hook allows developers to add custom actions to the table actions shown at the top left corner.
Parameters #
- log: reference to WP Data Access logger
Return value #
Template literal, DOM element or jQuery object
Example of a custom action #
((log) => {
return `<div>
<button onclick="alert('My custom action')">My Custom Action</button>
</div>`
})Example calling a function defined in the app global hook #
((log) => {
return myCustomAction()
})customActionsBottom #
The customActionsBottom hook allows developers to add custom actions to the table actions shown at the bottom left corner. Please be aware that these actions are only accessible to users when pagination is set to BOTTOM or BOTH.
Parameters #
- log: reference to WP Data Access logger
Return value #
Template literal, DOM element or jQuery object
Examples #
The customActionsTop examples works for the customActionsBottom hook as well.
