Uses of "Partials" that I didn't know about, did you?

Tips and Tricks
,
1

Hello, I would like to share something that has resulted thanks to AI (TRAE test in a Wappler project).

This is the Partial file views/partials/dinamic_header.ejs

<div class="caia-config-header">
  <div class="container-fluid">
    <div class="d-flex align-items-start justify-content-between ps-3 pe-3">
      <div class="d-flex align-items-start gap-3 w-100">
        <%- await include('/partials/backButtonDashboard', Object.assign({}, locals)) %>
        <div class="flex-grow-1 ps-2">
          <h1 class="h3 mt-0 mb-1">
            <% if (typeof headerIconClass !== 'undefined' && headerIconClass) { %>
              <i class="<%= headerIconClass %> me-2"></i>
            <% } %>
            <% if (typeof headerTitleHtml !== 'undefined' && headerTitleHtml) { %>
              <%- headerTitleHtml %>
            <% } else { %>
              <%= typeof headerTitle !== 'undefined' ? headerTitle : '' %>
            <% } %>
          </h1>
          <% if (typeof headerSubtitleHtml !== 'undefined' && headerSubtitleHtml) { %>
            <p class="mb-0 mt-1 opacity-75"><%- headerSubtitleHtml %></p>
          <% } else if (typeof headerSubtitle !== 'undefined' && headerSubtitle) { %>
            <p class="mb-0 mt-1 opacity-75"><%= headerSubtitle %></p>
          <% } %>
        </div>
      </div>
      <div class="d-flex align-items-start gap-3">
        <% if (typeof headerRightInclude !== 'undefined' && headerRightInclude) { %>
          <%- await include(headerRightInclude, Object.assign({}, locals, (typeof headerRightParams !== 'undefined' && headerRightParams) ? headerRightParams : {})) %>
        <% } else if (typeof headerRightHtml !== 'undefined' && headerRightHtml) { %>
          <%- headerRightHtml %>
        <% } %>
      </div>
    </div>
  </div>
 </div>

Now you can customize it based on the partial template with dynamic content, simply by adding it to the content page in this way and passing all the variables that the partial template needs:

<%- await include('/partials/headerModern', {
  headerTitle: 'Configuración de Habilidades Priorizadas',
  headerSubtitle: 'Selecciona las habilidades socioemocionales a evaluar en este período',
  headerIconClass: 'fas fa-brain',
  headerRightHtml: `
    <div class="text-end">
      <small class="d-block opacity-75">Año Normativa</small>
      <select id="select_anio_normativa" class="form-select border-white bg-white bg-opacity-25 text-white fw-bold" style="width: 110px;" dmx-bind:value="anio_normativa_select.value" dmx-on:change="anio_normativa_select.setValue(select_anio_normativa.value)">
        <option dmx-repeat:anio="scAniosNormativa.data.anios" dmx-bind:value="anio" dmx-text="anio"></option>
      </select>
    </div>`
}) %>

So, it seems this was always possible natively:

3 Likes