Actualisation conditionnelle du champ

À partir de NexoPOS 5.3.x, certains champs tels que « select », « multiselect » et « search-select » verront leurs options actualisées de manière conditionnelle en fonction des valeurs de leurs éléments frères.

L’idée ici est de toujours proposer au utilisateur des choix exacts en fonction d’une sélection précédente qu’il a effectuée. Prenons l’exemple d’un formulaire qui comporte deux champs de type « select ». Le premier champ « select » liste tous les pays, et le second champ « select » liste les villes du pays. Il est plus logique que les options du second champ « select » soient mises à jour pour correspondre au pays sélectionné dans le premier champ.

Configurer le champ

Pour qu’un champ puisse surveiller les autres champs, détecter leurs modifications et mettre à jour ses options, vous devez fournir quelques options supplémentaires au champ côté backend.

<?php
use App\Classes\FormInput;

// ...

$country = FormInput::searchSelect(
  label: __( 'Countries' ),
  name: 'country',
);

$town = FormInput::searchSelect(
  label: __( 'Town' ),
  name: 'town',
  refresh: FormInput::refreshConfig(
    url: '', // url to fetch new options
    watch: 'country', // the name of the field to watch changes
);

Dans l’exemple ci-dessus, le premier champ est « country » et le second est « town ». Sur le deuxième champ, nous fournirons l’option « refresh », pour laquelle nous utiliserons FormInput::refreshConfig. Cette fonction renvoie un tableau avec « url » et « watch ».

url : Il s’agit de l’URL à utiliser pour récupérer les nouvelles options. Notez que NexoPOS effectuera une requête POST vers cette URL avec uniquement l’entrée « identifier », qui correspond à la valeur sélectionnée dans le champ « watch » (dans notre exemple, il s’agit du pays).

watch : Il s’agit du nom du champ à surveiller. En cas de modification apportée à ce champ, tous les champs qui définissent une propriété « refresh » seront notifiés.

Valeur renvoyée

Comme NexoPOS demande l’URL fournie, cette URL doit renvoyer une réponse valide pour que le système fonctionne. L’entrée que les changements surveillés attendent en réponse est une liste d’options sous forme de tableau. Utilisez « Helper::toJsOptions » pour convertir une collection de modèles en un tableau JavaScript valide que NexoPOS peut comprendre.

Ceci est un exemple de sortie attendue par NexoPOS.