Systemstatus
English (US)

Usecases und Praxis-Beispiele

Aktueller Beitrag:
Weitere Beiträge aus dieser Kategorie:

TAL-Praxis-Beipiel: Individualvorlagen für Formulare

  • Aktualisiert
Folgen

Zielsetzung

Ziel dieses Beitrags ist es Ihnen die Möglichkeiten aufzuzeigen, wie sie ein vollständig dynamische Formular-Vorlage mit Hilfe von TAL erstellen.

Inhalte

Unter anderem werden folgende Inhalte in diesem Anwendungsfall gezeigt:

  • Formular-Felder und Labels werden dynamisch, entsprechend der Feld-Konfiguration des Formulars, erzeugt.
  • Die verschiedenen Darstellungs-Optionen werden berücksichtigt.
  • Bei Bedarf greift der Schutz auf Fremdeintragung.
  • Bei Bedarf wird ein Captcha generiert.
  • Bei Bedarf werden versehentliche doppelte Einträge verhindert.
  • Fehler werden entweder in Listen gruppiert oder am Formular-Feld ausgegeben.
  • Für die verschiedenen Limitierungen werde dynamische Hinweistexte generiert.
  • Der Text des Absende-Buttons wird aus einem (Sprach-)Container geladen.

Anwendung

Vorlage Ausgabe (HTML) Ausgabe (Bild)
<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}/">Hallo ${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>fehlende Pflichtfelder</p>
          <ul>
            <li tal:repeat="attribute THIS/getMandatoryErrorAttributes">${attribute/getLabel}</li>
          </ul>
        </div>

        <div tal:condition="THIS/hasValidationErrors" tal:omit-tag="true">
          <p>ung&uuml;ltige Eingaben</p>
          <ul>
            <li tal:repeat="attribute THIS/getValidationErrorAttributes">${attribute/getLabel}</li>
          </ul>
        </div>

        <div tal:condition="THIS/hasCaptchaError" tal:omit-tag="true">
          <p>Bitte best&auml;tigen Sie das 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">Profil bereits vorhanden</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">Unbekanntes Profil</p>
      </div>

      <div tal:condition="THIS/hasAutomatedEntryProtectionError" tal:omit-tag="true">
        <p>Cookies m&uuml;ssen aktiviert sein</p>
      </div>
    </div>

    <div tal:condition="THIS/isSubscriptionLimitSet" tal:omit-tag="true">
      <p>Von ${THIS/getSubscriptionLimitCount} Pl&auml;tzen sind bereits ${THIS/getSuccessfulSubscriptions} belegt. Es sind noch ${THIS/getSubscriptionLimitLeft} offen.</p>
    </div>

    <div tal:condition="THIS/isSubscriptionLimitStartTimeSet" tal:omit-tag="true">
      <p tal:condition="THIS/isSubscriptionLimitEndTimeSet">Die Registierung ist bereits seit ${THIS/getTimeIntervalSinceSubscriptionLimitStarts} offen und bleibt es noch f&uuml;r weitere ${THIS/getTimeIntervalUntilSubscriptionLimitEnds}.</p>
      <p tal:condition="not:THIS/isSubscriptionLimitEndTimeSet">Die Registierung ist bereits seit ${THIS/getTimeIntervalSinceSubscriptionLimitStarts} offen.</p>
    </div>
    <div tal:condition="not:THIS/isSubscriptionLimitStartTimeSet" tal:omit-tag="true">
      <p tal:condition="THIS/isSubscriptionLimitEndTimeSet">Die Registierung ist noch ${THIS/getTimeIntervalUntilSubscriptionLimitEnds} offen.</p>
    </div>

    <form accept-charset="utf-8" action="{$FORM_ACTION}" 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">Bitte ausf&uuml;llen</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>

Folgende Funktionen kommen zur Anwendung:

Formular-Funktionen

Formular-Attribut-Funktionen

String-Funktionen

Profil-Funktionen

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

Verwandte Beiträge