Wizard with Nested Forms and Custom Template

by brendanbond

HTML

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="https://cdn.form.io/js/formio.full.min.css" />
<script src="https://cdn.form.io/js/formio.full.js"></script>

<div class="container">
  <div id="formio"></div>
</div>

JavaScript

/**
 * This example leverages two of the Form.io features we discussed in our call with Equifax:
 * 1. Nested forms - by setting the base and project URLs, each page of my wizard form is actually a Nested Form component. Changes to the nested form will immediately be reflected in my wizard form. You can try this yourself - drag a Nested Form component into each page of a parent wizard and render it in your application.
 * 2. Overridden templates - I've overridden the Wizard navigation template below.
 */

// initial application set up
Formio.setBaseUrl("https://api.form.io");
Formio.setProjectUrl("https://bb-happy-time.form.io");

// template override, I will typically put these in their own module
// keep in mind that the templates use strings, which can be painful - I typically will start with the existing templates, which are open source
// for example, you can find this template here: https://github.com/formio/bootstrap/blob/main/src/templates/bootstrap5/wizardHeader/form.ejs
const renderWizardHeader = (ctx) => {
  const renderListItem = (panel, index) =>
    `<li class="nav-item${ctx.currentPage === index ? " active" : ""}" style="cursor: pointer;">
      <a data-index="${index}" class="nav-link" ref="${ctx.wizardKey}-link" href="#">
        ${ctx.t(panel.title, { _userInput: true })}
      </a>
    </li>`;

  return `<nav aria-label="Wizard navigation" id="${ctx.wizardKey}-header" ref="${ctx.wizardKey}-header" class="navbar navbar-expand-md bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="https://form.io">
        <img src="https://form.io/wp-content/themes/formio/images/brand/logo-formio-horizontal-lightbg.svg" alt="Form.io Logo" width="100">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
     ...