Mobile Module Card Template (mobi2)

MerciGlobal Cloud ERP allows developers to customize how entry module records are displayed as cards in the MerciGlobal Mobile App (Android / iOS).

These templates are used only for the mobile interface and control how entry records appear inside the mobile list/card view.

Developers can create a custom HTML template for an entry module by defining a file using the following naming convention:

mobi2_<tablename>.html

Example

mobi2_salesinvoice.html
mobi2_purchaseorder.html
mobi2_customer.html

This template defines the card layout used to render each record in the mobile entry module list.

Template File Location

All mobile card templates must be placed inside the following project directory:

project/tpl/

Example

<project>/tpl/mobi2_salesinvoice.html
<project>/tpl/mobi2_purchaseorder.html

Only templates located in the <project>/tpl folder will be detected and used by the mobile application.

Mobile Scope

These templates are used only in the MerciGlobal Mobile App:

Android App
iOS App

They do not affect the desktop/web interface of the ERP system.

Automatic Template Generation (Developer Portal)

⚠️ Important

Developers do not need to manually create the template file initially.

The MerciGlobal Cloud ERP framework can automatically generate the template when accessing the mobile API interface.

Steps

Login to the MerciGlobal Developer Portal
Open a new browser tab for the mobile API interface:

https://devx.merciglobal.com/apis/mobi2.php

Ensure you are logged into the required project.
Select any Master or Transaction menu.
When a module is opened:
The framework automatically generates the template file
This happens only if the template does not already exist

Example Generated File

project/tpl/mobi2_salesinvoice.html

After generation, developers can edit and customize the template as required.

Data Binding

Each field that should be displayed in the card must use the data-bind attribute.

data-bind="fieldname"

At runtime, the framework automatically replaces the element content with the value of the specified field from the entry record.

Example

<span data-bind="invoiceno"></span>

This will display the value of the invoiceno field for the record.

Developer Customization

Developers are free to customize:

Layout structure
Bootstrap grid usage
Icons
Colors
Typography
Field formatting
Conditional styling

Any valid HTML structure and CSS classes can be used as long as fields are mapped using the data-bind attribute.

Card Template Structure

A typical card template uses a Bootstrap-based card layout.

Key UI Sections

Section	Purpose
Header	Primary record information
Metadata	Date, user, transport details
Financial Info	Amount, payable amount
Additional Info	Discount, taxable amount

SmartTable Actions (Edit / Delete Integration)

⚠️ Important Feature for Developers

If the following code snippet is included inside the card template, the SmartTable engine in MerciGlobal Cloud ERP will automatically enable Edit and Delete functionality for each record.

Highlighted Code

<div>
  <span class="editbtn"></span>
  <span class="delbtn"></span>
</div>

Behavior

Automatically renders Edit button
Automatically renders Delete button
Binds actions to the respective record
No additional JavaScript coding required

Benefits

Reduces development effort
Ensures consistent behavior across modules
Fully integrated with MerciGlobal permissions and APIs

Sample Template

<div class="xdlgModuleCardSample col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 mb-3 hidden"><div class="container py-2">
  <div class="row g-2">
    <div class="col-12 col-md-6 col-lg-3">
      <div class="card shadow-sm">
        <div class="card-body p-3">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="card-title fw-bold fs-5 mb-0" data-bind="type"></h5>
            <span class="badge bg-success text-uppercase" data-bind="status"></span>
          </div>
          <div class="row mb-2">
            <div class="col-6 text-muted small">
              <i class="fas fa-file-invoice me-1"></i><span data-bind="invoiceno"></span>
            </div>
            <div class="col-6 text-muted small text-end">
              <i class="fas fa-calendar-alt me-1"></i><span data-bind="invdate"></span>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-6 text-muted small">
              <i class="fas fa-user me-1"></i><span data-bind="printname"></span>
            </div>
            <div class="col-6 text-muted small text-end">
              <i class="fas fa-phone me-1"></i><span data-bind="mobile"></span>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-6 text-muted small">
              <i class="fas fa-truck me-1"></i><span data-bind="transport"></span>
            </div>
            <div class="col-6 text-muted small text-end">
              <i class="fas fa-money-bill-wave me-1"></i><span data-bind="paymenttype"></span>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-6 text-muted small">
              <i class="fas fa-boxes me-1"></i><span data-bind="qty"></span>
            </div>
            <div class="col-6 text-muted small text-end">
              <i class="fas fa-clock me-1"></i><span data-bind="duedays"></span> <small>days</small>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-6 fw-bold fs-5 text-primary">
              <i class="fas fa-tag me-1"></i><span data-bind="amount"></span>
            </div>
            <div class="col-6 fw-bold fs-5 text-success text-end">
              <i class="fas fa-wallet me-1"></i><span data-bind="payableamt"></span>
            </div>
          </div>
          <div class="row mb-2">
            <div class="col-6 text-muted small">
              <i class="fas fa-receipt me-1"></i><span data-bind="taxableamt"></span>
            </div>
            <div class="col-6 text-muted small text-end">
              <i class="fas fa-percent me-1"></i><span data-bind="discount"></span>
            </div>
          </div>

          <!-- SmartTable Actions -->
          <div>
            <span class="editbtn"></span>
            <span class="delbtn"></span>
          </div>

        </div>
      </div>
    </div>
  </div>
</div></div>

Important Notes

The root container must include the following class:

xdlgModuleCardSample

Additional important behaviors:

The template is cloned dynamically for each record
The class hidden prevents the template from rendering directly in the DOM
Developers must ensure field names match the database/API field names

Best Practices

Keep cards visually compact
Display the most important fields first
Use icons to improve readability
Avoid too many fields in a single card
Highlight financial values clearly
Maintain consistent layouts across modules

Summary

The mobi2 card template system in MerciGlobal Cloud ERP provides a powerful way to design mobile-friendly UI cards with minimal effort. With automatic template generation, flexible HTML customization, and built-in SmartTable actions, developers can rapidly build scalable and consistent mobile interfaces.