This can be useful if you need to enter large amounts of data and need to see previous entries right on the Add page. This will be really useful when you use a device like barcode scanner to automate adding multiple items. This is how this can be done.
In this article we use a very simple table with three fields in it: id, name, status.
- AfterAdd event
In this event we save record that was just added to the session variable. This session variable is an array and we add a the latest record to the beginning of this array using array_unshift function.
if (empty($_SESSION['arr']))
$arr = array();
else
$arr = $_SESSION['arr'];
array_unshift($arr, array( "code" => $values["code"], "name" => $values["name"], "status" => $values["status"]));
$_SESSION['arr']=$arr;
2. Now we proceed to the Add page in Visual Editor and insert a code snippet where we want to see a list of recent added records. Here is the code for this snippet:
$arr = $_SESSION['arr'];
if (count($arr)>0) {
echo "<table id='history'><tr><th colspan=3>History</th></tr>";
$i=0;
foreach ($arr as $a) {
echo "<tr><td>".$a["code"]."</td><td>".$a["name"]."</td><td>".$a["status"]."</td></tr>";
$i++;
if ($i==10) break;
}
echo "</table>";
}
We only display last 10 records here and you are free to modify this number according to your preferences.
3. If you build your project now and add a few records this will work already but it won't look pretty. Time to proceed to 'Custom CSS' section in Style Editor and add some CSS code there:
#history td {
padding: 7px;
font: 14px Arial;
text-align: left;
background: #f0f0f0;
}
#history th {
padding: 10px;
text-align: left;
background: #e0e0e0;
}
#history {
border: 1px solid #c0c0c0;
margin: 10px;
}
This is pretty much it.
