We’re back at it with another tutorial just for you.
Yes, we’re working on expanding the previous week’s tutorials where we created a fully functional drop down list of processes and a drop down list of respective queues for a selected process.
This week’s tutorial focuses on how to retrieve a list of individuals based on a given queue when selected from drop down menu.
We don’t have time to waste, so let’s get started.
Start from previous tutorial code base
Open the file, pq-jump-menu.php, in a text editor of your choice as a starting point. If you don’t have this file, then use this tutorial’s code as your starting point.
<?PHP
/**
* Process & Queue Jump Menus
*/
// contains resusable globals and functions
include("includes/config.php");
$processDomID = 'processSelect'; // HTML DOM id for process select / drop down menu
$procQueueDomID = 'queueSelect'; // HTML DOM id for process queue select / drop down menu
$procListOne = getProcessSelect(); // function to get list of processes
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Process and Queue Comparison</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<table width="50%" cellpadding="8" cellspacing="0" align="center">
<tr>
<td colspan="2"><h1>Process And Queue Jump Menu</h1></td>
</tr>
<tr>
<td colspan="2" id="message"></td>
</tr>
<tr>
<td><? echo $procListOne; ?></td>
<td><select id="<? echo $procQueueDomID; ?>" name="<? echo $procQueueDomID; ?>"></select></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function() {
var $messageDiv = $('#message');
hideAll();
$('#<? echo $processDomID; ?>').change(function(e) {
var pid = $("#<? echo $processDomID; ?> option:selected").val();
hideAll();
if(pid == '#'){
$messageDiv.text("Please select a process from the drop down menu.");
$messageDiv.show("slow").delay(5000).fadeOut("slow");
} else {
var post_data = {
'processid': pid
};
$.post('http://localhost/ccb/pq-queue-dd.php', post_data, function(response){
if(response.type == 'error'){
$messageDiv.text(response.text);
$messageDiv.show("slow");
} else {
var $selectMenu = $('#<? echo $procQueueDomID; ?>');
$selectMenu.find('option')
.remove()
.end()
.append(response.text);
$selectMenu.show();
}
}, 'json');
}
});
function hideAll(){
$messageDiv.hide();
$('#<? echo $procQueueDomID; ?>').hide();
}
});
</script>
</html>
<?
function getProcessSelect(){
global $processDomID;
$apiService = 'process_list'; // CCB api service
$urlData = array_filter( array(
'srv' => "$apiService"
) );
$rss = ccbDetails('get',$urlData); // transform to XML
$nodes = $rss->xpath('//processes/process'); // xpath for processes
$response_object = '';
foreach ($nodes as $node)
{
$response_object .= '<option value="'.$node['id'].'">'.$node->name.'</option>';
}
// create the select drop down menu
$menu = '<select name="'.$processDomID.'" id="'.$processDomID.'">';
$menu .= '<option value="#">Please select a process</option>';
$menu .= $response_object;
$menu .= '</select>';
return $menu;
}
?>One of the first changes to make is adding in a new table row to display a list of individuals when a given queue is selected from the queue drop down menu.
Here’s the code you’ll want to add to the code above:
<tr> <td colspan="2"><div id="results"></div></td> </tr>
Add the code above to the pq-jump-menu.php code base right after the row that contains the process and queue drop down menus.
For sake of space, I’m only showing the body section of pq-jump-menu.php below with updates of HTML code added:
<body> <table width="50%" cellpadding="8" cellspacing="0" align="center"> <tr> <td colspan="2"><h1>Process And Queue Jump Menu</h1></td> </tr> <tr> <td colspan="2" id="message"></td> </tr> <tr> <td><? echo $procListOne; ?></td> <td><select id="<? echo $procQueueDomID; ?>" name="<? echo $procQueueDomID; ?>"></select></td> </tr> <tr> <td colspan="2"><div id="results"></div></td> </tr> </table> </body>
The code above allows for there to be a DOM element available for rendering the list of individuals. For now, it’s visible on page but doesn’t display content.
But sit tight as we’ll soon work on retrieving the necessary queue data and and javascript needed to display content.
Retrieving a list of individuals in queue
As mentioned in the previous section, we need to create code to return a list of individuals for a specific queue.
There’s good news and bad news. Bad news first.
The bad news is that I won’t dive into the details and you’ll have to read previous tutorials for in-depth discussion and detail.
However, the good news is that we covered how to return a list of individuals for a specific queue in previous tutorials.
Open the file pq-queue-dd.php in the text editor of your choice and execute a save as, naming and saving the new file: pq-queue-persons.php.
You may be a bit lost as to why we would do such a thing. Just as the pq-queue-dd.php file was used to retrieve and return a list of queues when a process was selected from the process drop down menu, the same type of logic will apply when selecting a queue.
Only this time, instead of retrieving queue based on process id, we’ll pass the queue id to retrieve individuals listed in selected queue.
Now that you have pq-queue-persons.php opened, perform the following:
- Change all selectPid variables to selectQid variables
- Change $_POST[‘processid’] to $_POST[‘queueid’]
- Change getQueueListDD function to getQueueIndividuals function
Next, replace the getQueueListDD function’s code by simply copying and pasting the getQueueIndividuals function from this tutorial.
Your code for pq-queue-persons.php should look like the following:
<?PHP
/**
* retrieve list of individuals from process and queues
*/
// contains resusable globals and functions
include("includes/config.php");
$output = json_encode(array('type'=>'error', 'text' => 'Hey, you have an error!'));
//die($output);
if(!$_POST)
header("Location: pq-jump-menu.php");
$selectQid = filter_var($_POST['queueid'], FILTER_SANITIZE_STRING);
if(empty($selectQid)){
$output = json_encode(array('type'=>'error', 'text' => 'Queue id not passed.'));
die($output);
}
$objectReturned = getQueueIndividuals($selectQid);
$output = json_encode(array('type'=>'message', 'text' => "$objectReturned"));
die($output);
function getQueueIndividuals($id){
$apiService = 'queue_individuals'; // CCB api service
$queueID = $id; // Queue ID
$urlData = array_filter( array(
'srv' => "$apiService",
'id' => "$queueID",
) );
$rss = ccbDetails('get',$urlData); // transform to XML
$nodes = $rss->xpath('//individuals/individual'); // xpath for process queues
$response_object = '';
foreach ($nodes as $node)
{
// if you want to return a certain status, then make sure to set $triggerStatus = 1
// Then, be sure to set filter status using one of the following:
// waiting, in-process, done, not-started
$triggerStatus = 0;
$statusFilter = 'not-started';
if ($triggerStatus){
// or also filter using != operator: if($statusFilter != strtolower($node->status))
if($statusFilter == strtolower($node->status))
$response_object .= $node->name."<br/>";
} else {
$response_object .= $node->name."<br/>";
}
}
return $response_object;
}
?>Time to glue queue drop down menu and retrieval data file together
Now it’s time for a bit of heavy lifting as we pick back up on working with jQuery and Javascript.
If this is your first rodeo with Javascript or jQuery or both, don’t fret. Fortunately, we get to use some of the same logic from last week’s tutorial in today’s tutorial.
Starting from where we left off last, the javascript code is below that you should have in your pq-jump-menu.php:
$(function() {
var $messageDiv = $('#message');
hideAll();
$('#<? echo $processDomID; ?>').change(function(e) {
var pid = $("#<? echo $processDomID; ?> option:selected").val();
hideAll();
if(pid == '#'){
$messageDiv.text("Please select a process from the drop down menu.");
$messageDiv.show("slow").delay(5000).fadeOut("slow");
} else {
var post_data = {
'processid': pid
};
$.post('http://localhost/ccb/pq-queue-dd.php', post_data, function(response){
if(response.type == 'error'){
$messageDiv.text(response.text);
$messageDiv.show("slow");
} else {
var $selectMenu = $('#<? echo $procQueueDomID; ?>');
$selectMenu.find('option')
.remove()
.end()
.append(response.text);
$selectMenu.show();
}
}, 'json');
}
});
function hideAll(){
$messageDiv.hide();
$('#<? echo $procQueueDomID; ?>').hide();
}
});The code above represents and functions as the glue for allowing a process to be selected and then the queue drop down to be populated and displayed to the web browser.
We essentially need to re-create this same action but for the queue drop down menu to pass it’s selected id to the pq-queue-persons.php file to retrieve and return a list of individuals for the given queue id.
Find the code below and copy it:
$('#<? echo $processDomID; ?>').change(function(e) {
var pid = $("#<? echo $processDomID; ?> option:selected").val();
hideAll();
if(pid == '#'){
$messageDiv.text("Please select a process from the drop down menu.");
$messageDiv.show("slow").delay(5000).fadeOut("slow");
} else {
var post_data = {
'processid': pid
};
$.post('http://localhost/ccb/pq-queue-dd.php', post_data, function(response){
if(response.type == 'error'){
$messageDiv.text(response.text);
$messageDiv.show("slow");
} else {
var $selectMenu = $('#<? echo $procQueueDomID; ?>');
$selectMenu.find('option')
.remove()
.end()
.append(response.text);
$selectMenu.show();
}
}, 'json');
}
});Copy it into the area that contains the queue javascript logic as show below:
$(function() {
var $messageDiv = $('#message');
hideAll();
$('#<? echo $processDomID; ?>').change(function(e) {
var pid = $("#<? echo $processDomID; ?> option:selected").val();
hideAll();
if(pid == '#'){
$messageDiv.text("Please select a process from the drop down menu.");
$messageDiv.show("slow").delay(5000).fadeOut("slow");
} else {
var post_data = {
'processid': pid
};
$.post('http://localhost/ccb/pq-queue-dd.php', post_data, function(response){
if(response.type == 'error'){
$messageDiv.text(response.text);
$messageDiv.show("slow");
} else {
var $selectMenu = $('#<? echo $procQueueDomID; ?>');
$('#<? echo $processDomID; ?>').change(function(e) {
var pid = $("#<? echo $processDomID; ?> option:selected").val();
hideAll();
if(pid == '#'){
$messageDiv.text("Please select a process from the drop down menu.");
$messageDiv.show("slow").delay(5000).fadeOut("slow");
} else {
var post_data = {
'processid': pid
};
$.post('http://localhost/ccb/pq-queue-dd.php', post_data, function(response){
if(response.type == 'error'){
$messageDiv.text(response.text);
$messageDiv.show("slow");
} else {
var $selectMenu = $('#<? echo $procQueueDomID; ?>');
$selectMenu.find('option')
.remove()
.end()
.append(response.text);
$selectMenu.show();
}
}, 'json');
}
});
$selectMenu.find('option')
.remove()
.end()
.append(response.text);
$selectMenu.show();
}
}, 'json');
}
});
function hideAll(){
$messageDiv.hide();
$('#<? echo $procQueueDomID; ?>').hide();
}
});Now make the following changes ONLY WITHIN THIS BLOCK OF CODE so your code matches the code below:
- DO NOT PERFORM A SEARCH AND REPLACE
- Change the processDomID variables to procQueueDomID variables
- Remove the hide function
- Change pid variables to qid variables
- Change the word proccess to queue in the $messageDiv.text area
- Change processid to queueid in post_data variable
- Change jQuery post url from using pq-queue-dd.php to pq-queue-persons.php
- Add necessary logic to inject and show the results div with the response.text from the pq-queue-persons.php file
$(function() {
var $messageDiv = $('#message');
hideAll();
$('#<? echo $processDomID; ?>').change(function(e) {
var pid = $("#<? echo $processDomID; ?> option:selected").val();
hideAll();
if(pid == '#'){
$messageDiv.text("Please select a process from the drop down menu.");
$messageDiv.show("slow").delay(5000).fadeOut("slow");
} else {
var post_data = {
'processid': pid
};
$.post('http://localhost/ccb/pq-queue-dd.php', post_data, function(response){
if(response.type == 'error'){
$messageDiv.text(response.text);
$messageDiv.show("slow");
} else {
var $selectMenu = $('#<? echo $procQueueDomID; ?>');
$selectMenu.change(function(e) {
var qid = $("#<? echo $procQueueDomID; ?> option:selected").val();
if(qid == '#'){
$messageDiv.text("Please select a queue from the drop down menu.");
$messageDiv.show("slow").delay(5000).fadeOut("slow");
} else {
var post_data = {
'queueid': pid
};
$.post('http://localhost/ccb/pq-queue-persons.php', post_data, function(response){
if(response.type == 'error'){
$messageDiv.text(response.text);
$messageDiv.show("slow");
} else {
$resultsDiv = $('#results');
$resultsDiv.html(response.text);
$resultsDiv.show("slow");
//console.log(response.text);
}
}, 'json');
}
});
$selectMenu.find('option')
.remove()
.end()
.append(response.text);
$selectMenu.show();
}
}, 'json');
}
});
function hideAll(){
$messageDiv.hide();
$('#<? echo $procQueueDomID; ?>').hide();
$('#results').hide();
}
});Now that those changes have been made, you’re home free. But not so fast. We still must test your technical prowess to ensure you did achieve the tutorial objective.
Time to test newly added logic
Congrats on completing this tutorial. You should have created and save the code shown below in its entirety across multiple files. In fact, here are the files that you should now have up to this point:
- pq-jump-menu.php (previous week)
- pq-queue-dd.php (previous week)
- pq-queue-persons.php (created today)
Now with all the changes we made today across the pq-jump-menu.php and pq-queue-persons.php files, it’s time to save the files and open pq-jump-menu.php in a web browser.
If successful, you should see the following screen:
Now select a process and then a queue from their respective drop down menus. Once both have been selected, then you should now see a list of individuals for that chosen process and queue (see image below).
You may be thinking that retrieving a list of individuals is not anything to write home about. You’re likely right, it’s not.
But in the coming weeks, I’ll share with you how to take this code to the next level. What if you wanted to take further action on individuals like comparing queues and their individuals?
You’ll have to wait until next week to get the inside scoop on where we’re going next. Until next time… happy CCB API coding. 😉
pq-jump-menu.php code
<?PHP
/**
* Process & Queue Jump Menus
*/
// contains resusable globals and functions
include("includes/config.php");
$processDomID = 'processSelect'; // HTML DOM id for process select / drop down menu
$procQueueDomID = 'queueSelect'; // HTML DOM id for process queue select / drop down menu
$procListOne = getProcessSelect(); // function to get list of processes
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Process and Queue Comparison</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<table width="50%" cellpadding="8" cellspacing="0" align="center">
<tr>
<td colspan="2"><h1>Process And Queue Jump Menu</h1></td>
</tr>
<tr>
<td colspan="2" id="message"></td>
</tr>
<tr>
<td><? echo $procListOne; ?></td>
<td><select id="<? echo $procQueueDomID; ?>" name="<? echo $procQueueDomID; ?>"></select></td>
</tr>
<tr>
<td colspan="2"><div id="results"></div></td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function() {
var $messageDiv = $('#message');
hideAll();
$('#<? echo $processDomID; ?>').change(function(e) {
var pid = $("#<? echo $processDomID; ?> option:selected").val();
hideAll();
if(pid == '#'){
$messageDiv.text("Please select a process from the drop down menu.");
$messageDiv.show("slow").delay(5000).fadeOut("slow");
} else {
var post_data = {
'processid': pid
};
$.post('http://localhost/ccb/pq-queue-dd.php', post_data, function(response){
if(response.type == 'error'){
$messageDiv.text(response.text);
$messageDiv.show("slow");
} else {
var $selectMenu = $('#<? echo $procQueueDomID; ?>');
$selectMenu.change(function(e) {
var qid = $("#<? echo $procQueueDomID; ?> option:selected").val();
if(qid == '#'){
$messageDiv.text("Please select a queue from the drop down menu.");
$messageDiv.show("slow").delay(5000).fadeOut("slow");
} else {
var post_data = {
'queueid': pid
};
$.post('http://localhost/ccb/pq-queue-persons.php', post_data, function(response){
if(response.type == 'error'){
$messageDiv.text(response.text);
$messageDiv.show("slow");
} else {
$resultsDiv = $('#results');
$resultsDiv.html(response.text);
$resultsDiv.show("slow");
//console.log(response.text);
}
}, 'json');
}
});
$selectMenu.find('option')
.remove()
.end()
.append(response.text);
$selectMenu.show();
}
}, 'json');
}
});
function hideAll(){
$messageDiv.hide();
$('#<? echo $procQueueDomID; ?>').hide();
$('#results').hide();
}
});
</script>
</html>
<?
function getProcessSelect(){
global $processDomID;
$apiService = 'process_list'; // CCB api service
$urlData = array_filter( array(
'srv' => "$apiService"
) );
$rss = ccbDetails('get',$urlData); // transform to XML
$nodes = $rss->xpath('//processes/process'); // xpath for processes
$response_object = '';
foreach ($nodes as $node)
{
$response_object .= '<option value="'.$node['id'].'">'.$node->name.'</option>';
}
// create the select drop down menu
$menu = '<select name="'.$processDomID.'" id="'.$processDomID.'">';
$menu .= '<option value="#">Please select a process</option>';
$menu .= $response_object;
$menu .= '</select>';
return $menu;
}
?>
pq-queue-dd.php code
<?PHP
/**
* retrieve list of individuals from process and queues
*/
// contains resusable globals and functions
include("includes/config.php");
$output = json_encode(array('type'=>'error', 'text' => 'Hey, you have an error!'));
//die($output);
if(!$_POST)
header("Location: pq-jump-menu.php");
$selectPid = filter_var($_POST['processid'], FILTER_SANITIZE_STRING);
if(empty($selectPid)){
$output = json_encode(array('type'=>'error', 'text' => 'Process id not passed.'));
die($output);
}
$objectReturned = getQueueListDD($selectPid);
$output = json_encode(array('type'=>'message', 'text' => "$objectReturned"));
die($output);
function getQueueListDD($pid){
$apiService = 'queue_list'; // CCB api service
$processID = $pid; // Process ID
$urlData = array_filter( array(
'srv' => "$apiService",
'id' => "$processID",
) );
$rss = ccbDetails('get',$urlData); // transform to XML
$nodes = $rss->xpath('//queues/queue'); // xpath for process queues
$response_object = '';
$response_object .= '<option value="#">Please select a queue</option>';
foreach ($nodes as $node)
{
$response_object .= '<option value="'.$node['id'].'">'.$node->name.'</option>';
}
return $response_object;
}
pq-queue-persons.php code
<?PHP
/**
* retrieve list of individuals from process and queues
*/
// contains resusable globals and functions
include("includes/config.php");
$output = json_encode(array('type'=>'error', 'text' => 'Hey, you have an error!'));
//die($output);
if(!$_POST)
header("Location: pq-jump-menu.php");
$selectQid = filter_var($_POST['queueid'], FILTER_SANITIZE_STRING);
if(empty($selectQid)){
$output = json_encode(array('type'=>'error', 'text' => 'Queue id not passed.'));
die($output);
}
$objectReturned = getQueueIndividuals($selectQid);
$output = json_encode(array('type'=>'message', 'text' => "$objectReturned"));
die($output);
function getQueueIndividuals($id){
$apiService = 'queue_individuals'; // CCB api service
$queueID = $id; // Queue ID
$urlData = array_filter( array(
'srv' => "$apiService",
'id' => "$queueID",
) );
$rss = ccbDetails('get',$urlData); // transform to XML
$nodes = $rss->xpath('//individuals/individual'); // xpath for process queues
$response_object = '';
foreach ($nodes as $node)
{
// if you want to return a certain status, then make sure to set $triggerStatus = 1
// Then, be sure to set filter status using one of the following:
// waiting, in-process, done, not-started
$triggerStatus = 0;
$statusFilter = 'not-started';
if ($triggerStatus){
// or also filter using != operator: if($statusFilter != strtolower($node->status))
if($statusFilter == strtolower($node->status))
$response_object .= $node->name."<br/>";
} else {
$response_object .= $node->name."<br/>";
}
}
return $response_object;
}
?>