Forms Tutorial 3

Tutorial 3: Advanced Templating and Data Manipulation🔗

Objective🔗

Enhance our Equipment Request form with advanced Tera templating features, conditional logic, calculations, and better data presentation.

Advanced Tera Template Features - part 1🔗

1. Conditional Logic🔗

Tera supports various conditional statements. Let's enhance our template with better conditional logic:

<!-- replace "request_info" section in header.html -->
<div class="info_row">
    <span>Request Number: {{ data.requisition.requisitionNumber }}</span>
    <span>Date: {{ data.requisition.createdDatetime | date(format="%d/%m/%Y") }}</span>
  </div>

<div class="request_info">
  {% if data.requisition.status == "DRAFT" %}
    <div class="status_banner draft">DRAFT - Not Yet Submitted</div>
  {% elif data.requisition.status == "SENT" %}
    <div class="status_banner sent">SUBMITTED - Awaiting Approval</div>
  {% elif data.requisition.status == "FINALISED" %}
    <div class="status_banner approved">APPROVED</div>
  {% else %}
    <div class="status_banner">Status: {{ data.requisition.status }}</div>
  {% endif %}
  </div>
</div>

<!-- Conditional supplier information -->
{% if data.requisition.otherParty %}
  <div class="supplier_info">
    <h3>Supplier Information</h3>
    <p><strong>{{ data.requisition.otherParty.name }}</strong></p>
    <p>Code: {{ data.requisition.otherParty.code }}</p>
    {% if data.requisition.otherParty.address1 %}
      <p>{{ data.requisition.otherParty.address1 }}</p>
      {% if data.requisition.otherParty.address2 %}
        <p>{{ data.requisition.otherParty.address2 }}</p>
      {% endif %}
    {% endif %}
  </div>
{% endif %}

2. Loops and Filters🔗

Enhance the items table with more sophisticated looping and filters:

<!-- update "items_table" section in template.html -->
<table class="items_table">
  <thead>
    <tr class="table_header">
      <th>Line #</th>
      <th>Item Code</th>
      <th>Item Name</th>
      <th>Requested Qty</th>
      <th>Priority</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    {% for line in data.requisition.lines.nodes %}
    <tr class="item_row {% if loop.index is odd %}odd{% else %}even{% endif %}">
      <td class="line_number">{{ loop.index }}</td>
      <td>{{ line.item.code }}</td>
      <td>{{ line.item.name }}</td>
      <td class="quantity">
        {{ line.requestedQuantity | default(value=0) }}
      </td>
      <td class="priority">
        {% if line.requestedQuantity > 100 %}
          HIGH
        {% elif line.requestedQuantity > 50 %}
          MEDIUM
        {% else %}
          LOW
        {% endif %}
      </td>
      <td class="status">
        {% if line.requestedQuantity %}
          REQUESTED
        {% else %}
          PENDING
        {% endif %}
      </td>
    </tr>
    {% endfor %}
    
    {% if data.requisition.lines.nodes | length == 0 %}
    <tr>
      <td colspan="6" class="no_items">No items requested</td>
    </tr>
    {% endif %}
  </tbody>
</table>

3. Macros for Reusable Code🔗

Define macros for commonly used formatting:

<!-- At the top of template.html -->
{% macro formatDate(datetime) %}
  {% if datetime %}
    {{ datetime | date(format="%d/%m/%Y") }}
  {% else %}
    N/A
  {% endif %}
{% endmacro %}

{% macro formatCurrency(amount) %}
  {% if amount %}
    ${{ amount | round(precision=2) }}
  {% else %}
    $0.00
  {% endif %}
{% endmacro %}

{% macro priorityBadge(quantity) %}
  {% if quantity > 100 %}
    <span class="priority high">HIGH</span>
  {% elif quantity > 50 %}
    <span class="priority medium">MEDIUM</span>
  {% else %}
    <span class="priority low">LOW</span>
  {% endif %}
{% endmacro %}

<!-- Using the macros -->
<div class="dates">
  <p>Created: {{ self::formatDate(datetime=data.requisition.createdDatetime) }}</p>
  <p>Updated: {{ self::formatDate(datetime=data.requisition.finalisedDatetime) }}</p>
</div>

<!-- In the table replace the "priority" line with -->
<td class="priority">{{ self::priorityBadge(quantity=line.requestedQuantity) }}</td>

Note that this requires that you add the new finalisedDatetime field to the requisition query in query.graphql

Enhanced CSS for New Features🔗

Add these styles to style.css and then regenerate the form:

/* Status banners */
.status_banner {
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
}

.status_banner.draft {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
}

.status_banner.sent {
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  color: #0c5460;
}

.status_banner.approved {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

/* Priority badges */
.priority {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 8pt;
  font-weight: bold;
}

.priority.high {
  background-color: #dc3545;
  color: white;
}

.priority.medium {
  background-color: #ffc107;
  color: black;
}

.priority.low {
  background-color: #28a745;
  color: white;
}

/* Table enhancements */
.item_row.odd {
  background-color: #f8f9fa;
}

.item_row.even {
  background-color: white;
}

.line_number {
  text-align: center;
  width: 50px;
  font-weight: bold;
}

.cost, .total {
  text-align: right;
  font-family: monospace;
}

.no_items {
  text-align: center;
  font-style: italic;
  color: #666;
  padding: 20px;
}

/* Summary section */
.summary {
  margin-top: 30px;
  padding: 20px;
  border: 2px solid #333;
  background-color: #f8f9fa;
}

.summary_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 10px;
}

.summary_item {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.summary_item label {
  font-weight: bold;
}

/* Supplier info box */
.supplier_info {
  float: right;
  width: 300px;
  padding: 15px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 20px;
  margin-bottom: 20px;
}

.supplier_info h3 {
  margin-top: 0;
  color: #333;
}

/* Print-specific adjustments */
@media print {
  .status_banner {
    border: 2px solid #333 !important;
    background-color: white !important;
    color: black !important;
  }
  
  .priority {
    border: 1px solid #333 !important;
    background-color: white !important;
    color: black !important;
  }
  
  .summary_grid {
    display: block;
  }
  
  .summary_item {
    margin-bottom: 5px;
  }
}

Advanced Tera Template Features - part 2🔗

4. Variables and Calculations🔗

Use set and set_global for calculations in template.html:

<!-- Initialise totals -->

{% set_global total_items = 0 %}
{% set_global high_priority_items = 0 %}

<!-- Add to <tr class="table_header">  section -->

      <th>Est. Cost</th>
      <th>Line Total</th>

<!-- Add at the start of the {% for line in data.requisition.lines.nodes %} loop -->

    {% set_global total_items = total_items + line.requestedQuantity %}
    {% if line.requestedQuantity > 100 %}
      {% set_global high_priority_items = high_priority_items + 1 %}
    {% endif %}
    
    {% set estimated_cost = 25.00 %} <!-- This would come from item data -->
    {% set line_total = line.requestedQuantity * estimated_cost %}
    
<!-- Add to <tr class="item_row">  section -->

      <td class="cost">{{ self::formatCurrency(amount=estimated_cost) }}</td>
      <td class="total">{{ self::formatCurrency(amount=line_total) }}</td>

<!-- Add summary section -->

<div class="summary">
  <h3>Request Summary</h3>
  <div class="summary_grid">
    <div class="summary_item">
      <label>Total Items:</label>
      <span>{{ total_items }}</span>
    </div>
    <div class="summary_item">
      <label>High Priority Items:</label>
      <span>{{ high_priority_items }}</span>
    </div>
    <div class="summary_item">
      <label>Total Lines:</label>
      <span>{{ data.requisition.lines.nodes | length }}</span>
    </div>
  </div>
</div>

Working with Complex Data Structures🔗

When dealing with nested data, use dot notation and filters effectively:

<!-- Accessing nested data safely -->
{% if data.requisition.lines.nodes %}
  {% for line in data.requisition.lines.nodes %}
    <!-- Safe access with defaults -->
    <tr>
      <td>{{ line.item.code | default(value="NO CODE") }}</td>
      <td>{{ line.item.name | default(value="Unknown Item") }}</td>
      
      <!-- Number formatting -->
      <td>{{ line.requestedQuantity | round(precision=0) }}</td>
      
      <!-- String manipulation -->
      <td>{{ line.item.name | upper | truncate(length=30) }}</td>
      
      <!-- Date formatting with timezone -->
      <td>{{ line.createdDatetime | date(format="%d/%m/%Y %H:%M", timezone="UTC") }}</td>
    </tr>
  {% endfor %}
{% else %}
  <tr><td colspan="5">No data available</td></tr>
{% endif %}

Error Handling in Templates🔗

Add robust error handling:

<!-- Safe data access with error handling -->
<div class="request_info">
  {% try %}
    <h2>Request #{{ data.requisition.requisitionNumber }}</h2>
    <p>Status: {{ data.requisition.status | title }}</p>
  {% catch %}
    <h2>Equipment Request</h2>
    <p class="error">Request information unavailable</p>
  {% endtry %}
</div>

<!-- Conditional blocks with fallbacks -->
{% if data.requisition %}
  <!-- Main content -->
{% else %}
  <div class="error_message">
    <h2>Error: No Request Data Available</h2>
    <p>Please ensure you have selected a valid requisition.</p>
  </div>
{% endif %}

Testing Advanced Features🔗

1. Create test data with various scenarios:

   • Empty requisitions
   • Different statuses
   • Large quantities
   • Missing optional fields

2. Test print layout:

   • Use browser's print preview
   • Check page breaks
   • Verify color handling in print mode

3. Validate calculations:

   • Ensure totals are correct
   • Test edge cases (zero quantities, etc.)

What We've Learned🔗

• Advanced Tera conditionals and loops
• Macro definitions and usage
• Variable calculations and global state
• Safe data access patterns
• Print-specific styling
• Error handling in templates

In Tutorial 4, we'll dive deep into GraphQL queries and data fetching strategies.