Utiliser des variables dynamiques pour traduire les éléments de formulaire personnalisés

Vous pouvez afficher les personnalisations de Sign-Up Prompt Customizations (Personnalisations de l’invite d’inscription) différemment selon les données contextuelles. La variable locale est utilisée pour afficher conditionnellement les champs du formulaire et définir le comportement de validation.

Le cas d’utilisation suivant fonctionne avec la variable locale pour afficher un message de conditions d’utilisation et une case à cocher. Toute variable exposée à Page Templates (Modèles de pages) peut être substituée.

Prérequis

Activer les langues locales fr et es

activer les paramètres régionaux :

Rendre conditionnellement les champs personnalisés

Utilisez le Management API pour ajouter un modèle partiel à l’invite d inscription Conteneur d’invite de connexion universelle form-content-end. Dans le cas où le paramètre régional est es ou fr, vous souhaiterez peut-être afficher un message de conditions d’utilisation et une case à cocher.

{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}

Was this helpful?

/

La demande suivante est envoyée au point terminal Set custom text for a specific prompt (Définir un texte personnalisé pour une invite spécifique) dans la Management API :

// PUT prompts/signup/partials

{
  "signup": {
    "form-content-end": "{% if locale..."
  }
}

Was this helpful?

/

Votre invite d’inscription affiche désormais un message de conditions d’utilisation et une case à cocher uniquement lorsque les paramètres régionaux sont définis sur fr ou es :

Pour tester le résultat, accédez à Manage Dashboard (Gérer le tableau de bord) et accédez à Branding (Image de marque) > Universal Login (Connexion universelle) > Customization Options (Options de personnalisation), puis cliquez droit sur Try button (Bouton d’essai) et copiez l’adresse du lien. Ajoutez les paramètres de requête suivants à l’URL copiée et accédez à la nouvelle URL : &screen_hint=signup&ui_locales=fr (or es).

Ajouter une validation

Lorsque le paramètre régional est fr, vous pouvez valider que la case est cochée avant de continuer. Mettez à jour le modèle partiel à l’aide du code de validation suivant :

{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>

    <!-- NEW -->
    <div
      class="ulp-error-info"
      data-ulp-validation-function="requiredFunction"
      data-ulp-validation-event-listeners="change">
      Vous devez accepter les termes et conditions pour continuer
    </div>
    <!-- END NEW -->
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}

<!-- NEW -->
<script>
  function requiredFunction(element, formSubmitted) {
    if (! formSubmitted) {
      return true;
    }
    return element.checked;
  }
</script>
<!-- END NEW -->

Was this helpful?

/

fr.