ArtiGrid

HTML template in form fields

Custom HTML Templates for Form Fields in ArtiGrid

This example shows how to customize CRUD forms and views using ArtiGrid. You can define separate templates for inserting records, editing records, and viewing record details.

1. Insert Form Template


$insert = '<div class="order-form">
    <h2>Customer Order Form</h2>
    <div class="form-group">
        <label class="form-label">Customer Number: *</label>
        {customerNumber}
    </div>
    <div class="form-group">
        <label class="form-label">Order Date: *</label>
        {orderDate}
    </div>
    <div class="form-actions">{action}</div>
</div>';
$grid->setInsertFormTemplate($insert);

This template is used for the insert form. Placeholders like {customerNumber}, {orderDate}, and {action} are automatically replaced by ArtiGrid.

2. Edit Form Template


$edit = '<div class="order-form">
    <h2>Customer Order Form</h2>
    <div class="form-group">
        <label class="form-label">Customer Number: *</label>
        {customerNumber}
    </div>
    <div class="form-group">
        <label class="form-label">Order Date: *</label>
        {orderDate}
    </div>
    <div class="form-actions">{action}</div>
</div>';
$grid->setEditFormTemplate($edit);

This template is used for the edit form. You can change the structure, fields, and layout without affecting the CRUD logic.

3. View Form Template


$view = "<div class='table-responsive'>
    <table class='table table-bordered table-striped table-sm mb-3'>
        <tbody>
            <tr><th>customerNumber</th><td>{customerNumber}</td></tr>
            <tr><th>orderDate</th><td>{orderDate}</td></tr>
        </tbody>
    </table>
</div>";
$grid->setViewFormTemplate($view);

This template is used to display record details in "view" mode. Placeholders are automatically replaced with the record data.

In summary, ArtiGrid allows separate templates for insert, edit, and view, giving you full control over the structure and styling of forms and views, while the library automatically handles placeholder replacement and CRUD logic.


<?php
    $grid = new ArtiGrid();
    $insert = '<div class="order-form">
        <h2>Customer Order Form</h2>
        <div class="form-group">
            <label class="form-label">Customer Number: *</label>
            {customerNumber}
        </div>
        <div class="form-group">
            <label class="form-label">Order Date: *</label>
            {orderDate}
        </div>
        <div class="form-group">
            <label class="form-label">Status:</label>
            {status}
        </div>
        <div class="form-group">
            <label class="form-label">Required Date:</label>
            {requiredDate}
        </div>
        <div class="form-group">
            <label class="form-label">Shipped Date:</label>
            {shippedDate}
        </div>
        <div class="form-actions">
            {action}
        </div>
    </div>';

    $edit = '<div class="order-form">
        <h2>Customer Order Form</h2>
        <div class="form-group">
            <label class="form-label">Customer Number: *</label>
            {orderNumber}
        </div>
        <div class="form-group">
            <label class="form-label">Order Date: *</label>
            {orderDate}
        </div>
        <div class="form-actions">
            {action}
        </div>
    </div>';

    $view = "<div class='table-responsive'>
        <table class='table table-bordered table-striped table-sm mb-3'>
            <tbody>
                <tr>
                    <th>customerNumber </th>
                    <td>{customerNumber} </td>
                </tr>
                <tr>
                    <th>orderDate </th>
                    <td>{orderDate} </td>
                </tr>
            </tbody>
        </table>
    </div>";

    $grid->setInsertFormTemplate($insert);
    $grid->setEditFormTemplate($edit);
    $grid->setViewFormTemplate($view);
    $grid->table('orders')
        ->template('bootstrap5')
        ->perPage(10)
        ->required(false)
        ->validation_required('customerNumber')
        ->validation_required('orderDate')
        ->modal();
    echo $grid->render();
?>

	orderNumber	orderDate	requiredDate	shippedDate	status	comments	customerNumber	Actions