Recipes

Complete examples of the classes at work in the places Formulize runs your code, ready to copy. Change the element handles to your own form's.

• A list screen as cards
• A status as a badge
• An introduction to a form
• A dashboard

A list screen as cards

Show a list of entries as cards in columns instead of a table, each card opening its entry. On the list screen's Templates tab, replace the open list, list item and close list templates.

• viewEntryLink() makes the link that opens the entry; it has no class of its own, so put fz-card__link on the element around it. With fz-card--interactive, the whole card then opens the entry.
• display() gives the value of a field in the entry. Pass it through htmlspecialchars() before printing it, so a value that contains HTML shows as text.
• fz-p-4 keeps the cards off the edges of the list area. Some themes, such as Anari, already pad it, and there you can leave it out.
• Use fz-card-list instead of fz-grid-list for cards one below the other.
• To colour the badges by status, see the next recipe.

Open list template

<?php
print "<ul class='fz-grid-list fz-grid-list--max-3 fz-p-4'>";

List item template

<?php
$student = htmlspecialchars(display($entry, 'applications_student'));
$school = htmlspecialchars(display($entry, 'applications_school'));
$status = htmlspecialchars(display($entry, 'applications_status'));
print "
<li class='fz-card fz-card--interactive'>
  <h3 class='fz-card__title fz-card__link'>" . viewEntryLink($student) . "</h3>
  <p class='fz-card__subtitle'>$school</p>
  <div class='fz-cluster'><span class='fz-badge'>$status</span></div>
</li>";

Close list template

<?php
print "</ul>";

A status as a badge

A derived value that shows a status as a coloured badge, in lists and wherever else the value appears.

• Choose the tone from the value, and keep the word: the colour adds to the word, it doesn't replace it.
• Formulize filters the HTML in a derived value, to keep scripts out of the page. Classes are kept, so the badge comes through.

Derived value

<?php
$tones = array(
    'Submitted' => 'info',
    'Under review' => 'warning',
    'Approved' => 'success',
    'Rejected' => 'danger',
);
$tone = isset($tones[$applications_status]) ? ' fz-badge--' . $tones[$applications_status] : '';
$value = "<span class='fz-badge$tone'>" . htmlspecialchars($applications_status) . "</span>";

An introduction to a form

Instructions at the top of a form, set apart from the fields. Put the HTML in a Full Width Content element, under Text for display.

Example

<div class="fz-callout">
  <p class="fz-callout__title">Before you start</p>
  <p>Have your student number and your school's address ready. The form takes about ten minutes, and you can save it and come back.</p>
</div>

A dashboard

A template screen that sums up a form's entries, with a count for each status in a row of cards. The template screen's code gathers the numbers; its template lays them out.

• In the template, <{$name}> prints a variable the code set. The values are prepared in the code, escaped, so the template only arranges them.
• fz-container centres the dashboard and gives it space at the sides, since a template screen has only what its template gives it.

Template screen code

<?php
$counts = array('Submitted' => 0, 'Under review' => 0, 'Approved' => 0, 'Rejected' => 0);
foreach (gatherDataset(12) as $application) {
    $status = display($application, 'applications_status');
    if (isset($counts[$status])) {
        $counts[$status]++;
    }
}
$cards = '';
foreach ($counts as $status => $count) {
    $cards .= "<div class='fz-card'><p class='fz-text-sm fz-text-muted'>" . htmlspecialchars($status) . "</p>"
        . "<p class='fz-text-3xl fz-font-semibold fz-tabular-nums'>$count</p></div>";
}

Template screen template

<div class="fz-container fz-py-6 fz-stack fz-gap-6">
  <div class="fz-toolbar">
    <div class="fz-toolbar__start"><h2 class="fz-text-xl fz-font-semibold">Applications</h2></div>
  </div>
  <div class="fz-auto-grid fz-auto-grid--max-4"><{$cards}></div>
</div>