Override @formio/js Templates

by brendanbond

HTML

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.form.io/js/formio.full.min.css" />

<div class="container">
  <div id="formio"></div>
</div>
<script src="https://cdn.form.io/js/formio.full.js"></script>

CSS

.radio-block label {
  background: #228b22;
  border: 3px solid transparent;
  cursor: pointer;
}
.radio-block.radio-selected label {
  border-color: black;
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.wizard-page.slide-left {
  animation: slideInFromRight 0.4s ease-out;
}
.wizard-page.slide-right {
  animation: slideInFromLeft 0.4s ease-out;
}

JavaScript

// Render the form, disable submit and just render the submission in the logs
Formio.createForm(document.getElementById('formio'), {
  _id: '69c6e118ae12897bd18eefc0',
  title: 'W4 Demo',
  name: 'w4Demo',
  path: 'w4demo',
  type: 'form',
  display: 'form',
  tags: [],
  access: [
    { type: 'create_own', roles: [] },
    { type: 'create_all', roles: [] },
    { type: 'read_own', roles: [] },
    {
      type: 'read_all',
      roles: [
        '631f7d35f1fa444cbfafb1d1',
        '631f7d35f1fa44830cafb1d6',
        '631f7d35f1fa4459c2afb1db',
      ],
    },
    { type: 'update_own', roles: [] },
    { type: 'update_all', roles: [] },
    { type: 'delete_own', roles: [] },
    { type: 'delete_all', roles: [] },
    { type: 'team_read', roles: [] },
    { type: 'team_write', roles: [] },
    { type: 'team_admin', roles: [] },
  ],
  submissionAccess: [
    { type: 'create_own', roles: ['631f7d35f1fa4459c2afb1db'] },
    { type: 'create_all', roles: [] },
    { type: 'read_own', roles: [] },
    { type: 'read_all', roles: [] },
    { type: 'update_own', roles: [] },
    { type: 'update_all', roles: [] },
    { type: 'delete_own', roles: [] },
    { type: 'delete_all', roles: [] },
    { type: 'team_read', roles: [] },
    { type: 'team_write', roles: [] },
    { type: 'team_admin', roles: [] },
  ],
  owner: '62fd3a8bbd98f6bddd6b4ebb',
  components: [
    {
      label: 'First Name',
      applyMaskOn: 'change',
      tableView: true,
      validateWhenHidden: false,
      key: 'f1010',
      overlay: {
        page: 1,
        left: 168.388,
        top: 167.31822000000017,
        width: 317.2850000000001,
        height: 24.921779999999856,
      },
      type: 'textfield',
      input: true,
      'widget.type': 'input',
    },
    {
      label: 'Last Name',
      applyMaskOn: 'change',
      tableView: true,
      validateWhenHidden: false,
      key: 'f1020',
      overlay: {
        page:...