System status
Deutsch

Usecases and practical examples

Current article:
More articles in this category:

TAL practice example: Individual templates for forms

  • Updated
Follow

Objective

The goal of this article is to show you the possibilities of creating a completely dynamic form template using TAL.


Contents

Among others, the following contents are shown in this use case:

  • Form fields and labels are created dynamically according to the field configuration of the form.
  • The various display options are taken into account.
  • If necessary, the protection will access external entries.
  • If required, a captcha is generated.
  • If necessary, accidental double entries are prevented.
  • Errors are either grouped in lists or displayed in the form field.
  • For the different limitations dynamic information texts are generated.
  • The text of the send button is loaded from a (language) container.

 

Usage

Template Output (HTML) Output (Image)

<html xmlns="http://www.w3.org/1999/xhtml">
  <head tal:define="lang THIS/getContainer/1234567">
    <title>${THIS/getTitle}</title>
    <style tal:content="structure THIS/getBaseCSS" type="text/css">/*<![CDATA[*/
             
    /*]]>*/
    </style>
    <style tal:content="structure THIS/getAdditionalCSS" type="text/css">/*<![CDATA[*/
       
    /*]]>*/
    </style>
    <script type="text/javascript">
      //<![CDATA[
      function disableSubmitButtonAndSubmit() {
          document.forms.profileform.submit.disabled = true;
          document.forms.profileform.submit_helper = HTMLFormElement.prototype.submit;
          document.forms.profileform.submit_helper();
      }
      //]]>
    </script>
  </head>
  <body tal:define="lang THIS/getFormLanguage">
    <img alt="" src="#" tal:attributes="src THIS/getResourceImageUrl" tal:condition="THIS/hasResourceImageUrl" />

    <h1 tal:condition="not:equals:string:${THIS/getCurrentUser/getValues/FIRSTNAME}/">Hello ${THIS/getCurrentUser/getValues/FIRSTNAME},</h1>
    <p tal:condition="THIS/hasShortText">${THIS/getShortText}</p>

    <div tal:condition="THIS/isMultipleSubmitProtectionEnabled" tal:define="global onSubmit string:return true;;" tal:omit-tag="true">
      <div tal:define="global onSubmit string:disableSubmitButtonAndSubmit();;" tal:omit-tag="true">&nbsp;</div>
    </div>

    <div tal:condition="THIS/hasErrors" tal:omit-tag="true">
      <div tal:condition="THIS/isShowValidationErrorsAsList" tal:omit-tag="true">
        <p>${THIS/getValidationErrorPrefixText}:</p>
        <div tal:condition="THIS/hasMandatoryErrors" tal:omit-tag="true">
          <p>missing mandatory fields</p>
          <ul>
            <li tal:repeat="attribute THIS/getMandatoryErrorAttributes">${attribute/getLabel}</li>
          </ul>
        </div>

        <div tal:condition="THIS/hasValidationErrors" tal:omit-tag="true">
          <p>invalid entries</p>
          <ul>
            <li tal:repeat="attribute THIS/getValidationErrorAttributes">${attribute/getLabel}</li>
          </ul>
        </div>

        <div tal:condition="THIS/hasCaptchaError" tal:omit-tag="true">
          <p>Please confirm the captcha!</p>
        </div>
      </div>

      <div tal:condition="THIS/hasDuplicationErrors" tal:omit-tag="true">
        <p tal:condition="THIS/isShowDuplicationErrorText">${THIS/getDuplicationErrorText}</p>
        <p tal:condition="not:THIS/isShowDuplicationErrorText">Profile already exists</p>
      </div>

      <div tal:condition="THIS/hasIdentityErrors" tal:omit-tag="true">
        <p tal:condition="THIS/isShowIdentityErrorText">${THIS/getIdentityErrorText}</p>
        <p tal:condition="not:THIS/isShowIdentityErrorText">Unknown profile</p>
      </div>

      <div tal:condition="THIS/hasAutomatedEntryProtectionError" tal:omit-tag="true">
        <p>Cookies must be enabled</p>
      </div>
    </div>

    <div tal:condition="THIS/isSubscriptionLimitSet" tal:omit-tag="true">
      <p>Von ${THIS/getSubscriptionLimitCount} Plans are already in place ${THIS/getSuccessfulSubscriptions} occupied. There are still ${THIS/getSubscriptionLimitLeft} open.</p>
    </div>

    <div tal:condition="THIS/isSubscriptionLimitStartTimeSet" tal:omit-tag="true">
      <p tal:condition="THIS/isSubscriptionLimitEndTimeSet">The registration is already since ${THIS/getTimeIntervalSinceSubscriptionLimitStarts} open and will remain so for further ${THIS/getTimeIntervalUntilSubscriptionLimitEnds}.</p>
      <p tal:condition="not:THIS/isSubscriptionLimitEndTimeSet">The registration is already since ${THIS/getTimeIntervalSinceSubscriptionLimitStarts} open.</p>
    </div>
    <div tal:condition="not:THIS/isSubscriptionLimitStartTimeSet" tal:omit-tag="true">
      <p tal:condition="THIS/isSubscriptionLimitEndTimeSet">The registration is still ${THIS/getTimeIntervalUntilSubscriptionLimitEnds} open.</p>
    </div>

    <form accept-charset="utf-8" action="{$FORM:23394363}" id="profileform" method="post" name="profileform" tal:attributes="onsubmit onSubmit">
      <input name="name" tal:attributes="value THIS/getCsrfToken; name THIS/getCsrfTokenName;" tal:condition="THIS/isAutomatedEntryProtectionEnabled" type="hidden" value="value" />
      <table>
        <tbody>
          <tr tal:repeat="row THIS/getOrderedAttributes">
            <td tal:repeat="attribute row">
              <div tal:replace="structure attribute/renderLabelHTML">&nbsp;</div>

              <div tal:replace="structure attribute/renderWidgetHTML">&nbsp;</div>

              <div tal:condition="not:THIS/isShowValidationErrorsAsList" tal:omit-tag="true">
              <div class="errormessage" tal:condition="attribute/hasValidationError">${attribute/getValidationErrorText}</div>

              <div class="errormessage" tal:condition="attribute/hasMandatoryError">Please fill in</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <label>&nbsp;</label>
              <button name="action" type="submit" tal:content="lang/getAttributeByName/SUBMITTEXT">&nbsp;</button>
            </td>
          </tr>
          <tr>
            <td tal:content="structure THIS/renderCaptcha">&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </form>
  </body>
</html>

 

The following functions are used: (Verlinkung)

Formular-Funktionen

Formular-Attribut-Funktionen

String-Funktionen

Profil-Funktionen

Standard TAL-Funktionen und Modifier (offizielle TAL-Dokumentation)

 

Related articles