Graphics migration

    • Limiting the number of form entries

      This new feature, which limits the number of form submissions, requires a graphical migration.

      Explanations of the new code HTML

      Avant tout le contenu du formulaire se situait dans un unique <div> sous la balise <form>

      <form>
    <div>
        ...

      Now

      <form>
    <div data-ametys-form="form">
        ...

      And if the limitation is activated, new tags are added beforehand.

      <form data-ametys-form-state="loading|open|closed[error">
    <div class="form-limit-loading"></div>
    <p data-ametys-form-fill="starterror-text">...</p>
    <p data-ametys-form-fill="closed-text">...</p>
    <p data-ametys-form-fill="limit-text">...</p>
    <div data-ametys-form="form">
        ...
      • l'attribut data-ametys-form-state de la balise <form> donne l'état actuel du fomulaire :
        • loading => load current state
        • open => the form is open for submission. The text indicating the number of places available must be displayed.
        • closed => the form has no more places available. The text indicating that the form is closed must be displayed.
        • error => loading failed. The error text must be displayed.
      • <div class="form-limit-loading"></div> est une pastille de chargement en cours : le temps de charger l'état ouvert ou fermé du formulaire en ajax. Doit être affichée si l'état est loading.
      • <p data-ametys-form-fill="starterror-text"> est un message d'erreur si le chargement de de l'état du formulaire échoue. Doit être affiché si l'état est error.
      • <p data-ametys-form-fill="closed-text"> est le message affiché si le formulaire est fermé aux soumissions. Doit être affichée si l'état est closed.
      • <p data-ametys-form-fill="limit-text"> est le message affiché si le formulaire est ouvert aux soumissions. Doit être affichée si l'état est open.

      To do

      Core Doc, Workspaces and ODF charters already contain this migration; if you inherit them, you don't need to do anything.

      Docbook2html

      Check in your xsl docbook2html.xsl that the following template does not exist

      <xsl:template match="html:form">

      If it exists, apply the modification as on the kernel.
      You'll notice that some of the js code has been moved to a javascript file alongside; and you don't need to add the handle-limit template but just call it.

      New minimum classes CSS

      You'll need to manage loading as well as messages.
      The easiest way to do this is to import the following CSS into all your content that has richtext, or take your inspiration from it.

      Depending on the project, you may already have a css imported for all content, for example: content.css or richtext.css.
      Place files forms.css and loader.svg next to this css and add the instruction : @import url('forms.css');

      The new html structure may lead to interactions between your old CSS forms and the access limitation: it is therefore important to check the appearance of your forms with and without the limitation.

Back to top

Forms