Skip to content

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 framework can automatically generate the template when accessing the mobile API interface.

Steps

1️⃣ Login to the MerciGlobal Developer Portal

2️⃣ Open a new browser tab for the mobile API interface:

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

3️⃣ Ensure you are logged into the required project.

4️⃣ From the interface, select any Master or Transaction menu.

5️⃣ When a module is opened:

  • The MerciGlobal Library Framework automatically generates the template file
  • This occurs 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

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">
            <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>
        </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