templates.html

When some method creates a form, the application finds a corresponding html template in this file.

This file is located in the root directory of a project and accessed/modified by click on templates.html [F9] on Task tree.

You can define your own form templates to create your own custom forms. See Form templates.

The default templates.html content:

<div class="default-top-view">
    <div class="form-header">
        <button id="new-btn" class="btn btn-secondary" type="button">
            <i class="bi-plus-square"></i> New<small class="muted">&nbsp;[Ctrl+Ins]</small>
        </button>
        <button id="edit-btn" class="btn btn-secondary" type="button">
            <i class="bi-pencil-square"></i> Edit
        </button>
        <div id="report-btn" class="btn-group dropdown">
            <a class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="bi bi-printer"></i> Reports
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu bottom-up">
            </ul>
        </div>
        <button id="delete-btn" class="btn btn-danger" type="button">
            <i class="bi-trash"></i> Delete<small class="muted">&nbsp;[Ctrl+Del]</small>
        </button>
    </div>
    <div class="card-body form-body">
        <div class="view-table"></div>
        <div class="view-detail"></div>
    </div>
</div>

<div class="default-view">
    <div class="form-body">
        <div class="view-table"></div>
        <div class="view-detail"></div>
    </div>
    <div class="form-footer">
        <div id="report-btn" class="btn dropdown dropup">
          <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Reports
          </a>
          <ul class="dropdown-menu">
          </ul>
        </div>
        <button id="delete-btn" class="btn btn-danger" type="button">
            <i class="bi-trash"></i> Delete<small class="muted">&nbsp;[Ctrl+Del]</small>
        </button>
        <button id="edit-btn" class="btn btn-secondary" type="button">
            <i class="bi-pencil-square"></i> Edit
        </button>
        <button id="new-btn" class="btn btn-secondary" type="button">
            <i class="bi-plus-square"></i> New<small class="muted">&nbsp;[Ctrl+Ins]</small>
        </button>
    </div>
</div>

<div class="default-top-edit">
    <div class="form-header">
        <button type="button" id="ok-btn" class="btn btn-primary">
            <i class="bi bi-check-square"></i> OK<small class="muted">&nbsp;[Ctrl+Enter]</small>
        </button>
        <button type="button" id="cancel-btn" class="btn btn-secondary">
            <i class="bi bi-x-square"></i> Cancel
        </button>
    </div>
    <div class="form-body">
        <div class="edit-body"></div>
        <div class="edit-detail"></div>
    </div>
</div>

<div class="default-edit">
    <div class="form-body">
        <div class="edit-body"></div>
        <div class="edit-detail"></div>
    </div>
    <div class="form-footer">
        <button type="button" id="ok-btn" class="btn btn-primary">
            <i class="bi bi-check-square"></i> OK<small class="muted">&nbsp;[Ctrl+Enter]</small>
        </button>
        <button type="button" id="cancel-btn" class="btn btn-secondary">
            <i class="bi bi-x-square"></i> Cancel
        </button>
    </div>
</div>

<div class="default-param">
    <div class="form-body">
        <div class="edit-body">
        </div>
    </div>
    <div class="form-footer">
        <select id='extension' class="form-select" style="width: 5rem">
            <option>pdf</option>
            <option>ods</option>
            <option>xls</option>
            <option>html</option>
        </select>
        <button type="button" id="ok-btn" class="btn btn-primary">
            <i class="bi bi-printer"></i> Print
        </button>
        <button type="button" id="cancel-btn" class="btn btn-secondary">
            <i class="bi bi-x-square"></i> Close
        </button>
    </div>
</div>

<div class="default-filter">
    <div class="form-body">
        <div class="edit-body">
        </div>
    </div>
    <div class="form-footer">
        <button type="button" id="ok-btn" class="btn btn-primary">
            <i class="bi bi-filter"></i> Apply
        </button>
        <button type="button" id="cancel-btn" class="btn btn-secondary">
            <i class="bi bi-x-square"></i> Close
        </button>
    </div>
</div>