Feature #13600: Renseigner automatiquement une adresse - Silverpeas Core - Silverpeas Issues Tracker

Actions

Copier le lien

Feature #13600

fermé

Renseigner automatiquement une adresse

Ajouté par Yohann Chastagnier il y a plus d'un an. Mis à jour il y a plus d'un an.

Statut:

Closed

Priorité:

Normal

Assigné à:

Yohann Chastagnier

Catégorie:

Composant WEB

Version cible:

Silverpeas - Version 6.4

Début:

16/05/2023

Echéance:

% réalisé:

100%

Temps estimé:

Livraison en TEST:

Livraison en PROD:

Description

Il s'agit ici de mettre en place un composant WEB pour permettre à un utilisateur de renseigner une adresse de la manière la plus juste possible.

Fichiers

Télécharger tous les fichiers

address-input-no-decoration.png (3,51 ko) address-input-no-decoration.png		Yohann Chastagnier, 16/05/2023 15:31
address-input-decorated.png (6,18 ko) address-input-decorated.png		Yohann Chastagnier, 16/05/2023 15:45
address-input-query.png (70,5 ko) address-input-query.png		Yohann Chastagnier, 16/05/2023 15:47
address-input-selected.png (7,88 ko) address-input-selected.png		Yohann Chastagnier, 16/05/2023 16:04

Actions

Copier le lien Télécharger tous les fichiers

Mis à jour par Yohann Chastagnier il y a plus d'un an

Fichier address-input-no-decoration.png address-input-no-decoration.png ajouté
Fichier address-input-decorated.png address-input-decorated.png ajouté
Fichier address-input-query.png address-input-query.png ajouté
Fichier address-input-selected.png address-input-selected.png ajouté
Statut changé de In progress... à Resolved
% réalisé changé de 0 à 100

Le plugin JavaScript Silverpeas adresssearch permet d'aider l'utilisateur a renseigner plus facilement une adresse.
Il s'agit ici d'une aide à la saisie, et non pas d'une fonctionnalité de validation d'une adresse.

Ci-après un exemple de sa mise en oeuvre.

Partons d'un formulaire de saisie dans lequel une adresse doit être renseignée :

Dans le DOM, les identifiants techniques sont les suivants :

Adresse : #street
Code postal : #postalCode
Ville : #city

Dans un premier temps, il faut importer le plugin dans la page Silverpeas.
Si le formulaire de saisie est présenté depuis une page JSP dédiée, il suffit d'indiquer dans la balise head :

<view:includePlugin name="addresssearch" />

Mais dans notre exemple, le formulaire est affiché dynamiquement dans la page, et cette page n'inclue pas encore le plugin.
Le plugin est alors chargé dynamiquement en JavaScript :

sp.dom.includePlugin('addresssearch').then(function() {
  // fonction exécutée quand le plugin est chargé
});

Quelle que soit la méthode de chargement, il faut ensuite décorer le champ de saisie Adresse avec les comportements apportés par le plugin :

AddressSearchInput.decorate("#street");

Le champ de saisie se présente alors comme suit :

Lorsque l'utilisateur commence à saisir une adresse (plus de 5 caractères) et que des adresses correspondent en partie, elles sont présentées (20 maximum) à l'utilisateur.
Il peut alors en sélectionner une (flèches haut/bas du clavier puis entrée, ou avec la souris) :

Dans le cas de notre exemple, sur la sélection d'une adresse, les champs Adresse, Code postal et Ville doivent être renseignés automatiquement.
Pour ce faire, il faut compléter le code ci-dessus :

// chargement dynamique du plugin
sp.dom.includePlugin('addresssearch').then(function() {
  // décoration du champ de saisie
  const asi = AddressSearchInput.decorate("#street");
  // écoute de l'événement 'select' pour obtenir l'adresse sélectionnée (custom event)
  asi.addEventListener('select', function(e) {
    const address = e.detail.data;
    // les valeurs sont renseignées automatiquement
    asi.target.value = address.getStreet()[0];
    document.querySelector('#postalCode').value = address.getPostalCode();
    document.querySelector('#city').value = address.getCity();
    // le focus est donné sur le champ de saisie qui suit
    document.querySelector('#contact').focus();
  })
});