Advanced Custom Form
Demonstrated Features
- Multi-Level Relationships
- Authorized Server Calls
Required Skills
- JavaScript Hooks
- PHP Programming
Required License
- Premium
This demo illustrates multi-level relationships, allowing teachers to manage student attendance for a specific course. On startup, the module table is queried so that the teacher can select a module from the list. Once a module is selected, the course table is queried accordingly. When a course is chosen, the attendance table is displayed.
Pressing the UPDATE STUDENT LIST button triggers a PHP function on the server that updates the student list for the selected course (docs). If no list exists, the function creates it; if a list already exists, it adds any missing entries. This PHP function must be authorized in the App Manager (docs).
Transactions are prohibited for anonymous users. Any attempt to insert, update, or delete data results in an "Unauthorized" error message.
Technical Insights
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 these technical tutorials.
The UPDATE STUDENT LIST Button
The UPDATE STUDENT LIST button is added to the table header via the customActionsTop hook. The built-in wpda.button is used to style the button like other app buttons. It makes use of wpda.callService to call an authorized PHP function on the server and handle the response.
((table) => {
return wpda.button(
"UPDATE STUDENT LIST",
(() => {
// (1) Update attendance table
wpda.callService(
"sasAttendance",
{
course_id: app.getParentData()?.course_id,
},
function(response) {
console.log(response)
if (response.code === "ok") {
if (response.message !== "") {
wpda.snackbar(response.message, "error")
} else {
wpda.snackbar("Refresh completed successfully!", "success")
// (2) Refresh table
table.requery(true)
}
} else if (response.code === "error") {
wpda.snackbar(response.message ?? "Function call returned an error. Please check console.", "error")
}
},
function(error) {
console.error(error)
// Your error handling here...
},
)
})
)
})Calling a PHP function from JavaScript
This demo uses PHP function sasAttendance. The function is deployed as Library Code (PHP) using the Code Manager (docs). Using the Code Manager is optional. You can deploy your PHP function in any way you prefer.
To use a PHP function in your app, you must first authorize it. Apps can only perform authorized PHP functions.
<?php
add_action('rest_api_init', function() {
if ( ! function_exists('sasAttendance') ) {
function sasAttendance($course_id) {
// Update attendance table for $course_id
$wpdadb = \WPDataAccess\Connection\WPDADB::get_db_connection( 'your-database-name' );
if ($wpdadb === null) {
return 'NODB';
}
$wpdadb->query(
$wpdadb->prepare(
"
insert into wpda_sas_attendance
(course_id, student_id, status)
select %d, student_id, ''
from wpda_sas_student
where student_id in (
select student_id
from wpda_sas_class
where course_id = %d
and not exists (
select *
from wpda_sas_attendance att
where att.course_id = %d
and att.student_id = wpda_sas_class.student_id
)
)
",
[
$course_id,
$course_id,
$course_id,
]
)
);
return $wpdadb->last_error;
}
}
});
?>