We created an early MCP prototype to explore how this technology could work inside a generated PHPRunner application.

Watch the PHPRunner MCP demonstration on YouTube

Download the PHPRunner MCP sample project

MCP tools in PHPRunner

The prototype can expose standard operations for enabled application tables, including:
– Listing and searching records
– Retrieving individual records
– Adding and updating records
– Deleting records

The available tools depend on the application configuration and permissions associated with the supplied API key.

An AI assistant can process requests such as “Show me the last five orders” or “Find all products in the Pastry category,” select the appropriate tool, and return the results in a readable format.

Authentication and permissions

This initial prototype uses API-key authentication. OAuth and a separate authorization server are not required.

The MCP layer works with the PHPRunner application layer responsible for permissions, validation, events, and data access. This is especially important for operations that change data. An API key can allow an assistant to view records without granting permission to add, update, or delete them.

Custom MCP actions

Applications often include workflows that require more than a single database operation. Custom MCP actions can represent these higher-level business processes.
Multiple actions can be defined in an mcp_actions.php file. Each action describes its parameters, required permissions, behavior, and PHP handler.

The sample application includes actions for:
– Producing an inventory summary
– Receiving inventory
– Discontinuing or reactivating products
– Marking orders as shipped
– Creating a customer and complete order
– Increasing prices within a category

For example, creating a customer and order requires coordinated changes to several tables. A custom action can complete the entire workflow from one request.

MCP opens some interesting possibilities for conversational queries, application automation, reporting, and multi-step business workflows. Let us know which PHPRunner workflows you would like to access through an AI assistant.

In this tutorial, we will add one menu button to each grid row. The menu will open View, Edit, Copy, and related-record pages, process Delete with confirmation, and include an Archive placeholder for project-specific code. The same approach works in PHPRunner and ASPRunner.NET.

1. Adding the row actions button

Open the required List page in Page Designer and switch the grid to Advanced Grid mode. Select Insert – Custom button – New button, then place the button inside the grid so every record receives its own copy.

Clear the button label, select the bars icon, and set its Item ID to row_actions. The Item ID is important because the JavaScript uses it to find the button belonging to the current record.

This example uses the customers table, id as its key field, and CustomerID to open related orders. Replace those names where necessary. The table must have a key field selected on the Choose pages screen.

Keep the standard Edit button in the grid with the Item ID grid_edit. The menu will trigger that button, preserving the Edit behavior configured in Page Designer, including popup mode.

2. Building the menu in Client Before

Open the custom button code and add the following JavaScript to Client Before:

$(".phprunner-row-actions-menu").remove();

var btn = pageObj.getItemButton("row_actions", rowData.id);

var menu = $(
    '<div class="phprunner-row-actions-menu">' +
        '<div class="row-action" data-action="view">View</div>' +
        '<div class="row-action" data-action="edit">Edit</div>' +
        '<div class="row-action" data-action="orders">View orders</div>' +
        '<div class="row-action" data-action="delete">Delete</div>' +
        '<div class="row-action" data-action="copy">Create a copy</div>' +
        '<div class="row-action" data-action="archive">Archive</div>' +
    '</div>'
);

$("body").append(menu);

var pos = btn.offset();
var top = pos.top;
var left = pos.left + btn.outerWidth() + 4;

if (
    pos.top - $(window).scrollTop() + menu.outerHeight()
        > $(window).height()
) {
    top = pos.top - menu.outerHeight() + btn.outerHeight();
}

if (
    left + menu.outerWidth()
        > $(window).scrollLeft() + $(window).width()
) {
    left = pos.left - menu.outerWidth() - 4;
}

menu.css({
    top: top,
    left: left
});

menu.on("click", ".row-action", function(event) {
    event.stopPropagation();

    var action = $(this).data("action");
    menu.remove();

    switch (action) {
        case "view":
            Runner.displayPopup({
                url: Runner.pages.getUrl("customers", "view")
                    + "?editid1="
                    + encodeURIComponent(rowData.keys[0]),
                width: 800,
                height: 600,
                header: "View customer"
            });
            break;

        case "edit":
            pageObj.getItemButton(
                "grid_edit",
                rowData.id
            ).click();
            break;

        case "orders":
            var url = Runner.pages.getUrl("orders", "list");
            url += "?masterkey1="
                + encodeURIComponent(
                    row.getFieldValue("CustomerID")
                )
                + "&mastertable=customers";
            location.href = url;
            break;

        case "delete":
            swal("Would you like to delete this record?", {
                buttons: {
                    cancel: "No",
                    proceed: {
                        text: "Yes, delete it",
                        value: "proceed"
                    }
                }
            }).then(function(value) {
                if (value === "proceed") {
                    params["action"] = "delete";
                    submit();
                }
            });
            break;

        case "copy":
            location.href = Runner.pages.getUrl(
                "customers",
                "add"
            ) + "?copyid1="
                + encodeURIComponent(rowData.keys[0]);
            break;

        case "archive":
            // Add the code that archives the current record here.
            break;
    }
});

var closeTimer;

menu.on("mouseleave", function() {
    closeTimer = setTimeout(function() {
        menu.remove();
    }, 300);
});

menu.on("mouseenter", function() {
    clearTimeout(closeTimer);
});

return false;

The button and the current record are identified through rowData.id and rowData.keys. If the menu would extend beyond the bottom or right side of the browser window, the positioning code moves it to the opposite side of the button.

The Copy action opens the Add page in Copy mode. This example has one key field, so it uses copyid1. Tables with composite keys also require copyid2, copyid3, and so on.

3. Processing Delete on the server

The Delete action is the only menu command that changes the database. Add the appropriate code to the custom button’s Server section.

The code verifies the current user’s Delete permission and obtains the record from the server-side button context. It does not trust a record ID supplied by the browser.

PHP

$result["action"] = "";

if ($params["action"] === "delete") {
    $rights = Security::getPermissions("customers");

    if (empty($rights["D"])) {
        $result["message"] =
            "You do not have permission to delete this record.";
    } else {
        $record = $button->getCurrentRecord();

        if (!$record) {
            $result["message"] = "The record could not be found.";
        } else {
            $sql = DB::PrepareSQL(
                "DELETE FROM customers WHERE id=:1",
                $record["id"]
            );

            if (DB::Exec($sql)) {
                $result["action"] = "delete";
            } else {
                $result["message"] =
                    "The record could not be deleted.";
            }
        }
    }
}

C#

result["action"] = "";

if (Convert.ToString(parameters["action"]) == "delete")
{
    dynamic rights = Security.getPermissions("customers");

    if (!XVar.Pack(rights["D"]))
    {
        result["message"] =
            "You do not have permission to delete this record.";
    }
    else
    {
        dynamic record = button.getCurrentRecord();

        if (!XVar.Pack(record))
        {
            result["message"] = "The record could not be found.";
        }
        else
        {
            dynamic sql = DB.PrepareSQL(
                "DELETE FROM customers WHERE id=:1",
                record["id"]
            );

            if (XVar.Pack(DB.Exec(sql)))
            {
                result["action"] = "delete";
            }
            else
            {
                result["message"] =
                    "The record could not be deleted.";
            }
        }
    }
}

Replace customers and id with the actual table and key field. If the database prevents deleting records that have related rows, either configure the required cascade behavior or replace Delete with the business rule appropriate for your application.

4. Refreshing the List page in Client After

Add the following JavaScript to Client After:

if (result["message"]) {
    swal(result["message"]);
}

if (result["action"] === "delete") {
    pageObj.reload({
        a: "reload"
    });
}

The grid reloads only after the server confirms that the record was deleted.

5. Styling the actions menu

Open Style Editor, click ‘Modify CSS’, and add the following code:

.phprunner-row-actions-menu {
    position: absolute;
    z-index: 10000;
    min-width: 180px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.phprunner-row-actions-menu .row-action {
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.phprunner-row-actions-menu .row-action:hover {
    background: #f5f5f5;
}

After rebuilding the project, open the Customers List page and test the menu on several rows. Confirm that View opens in a popup, Edit follows the configured Edit-button behavior, Copy opens a prefilled Add page, related orders open for the correct customer, and Delete refreshes the grid only after confirmation.

The solution uses one reusable JavaScript function and a small amount of Custom CSS. The same code works in PHPRunner and ASPRunner.NET.

1. Preparing the dashboard

Create a dashboard and add the grid elements that need their own search boxes. This example uses the customers, products, and employees data sources.

You will pass these data source names to the search function in section 3. Use the names as they appear in your project, not the visible dashboard panel captions.

2. Adding the dashboard grid search function

Open Events → custom_function.js and add the following JavaScript:

function addDashboardGridSearch(dashboard, tableName) {
    var dashboardElement = dashboard.elements.find(function(element) {
        return element.table === tableName;
    });

    if (!dashboardElement) {
        console.warn("Dashboard table not found: " + tableName);
        return;
    }

    var containerId =
        "dashelement_" + dashboardElement.elementName + dashboard.id;
    var container = document.getElementById(containerId);

    if (!container) {
        console.warn("Dashboard container not found: " + containerId);
        return;
    }

    if (container.getAttribute("data-grid-search-initialized")) {
        return;
    }

    container.setAttribute("data-grid-search-initialized", "1");

    var searchValue = "";

    function search(input) {
        searchValue = input.value.trim();

        var parameters = {
            goto: 1
        };

        if (searchValue) {
            parameters.qs = searchValue;
        } else {
            parameters.a = "return";
            parameters.qs = "";
        }

        dashboard.loadPage(
            dashboardElement,
            {
                baseParams: parameters
            }
        );
    }

    function insertSearchBox() {
        var heading = container.querySelector(".panel-heading");
        var counter = container.querySelector(
            "[data-itemtype='details_found']"
        );

        if (!heading || !counter) {
            return;
        }

        if (heading.querySelector(".dashboard-grid-search")) {
            return;
        }

        var searchBox = document.createElement("div");
        var input = document.createElement("input");
        var clearButton = document.createElement("button");

        searchBox.className = "dashboard-grid-search";

        input.type = "search";
        input.className = "form-control input-sm";
        input.placeholder = "Search";
        input.value = searchValue;
        input.autocomplete = "off";
        input.setAttribute("aria-label", "Search " + tableName);

        clearButton.type = "button";
        clearButton.className = "btn btn-default btn-sm";
        clearButton.innerHTML = "×";
        clearButton.title = "Clear search";
        clearButton.setAttribute(
            "aria-label",
            "Clear " + tableName + " search"
        );

        searchBox.appendChild(input);
        searchBox.appendChild(clearButton);

        heading.classList.add("dashboard-grid-search-heading");
        counter.parentNode.classList.add("dashboard-grid-search-count");

        heading.insertBefore(searchBox, counter.parentNode);

        [
            "click",
            "mousedown",
            "mouseup",
            "touchstart"
        ].forEach(function(eventName) {
            searchBox.addEventListener(eventName, function(event) {
                event.stopPropagation();
            });
        });

        input.addEventListener("keydown", function(event) {
            if (event.key !== "Enter" && event.keyCode !== 13) {
                return;
            }

            event.preventDefault();
            event.stopPropagation();
            search(input);
        });

        clearButton.addEventListener("click", function(event) {
            event.preventDefault();
            event.stopPropagation();

            input.value = "";
            search(input);
        });
    }

    insertSearchBox();

    new MutationObserver(insertSearchBox).observe(
        container,
        {
            childList: true,
            subtree: true
        }
    );
}

The function finds one dashboard element by its data source name and adds a search control to that element’s panel heading. Pressing Enter passes the search phrase in qs and reloads only that grid. The clear button removes the stored search.

Dashboard grids replace their markup after an AJAX refresh. The MutationObserver restores the search box after that replacement while preserving the current search phrase.

3. Enabling search for the required grids

Open Events → Dashboard → Dashboard page → JavaScript OnLoad and call the function once for each grid:

addDashboardGridSearch(pageObj, "customers");
addDashboardGridSearch(pageObj, "products");
addDashboardGridSearch(pageObj, "employees");

Replace these values with the data source names used by your dashboard. Omit any dashboard element that should not have an individual search box.

4. Styling the search boxes

Open Style Editor, click ‘Modify CSS’, and add the following code:

.function-dashboard .panel-heading.dashboard-grid-search-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.function-dashboard
.panel-heading.dashboard-grid-search-heading
> .rnr-dbebrick {
    float: none !important;
    white-space: nowrap;
}

.function-dashboard .dashboard-grid-search {
    display: flex;
    flex: 0 1 180px;
    min-width: 120px;
    margin-left: auto;
}

.function-dashboard .dashboard-grid-search .form-control {
    height: 30px;
    min-width: 0;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px 0 0 4px;
}

.function-dashboard .dashboard-grid-search .btn {
    height: 30px;
    padding: 4px 9px;
    font-size: 16px;
    line-height: 16px;
    border-radius: 0 4px 4px 0;
}

.function-dashboard .dashboard-grid-search-count {
    flex: 0 0 auto;
    margin-left: 0;
    white-space: nowrap;
    font-size: 12px;
}

@media (max-width: 900px) {
    .function-dashboard
    .panel-heading.dashboard-grid-search-heading {
        flex-wrap: wrap;
    }

    .function-dashboard .dashboard-grid-search {
        order: 3;
        flex-basis: 100%;
        margin-left: 28px;
    }

    .function-dashboard .dashboard-grid-search-count {
        margin-left: auto;
    }
}

The desktop layout places the search box beside the record counter. Below 900 pixels, it moves to a separate line so the panel heading remains usable on smaller screens.

After rebuilding the project, open the Dashboard page and enter a phrase in one of the search boxes. Press Enter and confirm that only the corresponding grid is filtered. Click the clear button to restore the full grid, then repeat the test after collapsing and expanding the dashboard panel.

During registration, haveibeenpwned.com checks whether the password has appeared in known data breaches. The password itself is never sent to the service, and this API does not require a key.

Before processing an application page, abuseipdb.com checks whether the visitor’s IP address has been associated with abusive activity. This service requires an API key. Section 6 explains how to create that key. The results are cached locally to reduce the number of external requests.

1. Creating the IP reputation cache table

The example project uses MySQL. Create the following table in the application’s database, then add it to the project on the Datasource tables screen.

CREATE TABLE ip_reputation_cache (
    ip_address VARCHAR(45) NOT NULL,
    abuse_score INT NOT NULL DEFAULT 0,
    total_reports INT NOT NULL DEFAULT 0,
    country_code VARCHAR(2) NULL,
    usage_type VARCHAR(100) NULL,
    checked_at DATETIME NOT NULL,
    PRIMARY KEY (ip_address)
);

2. Adding the reusable security-check functions

The first function creates a SHA-1 hash of the password and sends only its first five characters to Pwned Passwords. The remaining hash characters never leave the application.

The second function checks the local cache before contacting AbuseIPDB.

PHPRunner

Open Style Editor → Custom Files, create security_checks.php, and add this code:

<?php

function pwnedPasswordCount($password)
{
    $hash = strtoupper(sha1($password));
    $prefix = substr($hash, 0, 5);
    $suffix = substr($hash, 5);

    $ch = curl_init(
        "https://api.pwnedpasswords.com/range/" . $prefix
    );

    curl_setopt_array($ch, array(
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_TIMEOUT => 5,
        CURLOPT_HTTPHEADER => array(
            "User-Agent: PHPRunner-PwnedPasswordCheck",
            "Add-Padding: true"
        )
    ));

    $response = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($response === false || $httpCode != 200) {
        return -1;
    }

    foreach (preg_split('/\r\n|\r|\n/', $response) as $line) {
        $parts = explode(':', trim($line), 2);

        if (
            count($parts) == 2
            && strtoupper($parts[0]) === $suffix
        ) {
            return (int)$parts[1];
        }
    }

    return 0;
}

function ipCheckFailure($message)
{
    return array(
        "success" => false,
        "error" => $message
    );
}

function checkIPReputation($ipAddress, $apiKey)
{
    if (!filter_var($ipAddress, FILTER_VALIDATE_IP)) {
        return ipCheckFailure("Invalid IP address.");
    }

    $sql = DB::PrepareSQL(
        "SELECT *
         FROM ip_reputation_cache
         WHERE ip_address=':1'
         AND checked_at >= DATE_SUB(NOW(), INTERVAL 24 HOUR)",
        $ipAddress
    );

    $rs = DB::Query($sql);
    $cached = $rs ? $rs->fetchAssoc() : false;

    if ($cached) {
        return array(
            "success" => true,
            "cached" => true,
            "abuseScore" => (int)$cached["abuse_score"],
            "totalReports" => (int)$cached["total_reports"],
            "countryCode" => $cached["country_code"],
            "usageType" => $cached["usage_type"]
        );
    }

    $url = "https://api.abuseipdb.com/api/v2/check?"
        . http_build_query(array(
            "ipAddress" => $ipAddress,
            "maxAgeInDays" => 90
        ));

    $ch = curl_init($url);

    curl_setopt_array($ch, array(
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_TIMEOUT => 5,
        CURLOPT_HTTPHEADER => array(
            "Accept: application/json",
            "Key: " . $apiKey
        )
    ));

    $response = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($response === false || $httpCode != 200) {
        return ipCheckFailure("Unable to check IP reputation.");
    }

    $json = json_decode($response, true);

    if (!isset($json["data"])) {
        return ipCheckFailure("Unexpected AbuseIPDB response.");
    }

    $data = $json["data"];
    $abuseScore = (int)($data["abuseConfidenceScore"] ?? 0);
    $totalReports = (int)($data["totalReports"] ?? 0);
    $countryCode = $data["countryCode"] ?? "";
    $usageType = $data["usageType"] ?? "";

    DB::Exec(DB::PrepareSQL(
        "DELETE FROM ip_reputation_cache
         WHERE ip_address=':1'",
        $ipAddress
    ));

    DB::Exec(DB::PrepareSQL(
        "INSERT INTO ip_reputation_cache
         (ip_address, abuse_score, total_reports,
          country_code, usage_type, checked_at)
         VALUES (':1', :2, :3, ':4', ':5', NOW())",
        $ipAddress,
        $abuseScore,
        $totalReports,
        $countryCode,
        $usageType
    ));

    return array(
        "success" => true,
        "cached" => false,
        "abuseScore" => $abuseScore,
        "totalReports" => $totalReports,
        "countryCode" => $countryCode,
        "usageType" => $usageType
    );
}

Open Events → Global events → After App Init and load the file:

require_once("security_checks.php");

ASPRunner.NET

Open Style Editor → Custom Files, create security_checks.cs, and add this code. ASPRunner.NET compiles C# custom files with the generated application, so no separate include statement is required.

using System;
using System.IO;
using System.Net;
using System.Security.Cryptography;
using System.Text;
using System.Web;
using runnerDotNet;

namespace runnerDotNet
{
    public partial class CommonFunctions
    {
        public static int PwnedPasswordCount(string password)
        {
            byte[] bytes = Encoding.UTF8.GetBytes(password);
            byte[] digest;

            using (SHA1 sha1 = SHA1.Create())
            {
                digest = sha1.ComputeHash(bytes);
            }

            string hash = BitConverter.ToString(digest)
                .Replace("-", "")
                .ToUpperInvariant();

            string prefix = hash.Substring(0, 5);
            string suffix = hash.Substring(5);

            try
            {
                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(
                    "https://api.pwnedpasswords.com/range/" + prefix
                );
                request.Method = "GET";
                request.Timeout = 5000;
                request.ReadWriteTimeout = 5000;
                request.UserAgent =
                    "ASPRunner.NET-PwnedPasswordCheck";
                request.Headers["Add-Padding"] = "true";

                using (HttpWebResponse response =
                    (HttpWebResponse)request.GetResponse())
                using (StreamReader reader = new StreamReader(
                    response.GetResponseStream()
                ))
                {
                    if (response.StatusCode != HttpStatusCode.OK)
                        return -1;

                    string body = reader.ReadToEnd();
                    string[] lines = body.Split(
                        new[] { "\r\n", "\n", "\r" },
                        StringSplitOptions.RemoveEmptyEntries
                    );

                    foreach (string line in lines)
                    {
                        string[] parts = line.Trim().Split(':');

                        if (
                            parts.Length == 2
                            && parts[0].ToUpperInvariant() == suffix
                        )
                        {
                            int count;
                            return Int32.TryParse(parts[1], out count)
                                ? count
                                : -1;
                        }
                    }
                }

                return 0;
            }
            catch
            {
                return -1;
            }
        }

        private static XVar IpCheckFailure(string message)
        {
            return new XVar(
                "success", false,
                "error", message
            );
        }

        public static XVar CheckIPReputation(
            string ipAddress,
            string apiKey
        )
        {
            if (String.IsNullOrWhiteSpace(ipAddress))
                return IpCheckFailure("Invalid IP address.");

            dynamic sql = DB.PrepareSQL(
                @"SELECT *
                  FROM ip_reputation_cache
                  WHERE ip_address=':1'
                  AND checked_at >= DATE_SUB(NOW(), INTERVAL 24 HOUR)",
                ipAddress
            );

            dynamic rs = DB.Query(sql);
            dynamic cached = XVar.Pack(rs) ? rs.fetchAssoc() : null;

            if (XVar.Pack(cached))
            {
                return new XVar(
                    "success", true,
                    "cached", true,
                    "abuseScore", cached["abuse_score"],
                    "totalReports", cached["total_reports"],
                    "countryCode", cached["country_code"],
                    "usageType", cached["usage_type"]
                );
            }

            string url =
                "https://api.abuseipdb.com/api/v2/check"
                + "?ipAddress=" + HttpUtility.UrlEncode(ipAddress)
                + "&maxAgeInDays=90";

            try
            {
                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
                request.Method = "GET";
                request.Timeout = 5000;
                request.ReadWriteTimeout = 5000;
                request.Accept = "application/json";
                request.Headers["Key"] = apiKey;

                string responseText;

                using (HttpWebResponse response =
                    (HttpWebResponse)request.GetResponse())
                using (StreamReader reader = new StreamReader(
                    response.GetResponseStream()
                ))
                {
                    if (response.StatusCode != HttpStatusCode.OK)
                        return IpCheckFailure(
                            "Unable to check IP reputation."
                        );

                    responseText = reader.ReadToEnd();
                }

                dynamic json = MVCFunctions.runner_json_decode(responseText);

                if (!XVar.Pack(json) || !XVar.Pack(json["data"]))
                    return IpCheckFailure(
                        "Unexpected AbuseIPDB response."
                    );

                dynamic data = json["data"];
                dynamic abuseScore = data["abuseConfidenceScore"];
                dynamic totalReports = data["totalReports"];
                dynamic countryCode = data["countryCode"];
                dynamic usageType = data["usageType"];

                DB.Exec(DB.PrepareSQL(
                    @"DELETE FROM ip_reputation_cache
                      WHERE ip_address=':1'",
                    ipAddress
                ));

                DB.Exec(DB.PrepareSQL(
                    @"INSERT INTO ip_reputation_cache
                      (ip_address, abuse_score, total_reports,
                       country_code, usage_type, checked_at)
                      VALUES (':1', :2, :3, ':4', ':5', NOW())",
                    ipAddress,
                    abuseScore,
                    totalReports,
                    countryCode,
                    usageType
                ));

                return new XVar(
                    "success", true,
                    "cached", false,
                    "abuseScore", abuseScore,
                    "totalReports", totalReports,
                    "countryCode", countryCode,
                    "usageType", usageType
                );
            }
            catch
            {
                return IpCheckFailure(
                    "Unable to check IP reputation."
                );
            }
        }
    }
}

3. Checking the password from a field event

Open the Register page in Page Designer. Select the password field, open its field events, and add an event that runs when the user leaves the field.

Use the following JavaScript in Client Before:

pageObj.getItemButton("register_save").addClass("disabled");

params["password"] = this.getValue();

if (!params["password"]) {
    return false;
}

In the Server part, add the code for your product.

PHP

$result["count"] = pwnedPasswordCount($params["password"]);

C#

result["count"] = CommonFunctions.PwnedPasswordCount(
    parameters["password"].ToString()
);

Use this JavaScript in Client After:

var count = Number(result.count);

if (count < 0) {
    swal("The password could not be checked. Please try again.");
    return;
}

if (count > 0) {
    swal(
        "This password has appeared in known data breaches "
        + count
        + " times. Please choose another password."
    );
    return;
}

pageObj.getItemButton("register_save").removeClass("disabled");

4. Disabling the Register button when the page loads

Open Events → Global events → Register page → JavaScript OnLoad and disable the ‘Register’ button until the password check succeeds:

pageObj.getItemButton("register_save").addClass("disabled");

register_save is the Item ID of the standard Register button.

5. Enforcing the password check before registration

The field event improves the user experience, but client-side controls can be bypassed. Repeat the check in Events → Global events → Register page → Before registration.

PHP

$count = pwnedPasswordCount($userdata["password"]);

if ($count < 0) {
    $message = "The password could not be checked. Please try again.";
    return false;
}

if ($count > 0) {
    $message = "This password has appeared in known data breaches. "
        . "Please choose another password.";
    return false;
}

return true;

C#

int count = CommonFunctions.PwnedPasswordCount(
    userdata["password"].ToString()
);

if (count < 0)
{
    message = "The password could not be checked. Please try again.";
    return false;
}

if (count > 0)
{
    message = "This password has appeared in known data breaches. "
        + "Please choose another password.";
    return false;
}

return true;

Replace password if your login table uses a different password field name. Field names are case-sensitive.

6. Checking IP reputation in After App Init

Create a free account at abuseipdb.com/register. After signing in, open the account dashboard, select ‘API Settings’, and generate an API v2 key.

Add the following code after the existing code in Events → Global events → After App Init. Replace the placeholder with your API key and keep the real key out of public project exports and source repositories.

PHP

$ipAddress = $_SERVER["REMOTE_ADDR"] ?? "";
$apiKey = "YOUR_ABUSEIPDB_API_KEY";

$ipResult = checkIPReputation($ipAddress, $apiKey);

if (
    $ipResult["success"]
    && $ipResult["abuseScore"] >= 90
) {
    http_response_code(403);
    exit("Access denied.");
}

C#

string ipAddress = HttpContext.Current.Request.UserHostAddress;
string apiKey = "YOUR_ABUSEIPDB_API_KEY";

dynamic ipResult = CommonFunctions.CheckIPReputation(
    ipAddress,
    apiKey
);

if (
    XVar.Pack(ipResult["success"])
    && Convert.ToInt32(ipResult["abuseScore"].ToString()) >= 90
)
{
    HttpContext.Current.Response.StatusCode = 403;
    MVCFunctions.Echo("Access denied.");
    MVCFunctions.Exit();
}

The checkIPReputation() function reuses a cached result for 24 hours. The sample uses the MySQL DATE_SUB() and NOW() functions. Adjust that date expression if your project uses another database.

An AbuseIPDB failure does not block the application. A score of 90 or higher does. Adjust the threshold to match your own security requirements.

If the application runs behind Cloudflare, a load balancer, or another reverse proxy, configure the web server to restore the visitor’s original IP address before this code runs. If the application is accessed directly, no additional configuration is required. Do not read X-Forwarded-For or another forwarding header unless requests to the application can come only through a trusted proxy, because these headers can otherwise be forged.

After rebuilding the project, test registration with a known compromised test password and then with a unique password. Confirm that the server-side registration event still rejects a compromised password if JavaScript is disabled. For the IP check, confirm that the first lookup creates a cache row and subsequent page requests reuse it for 24 hours.

The Pwned Passwords implementation follows the service’s k-anonymity range-search model and uses response padding. See the Pwned Passwords API documentation. See the AbuseIPDB Check endpoint documentation for API-key and response details.

In this tutorial we will add an impersonation button to the login table, switch accounts with Security::loginAs(), display a warning banner while impersonation is active, and provide a link that restores the original administrator session.

We will cover:

1. Preparing the login table and administrator group
2. Adding an impersonation button to the List page
3. Showing the button only to administrators
4. Switching to the selected user
5. Redirecting after impersonation
6. Adding an impersonation banner
7. Styling the banner
8. Returning to the administrator session

1. Preparing the login table and administrator group

This tutorial assumes that database authentication and user group permissions are already configured in PHPRunner. The table used for authentication must also be included in the project and have a List page that administrators can open.

The sample project uses first_name as the username field. Replace first_name in the code below if your login table uses another field.

We will also use Administrators as the administrator group name. Replace it with the group name used in your project.

2. Adding the impersonation button to the List page

Open the login table’s List page in Page Designer and switch to Advanced Grid. Select a grid cell, then use Insert → Custom button → New button.

Set the button label to ‘Login as this user’ and place it inside the grid row. Select the button and set its Item ID to:
‘login_as_user’

The Item ID is important. It is the value used by hideItem() in the next step. You can select the button in Page Designer and find its Item ID in the properties panel on the right.

3. Showing the button only to administrators

Open Events → login table → List page → After record processed and add the following PHP code:

if (
    Security::getUserGroup() != $_SESSION["AdminGroupName"]
    || $data["first_name"] == Security::getUserName()
) {
    $pageObject->hideItem("login_as_user", $recordId);
}

The second argument of hideItem() is required because the button is located inside a List page grid row. The code hides the button from non-administrators and also hides it on the administrator’s own record.

4. Switching to the selected user

Open the custom button code and select its Server tab. Add the following PHP code:

if (Security::getUserGroup() != $_SESSION["AdminGroupName"]) {
    $result["success"] = false;
    return;
}

$record = $button->getCurrentRecord();

$_SESSION["impersonation_admin"] = Security::getUserName();

Security::loginAs($record["first_name"]);

$result["success"] = true;

The group is checked again on the server so that hiding the button is not the only protection. The original administrator username is saved before Security::loginAs() replaces the current login session.

5. Redirecting after impersonation

In the same custom button, open the Client After tab and add this JavaScript code:

if (result["success"]) {
    window.location.href = "menu.php";
}

The redirect reloads the application menu using the impersonated user’s permissions.

6. Adding the impersonation banner

Proceed to Style Editor → Templates → header.htm. Add the following code to the common project header:

<?php
if (
    Security::isLoggedIn()
    && !empty($_SESSION["impersonation_admin"])
) {
    $adminUsername = htmlspecialchars(
        $_SESSION["impersonation_admin"],
        ENT_QUOTES,
        "UTF-8"
    );

    $currentUsername = htmlspecialchars(
        Security::getUserName(),
        ENT_QUOTES,
        "UTF-8"
    );
?>
<div id="impersonation-banner">
    <span>
        <strong>Impersonation mode:</strong>
        Admin <strong><?php echo $adminUsername; ?></strong>
        is browsing as
        <strong><?php echo $currentUsername; ?></strong>.
    </span>

    <a href="menu.php?return_admin=1">
        Return to admin session
    </a>
</div>

<script>
(function () {
    var banner = document.getElementById("impersonation-banner");

    if (!banner || !document.body) {
        return;
    }

    document.body.insertBefore(banner, document.body.firstChild);
    document.body.classList.add("impersonation-active");
})();
</script>
<?php
}
?>

The banner appears on every generated page while an administrator is impersonating another logged-in user. The usernames are escaped before they are inserted into the page.

7. Styling the banner

Open Style Editor → Modify CSS and add the following project-level Custom CSS:

:root {
    --impersonation-banner-height: 40px;
}

#impersonation-banner {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000000 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--impersonation-banner-height);
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #fff3cd;
    border-bottom: 1px solid #e0bd64;
    color: #664d03;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
}

#impersonation-banner a {
    color: #664d03;
    font-weight: 600;
    text-decoration: underline;
}

body.impersonation-active .r-topheader[data-fixed] {
    top: var(--impersonation-banner-height) !important;
}

body.impersonation-active .r-left[data-fixed] {
    top: var(--impersonation-banner-height) !important;
    height: calc(100vh - var(--impersonation-banner-height)) !important;
}

body.impersonation-active > .r-vbar-page,
body.impersonation-active > .r-topbar-page {
    min-height: calc(100vh - var(--impersonation-banner-height));
}

@media print {
    #impersonation-banner {
        display: none !important;
    }

    body.impersonation-active .r-topheader[data-fixed],
    body.impersonation-active .r-left[data-fixed] {
        top: 0 !important;
    }
}

Besides styling the warning, this CSS moves PHPRunner’s fixed navigation elements below the banner.

8. Returning to the administrator session

Open Events → Global events → After App Init and add the following PHP code:

$_SESSION["AdminGroupName"] = "Administrators";

if (
    isset($_GET["return_admin"])
    && !empty($_SESSION["impersonation_admin"])
) {
    $adminUsername = $_SESSION["impersonation_admin"];

    unset($_SESSION["impersonation_admin"]);

    Security::loginAs($adminUsername);

    header("Location: menu.php");
    exit();
}

The event defines the administrator group used by the other events. When the return link is clicked, it restores the saved administrator username, removes the impersonation marker, and redirects back to the menu.

After rebuilding the project, log in as an administrator and open the login table’s List page. Click ‘Login as this user’ beside another account. PHPRunner will apply that user’s identity and permissions, display the impersonation banner, and allow you to return to the original administrator session.

That is exactly the problem. Below are eight cases where a single dragged cell, a missing minus sign, or a stray autocorrect changed the outcome of something much bigger than a spreadsheet.

1. Excel kept turning gene names into dates, so scientists renamed the genes

Excel has a feature that auto-converts anything that looks date-like, such as “1-Mar” or “Sept 1”, into an actual date. Convenient for expense reports. Less convenient for genetics.

Human genes have short alphanumeric names, and a number of them look exactly like dates to Excel: MARCH1, SEPT1, DEC1. For years, when researchers uploaded gene lists into spreadsheets, Excel quietly rewrote them into calendar dates. The mistake was invisible unless someone thought to check, and often nobody did before the data went into a published paper.

Eventually the problem became widespread enough that the official gene-naming authority renamed the genes instead of fighting Excel. MARCH1 is now MARCHF1. SEPT1 is now SEPTIN1.

Source: The Verge

2. MI5 collected data on 134 wrong phone numbers after a spreadsheet error

The UK’s domestic intelligence agency once requested subscriber information for telephone numbers connected to its investigations. A formatting error in a spreadsheet changed the final three digits of a set of numbers to “000”.

As a result, MI5 wrongly collected subscriber data relating to 134 telephone numbers that had no connection to its investigations. The material was later destroyed and the formatting fault was fixed.

Source: The Guardian

3. Kodak overstated a severance accrual by $11 million because of extra zeros

In 2005, Kodak overstated a severance accrual by $11 million. The cause was a spreadsheet error: according to a company spokesman, too many zeros had been added to the calculation.

The timing made it worse. Kodak was already reporting heavy losses, and the correction landed as one more difficult headline for a company already under pressure.

Source: MarketWatch

4. A cut-and-paste error cost TransAlta $24 million

In 2003, TransAlta, a Canadian power company, was submitting bids for US power transmission hedging contracts. During the final sorting and ranking of the bids, a cut-and-paste error in an Excel spreadsheet went undetected.

The mistake caused TransAlta to buy more transmission contracts, and at higher prices, than it should have. The cost: about $24 million.

Source: The Register

5. A missing minus sign turned a $1.3B loss into a $1.3B gain

In 1994, a Fidelity accountant left the minus sign off a $1.3 billion loss while performing a tax calculation. A loss became a gain, and the total estimate was off by $2.6 billion.

Fidelity had already told shareholders to expect a specific year-end distribution based on the incorrect number, and had to walk it back publicly once the error was caught.

Source: The Washington Post

6. Barclays learned the hard way that hidden rows aren’t deleted rows

During the 2008 financial crisis, Barclays moved quickly to buy Lehman Brothers’ assets out of bankruptcy. The Excel file documenting the deal, containing 1,000 rows and 24,000 cells, was sent to lawyers just hours before a deadline.

Some contracts Barclays did not want had been marked as hidden in the spreadsheet rather than removed. During the process of converting and reformatting the spreadsheet, that distinction was lost, and 179 additional contracts were mistakenly included in the purchase agreement. After the deal was approved, Barclays had to seek legal relief to remove them.

Source: The Register

7. SUM instead of AVERAGE: the Excel error that understated JPMorgan’s risk

Inside JPMorgan’s 2012 “London Whale” trading debacle was a risk model built in Excel. One calculation subtracted an old rate from a new rate and then divided by their sum instead of their average, as the modeler had intended. JPMorgan’s investigation concluded that the error likely muted measured volatility and lowered the bank’s Value at Risk estimate.

The spreadsheet error did not by itself cause JPMorgan’s $6.2 billion trading loss. The bank’s investigations found much broader failures in trading strategy, oversight and risk controls. But the faulty formula was one reason the model made the portfolio’s risk look smaller than it really was.

Source: JPMorgan Management Task Force report

8. A grad student found an Excel error in one of austerity’s most-cited papers

This one had the widest reach. In 2010, Harvard economists Carmen Reinhart and Kenneth Rogoff published research reporting that countries with government debt above 90% of GDP averaged roughly -0.1% economic growth. The finding became highly influential in public debates over government debt and austerity and was cited by policymakers in the US and Europe.

Three years later, graduate student Thomas Herndon, working with economists Michael Ash and Robert Pollin, tried to replicate the results using the original spreadsheet. They found an Excel formula that did not extend far enough down the column, silently excluding five countries: Australia, Austria, Belgium, Canada and Denmark.

But the spreadsheet range was not the only problem. Herndon, Ash and Pollin also identified selective exclusion of available data and unconventional weighting of country results. After correcting the problems, they calculated average growth for countries above the 90% debt threshold at 2.2%, rather than -0.1%.

Source: Herndon, Ash & Pollin, Political Economy Research Institute

The pattern

None of these are really stories about Excel. They are stories about what happens when a single spreadsheet, unaudited and trusted by default, sits upstream of a decision big enough to matter. A formula, a copy and paste, a dragged range. Nobody meant for it to go this far. It just did, because nobody checked.

If a spreadsheet in your own organization has quietly become a critical system, it may be worth looking at whether it belongs in a proper web application instead. PHPRunner can import that data into a real database and generate a multi-user application around it, complete with permissions and an audit trail.

Harbor is a new PHPRunner/ASPRunner.NET theme created for modern, data-driven applications. It combines deep navy navigation, clean white surfaces, subtle borders, and a restrained blue accent. We paid special attention to the areas people use every day: grids are easier to scan, forms have more breathing room, dashboards share a consistent card style, and common actions are easier to recognize. Small touches—like removing vertical grid lines, standardizing panel headings, and adding icons to key buttons help Harbor feel cleaner and more focused while keeping the familiar workflow.

Key features:

• Professional navy, white, gray, and blue color palette.
• Distinctive dark sidebar with clear active and hover states.
• Cleaner grids with horizontal separators and no vertical lines.
• Improved table spacing, row highlighting, and numeric alignment.
• Consistent card styling across panels, forms, and dashboards.
• Unified dashboard widgets, charts, snippets, and grid elements.
• Cleaner Add, Edit, and View pages with spacious fields.
• Modern tabs with simple blue underline navigation.
• Refined buttons with icons, hover, focus, and disabled states.
• Polished dropdowns, pagination, breadcrumbs, alerts, and modals.

Additional considerations:

A polished web application takes more than choosing a visual theme. Thoughtful layouts, consistent spacing, clear navigation, well-chosen icons, readable grids, and carefully organized forms all help turn a good theme into a great user experience. Here are some additional tips.

• Do not overcrowd your pages with data. If you display thirty fields in a grid, it is not going to look well. Choose only those fields that are necessary and mov the rest to additional pages like View.
• Turn off vertical lines in grids. It brings focus to the actual data
• Add icons to some common buttons like ‘Add new’ and ‘Back to list’. Not every button needs it, use with moderation.

More screenshots:

Edit page:

Dashboard:

Welcome page:

Enjoy!

In this tutorial we will cover all non-trivial techniques that made this project possible. As you can imagine, the main challenge making this project look sleek and easy to use and I believe we achieved this goal.

See the final leaderboard online

We will talk about:

1. Creating image-based edit controls
2. Grouping team pickers and preventing duplicate selections
3. Enforcing one prediction per user with PHPRunner events
4. Disabling Add and Edit after the submission deadline
5. Enabling Save only after all required answers are selected
6. Calculating scores and rankings with custom SQL
7. Adding rank graphics, progress bars, and current-user highlighting
8. Integrating custom landing, scoring, and thank-you pages
9. A few more visual tweaks
10. How to create your own custom Edit controls easily

Download project for PHPRunner

1. Creating image-based edit controls with table and SQL lookups

I think this is the most important part. We introduced three image-based custom edit controls that you can use in other applications as well. All three are available for download on our marketplace. Right now it is for PHPRunner only but we will provide ASPRunner.NET equivalents very soon. We will also teach you how to create new custom Edit controls using ChatGPT.

ImagePicker

ImagePicker on marketplace

This control allows a selection of a single country. We display all countries and their flags in a scrollable popup and allow to select one. Once country is selected the popup is closed.

ImageDropdown

ImageDropdown on marketplace

This is an advanced version of a regular dropdown box. We have used it to select podium teams and top scorer players. Displaying country flag next to player name definitely makes it easier to choose the player you want.

ImageChoice

ImageChoice on marketplace

This is something that resembles a regular radio-button control, it just looks nicer. We have used to allow a selection of the host team that advances further.

2. Grouping team pickers and preventing duplicate selections

The Top 8 prediction is stored in eight fields: top8_team1_id through top8_team8_id. Without additional logic, eight independent lookup controls would allow the same country to be selected several times. The project solves this inside the custom edit control by assigning all eight controls to one group.

Each Top 8 field uses the following group settings:

$this->settings["picker_group"] = "top8";
$this->settings["max_group_count"] = 8;
$this->settings["status_element_id"] = ["status_element_id"];
$this->settings["prevent_duplicates"] = 1;

The group name tells the controls that they belong to the same logical question. When a country is selected in one field, duplicate prevention makes it unavailable to the other seven. The shared status element (“status_element_id”) can report progress across the whole group rather than treating each field as an unrelated input. You can see status field saying something like “7 of 8 selected” at the top right corner of the first section.

The podium fields use the same idea with a different group:

$this->settings["picker_group"] = "podium";
$this->settings["prevent_duplicates"] = 1;

Champion, second place, and third place remain separate database columns, but they behave as one coordinated set of choices. This is useful in many PHPRunner projects: room assignments, ranked preferences, product bundles, team selection, or any form where several fields use the same type of lookup wizard but must not repeat the same value.

3. Enforcing one prediction per user with PHPRunner events

Every participant should have one prediction record. Hiding the Add button after submission is not sufficient because the user could revisit the Add URL directly. The project checks for an existing record in the prediction table’s Before Process Add event.

$currentUser = Security::getUserName();

$sql = DB::PrepareSQL(
    "SELECT p.id
     FROM wc_predictions p
     INNER JOIN wc_users u ON u.id = p.user_id
     WHERE u.email = ':1'
     LIMIT 1",
    $currentUser
);

$existingId = DB::DBLookup($sql);

if ($existingId) {
    header(
        "Location: wc_predictions_edit.php?editid1="
        . rawurlencode($existingId)
    );
    exit();
}

Security::getUserName() returns the logged-in email because email is configured as the PHPRunner username field. The query translates that login identity into a prediction record ID. If the record exists, the user is redirected to Edit instead of being allowed to create another row.

The project also performs the same lookup in the Menu event. A normal user who reaches the menu is sent to Edit when a prediction exists or Add when it does not. The Menu event improves navigation; the Before Process Add event enforces the rule at the page boundary.

4. Disabling Add and Edit after the submission deadline

Prediction forms must close at a known time. Instead of only hiding buttons, the project changes the table permission string in the Table permissions event. This affects PHPRunner’s permission checks for every request. The following code was added to wc_predictions table GetTablePermissions event.

$lockDate = "2026-06-28 00:00:00";

if (date("Y-m-d H:i:s") >= $lockDate) {
    $permissions = str_replace(
        array("A", "E"),
        "",
        $permissions
    );
}

return $permissions;

PHPRunner represents table operations with letters in the permission string. Removing A and E disables Add and Edit while leaving allowed read operations intact. This is stronger than CSS or JavaScript because it is evaluated on the server.

The project also detects direct requests for wc_predictions_add.php or wc_predictions_edit.php and redirects them to a read-only page. That redirect is useful feedback, but the permission change is the actual security control.

The example has a hard-coded date. A reusable implementation should read the deadline and timezone from an application settings table. It should also locate the current user’s prediction ID before redirecting to View so the destination contains a valid editid1 key.

5. Enabling ‘Save’ button only after all required answers are selected

PHPRunner’s normal validation works field by field. This form also needs a page-level rule: the participant should not submit until every required prediction category is complete. The Add and Edit JavaScript OnLoad events monitor the required controls and toggle the Save item.

var requiredFields = [
    "top8_team1_id", "top8_team2_id",
    "top8_team3_id", "top8_team4_id",
    "top8_team5_id", "top8_team6_id",
    "top8_team7_id", "top8_team8_id",
    "champion_team_id",
    "second_place_team_id",
    "third_place_team_id",
    "top_scorer_id",
    "final_goes_to_penalties",
    "host_team_goes_furthest_id"
];

function allRequiredAnswered() {
    return requiredFields.every(function(fieldName) {
        var ctrl = Runner.getControl(pageid, fieldName);
        return ctrl && $.trim((ctrl.getValue() || "") + "") !== "";
    });
}

function refreshSaveButton() {
    var button = pageObj.getItemButton("add_save");
    button.toggleClass("disabled", !allRequiredAnswered());
}

The important detail is that the page contains both standard PHPRunner inputs and custom image controls. Listening only to ordinary change events is not enough, so the project also listens for interaction with the custom-control elements:

$(document).on(
    "change keyup click",
    "input, select, textarea, .ip-control, .idrop-control, .ichoice-card",
    function() {
        setTimeout(refreshSaveButton, 50);
    }
);

The short delay lets the custom editor update its PHPRunner control value before the page checks it. The Edit page uses the same code with the edit_save item ID. The script also adds min=”0″ and max=”10″ to the final-score inputs.

This improves the user experience, but it is not a replacement for server-side validation. Required values and numeric ranges should still be checked in Before Add and Before Edit before the record is written.

6. Calculating scores and rankings with custom SQL

The Leaderboard is implemented as a custom view. We wanted to perform the whole score calculation in SQL query so it looks quite tricky.

Top 8 selections are unordered. Each predicted team is tested against all eight actual Top 8 fields:

CASE
    WHEN p.top8_team1_id > 0
     AND p.top8_team1_id IN (
        NULLIF(a.top8_team1_id, 0),
        NULLIF(a.top8_team2_id, 0),
        NULLIF(a.top8_team3_id, 0),
        NULLIF(a.top8_team4_id, 0),
        NULLIF(a.top8_team5_id, 0),
        NULLIF(a.top8_team6_id, 0),
        NULLIF(a.top8_team7_id, 0),
        NULLIF(a.top8_team8_id, 0)
    )
    THEN 1 ELSE 0
END

NULLIF(…, 0) prevents an unanswered actual-result field stored as zero from being treated as a legitimate team. The pattern is repeated for all eight predicted positions and then multiplied by five for the point score.

The exact-position categories use direct comparisons with their own weights:

CASE
    WHEN a.champion_team_id > 0
     AND p.champion_team_id = a.champion_team_id
    THEN 25 ELSE 0
END
+
CASE
    WHEN a.second_place_team_id > 0
     AND p.second_place_team_id = a.second_place_team_id
    THEN 15 ELSE 0
END
+
CASE
    WHEN a.third_place_team_id > 0
     AND p.third_place_team_id = a.third_place_team_id
    THEN 10 ELSE 0
END

The remaining categories add points for top scorer, both final-score values, penalties, and the host nation progressing furthest. The result is exposed as normal Leaderboard fields, allowing PHPRunner to build a List page over calculated data.

The exported query orders by points DESC. If the published rules promise additional tie breakers—correct picks and then submission time—the ORDER BY should explicitly include them:

ORDER BY points DESC, correct_picks DESC, submitted_at ASC

7. Adding rank graphics, progress bars, and current-user highlighting

The SQL produces leaderboard data, but the List page turns it into a competition display. Before processing the List page, an event resets the rank counter and removes any previous current-user standing from the session:

$_SESSION["rank"] = 1;
unset(
    $_SESSION["leaderboard_current_rank"],
    $_SESSION["leaderboard_current_points"],
    $_SESSION["leaderboard_current_player"]
);

Before each row is displayed, the project compares the row’s player with the current user’s display name. When they match, it stores the rank and points for the standing panel and highlights the row:

$userData = Security::currentUserData();

if ($data["player"] == $userData["display_name"]) {
    $_SESSION["leaderboard_current_rank"] = $_SESSION["rank"];
    $_SESSION["leaderboard_current_points"] = $data["points"];
    $record["css"] = "background:#fff7dc;";
}

$_SESSION["rank"]++;

Custom field formats replace raw values with visual components. Positions 1, 2, and 3 use gold, silver, and bronze images. The correct_picks value becomes both text and a progress bar:

$percent = $value * 100 / 16;

$value = '<div class="wc-correct-picks">
    <span class="wc-correct-picks-value">'.$value.' / 16</span>
    <span class="wc-progress-track">
        <span class="wc-progress-fill" style="width:'.$percent.'%"></span>
    </span>
</div>';

Two Page Designer snippets complete the page. The header displays the latest actual-answer update time, and the standing snippet reads the session values to show “Your current standing: #N with N points.” This is a useful example of coordinating List events, custom field formats, session state, snippets, images, and CSS on one generated page.

For a larger application, compare users by an immutable user ID rather than display_name. Display names can change and may not be unique.

8. Integrating custom landing, scoring, and thank-you pages

Not every page in a PHPRunner application must be generated from a database table. This project carries standalone files in the export’s files/ directory. PHPRunner copies them into the output folder when the application is built.

index.php is the public homepage/landing page. It explains the challenge, dates, prizes, and entry process, then links visitors to PHPRunner’s register.php and login.php. scoring.php explains the rules implemented by the Leaderboard SQL. thankyou.php provides a deliberate completion screen after the participant saves the initial prediction.

The connection back to PHPRunner happens through events and ordinary URLs. For example, the prediction After Add event sends the browser to the standalone confirmation page:

header("Location: thankyou.php");
exit();

Registration uses the opposite direction: a generated PHPRunner page sends the new account into the prediction workflow after assigning its role and logging it in:

// Before Register
$userdata["usertype"] = "user";
return true;

// After Register
Security::loginAs($userdata["email"]);
header("Location: wc_predictions_add.php");
exit();

The exported files also include include/wc_functions.php, which is loaded by the global initialization event. It provides shared rendering functions used by prediction View and leaderboard formats, allowing generated pages to display the same flags and labels as the custom controls.

This approach keeps authentication, permissions, and data entry inside PHPRunner while allowing marketing, rules, and confirmation pages to have purpose-built layouts. The important maintenance rule is to keep URLs, asset paths, and shared includes consistent between the standalone files and generated output.

9. A few more visual tweaks

Yes/No switch on Add/Edit pages

We decided that using a new Edit control for such a simple task would be an overkill. Instead, we used a simple radio-button control for ‘Final goes to penalty?’ field and a bit of CSS and Javascript OnLoad event of Add/Edit pages. Javascript basically assigns CSS class to radio-button control and the styling itself is done in CSS.

$(function() {
    $('input[name^="radio_final_goes_to_penalties_"]')
        .closest('.rnr-horizontal-lookup')
        .addClass('wc-penalty-toggle');
});

Check classes that start with .wc-penalty-toggle in Custom CSS.

One more tweak, the display of correct_picks field on leaderboard page. It is implemented as ‘View as’ Custom and use some additional CSS classes. Here is the code:

$value = '<div class="wc-correct-picks">
    <span class="wc-correct-picks-value">'.$value.' / 16</span>
    <span class="wc-progress-track">
        <span class="wc-progress-fill" style="width: '. $value*100/16 .'%;"></span>
    </span>
</div>';

In this code 16 is the total number of picks and this is how we calculate the percentage of correct picks.

10. How to create your own custom Edit controls easily

• Download this skill pack
• Start a new ChatGPT conversation
• Upload the ZIP
• Tell ChatGPT: “Use the PHPRunner custom Edit controls skill from the uploaded ZIP.”
• Then describe the control you want. For instance:

  Use the PHPRunner custom Edit controls skill.
  
  Create a custom Edit control called CurrencyInput.
  
  Purpose:
  A currency-friendly numeric input that formats values instantly for display, while submitting a clean numeric value to the database.
  
  Requirements:
  - User can type 1234.5 and see $1,234.50.
  - Submitted value should be 1234.50, without currency symbol or thousand separators.
  - Support configurable currency_symbol, symbol_position, decimal_places, thousand_separator, decimal_separator, allow_negative, format_on_load, and format_while_typing.
  - Empty value should remain empty.
  - Must work with normal Add/Edit form submission.
  - Provide PHP, JavaScript, CSS, sample.php, and README.txt.
  - sample.php must contain settings code only, without PHP opening/closing tags.
  - Package files at the root of a ZIP archive.

Enjoy!

Find trial version download links below. If you are a customer with a valid maintenance, you can download registered version 11.3 via your control panel.

You can watch this video on YouTube that explains how to use new features.

Trial version download links

1. AI features. Help with writing the code ( PHP, C#, Javascript, CSS, SQL ).
More info in the manual
Video on AI features from Corrie

2. Intellisense. Code completion in all areas where code can be edited.
More info

3. Save project as template
More info

4. Export/import of individual objects between projects. We you export a table in includes everything that is relevant: field settings, page designs, events etc.
More info

5. Small things. Adding search to all dialogs where more than a dozen objects is listed: list of projects, list of buttons, or code snippets etc.

6. New cloud providers: Google Cloud and Azure Blob Storage
Google Cloud Storage info
Azure Blob Storage info

Enjoy!

All others can find trial version links below.

Trial version download links

PHPRunner 11.2 for Windows trial
  
ASPRunner.NET 11.2 for Windows trial

PHPRunner 11.2 for Mac trial

PHPRunner 11.2 for Linux (Debian) trial

PHPRunner 11.2 for Linux (RedHat) trial

You can install and run it side by side with versions 10.x and 11.1. Existing software functionality will not be affected. Just make sure you do not launch previous version and v11.2 at the same time if you use a built-in database to store projects.

This new version comes with ten improvements.

1. Cards layout on the List page

Similar to vertical or columns layout but lightweight. No field names, just the data. Fixed width and height. View page of the record can be open by click on the whole card on on one of the fields. Customization: list of fields, layout, fonts, colors, paddings, borders, rounded corners.

2. Two new visual themes

New visual themes are named Futuro (light) and Obsidian (dark). You can choose them on the Style Editor screen. They are modern, sleek and lightweight.

3. Three new welcome page layouts

New Welcome page layouts are called Nebula, Optima and Sonic. You can switch between them while on the Page Designer screen and menu page is open. Here is an example of how Nebula layout looks.

4. Dashboards tabs

You can combine several dashboard elements into a single one and use tabs to switch between them.

5. Dashboard widgets

Similar to dashboard code snippets but easier to customize.

6. SMTP with OAuth support

At this moment we support Gmail Workplace and Microsoft Exchange accounts.

7. “Javascript Create TinyMCE” event for TinyMCE customization

This new event allows you to customize TinyMCE editor behavior across the whole project.

8. ‘View as’ option Copy value to clipboard

This option can be enabled for any text field under ‘View as’ settings.

9. Foldable elements in dashboards

All dashboard elements can be folded by clicking on their header.

10. Show details key column as a hyperlink

Hyperlink points to the View page of the master and can be open in the same window, in a new window or in a popup. The same functionality for the Lookup Wizard field in view mode. On screenshot below OrderID is a foreign column in ‘Order Details’ table. It is set to open master table data in a popup.

Enjoy!