Le menu de cette colonne permet d’ajouter de nouveaux widgets. Ils seront ajouté en fin de formulaire.
Permet de faire un export du JSON. Vous pouvez aussi télécharger un ZIP contenant les fichiers nécessaires à faire fonctionner le formulaire (voir "Installation sur un projet").
Permet de faire un export du HTML du formulaire (avec les templates actuels). En début d’export, vous retrouverez le JSON afin de pouvoir réimporter le formulaire plus tard.
Permet d’impotrer un formulaire JSON.
Affiche une démo du formulaire.
Affiche cette documentation.
Permet d’éditer un widget.
Réduit/Agrandit un widget.
Ce bouton permet de drag’n’drop un widget.
Permet de déplacer le widget vers le haut.
Permet de déplacer le widget vers le bas.
Supprime un widget.
Il y a 2 façons de faire :
$form = new PhpForm(
$template_dir = [chemin vers votre répertoire de templates],
$json_file = [chemin vers votre JSON]
);
$monObjetAEditer = new [Objet d'une classe étendant DefaultClass]( array [liste des variables du formulaire] );
$form = new PhpForm(
$template_dir = [chemin vers votre répertoire de templates],
$json_file = [chemin vers votre JSON],
$object = $monObjetAEditer
);
<?php
$sql = 'SELECT * FROM dossier WHERE id_dossier = 30';
$dossier = new Dossier( get_row( $sql ) );
$form = new PhpForm(
$template_dir = $rootDir . '/templates/form_widgets/',
$json_file = $rootDir . '/form_json/dossier.json',
$object = $dossier
);
?>
Ensuite, vous n'avez plus qu'à faire <?php echo $form; ?> et le formulaire s'affichera.
/!\ il faut que les name de vos champs correspondent aux variables de votre objet (et sans doute au nom des champs de votre DB).
Il est possible de faire automatiquement la vérification et l'enregistrement d'un formulaire :
<?php
$sql = 'SELECT * FROM dossier WHERE id_dossier = 30';
$dossier = new Dossier( get_row( $sql ) );
$form = new PhpForm(
$template_dir = $rootDir . '/templates/form_widgets/',
$json_file = $rootDir . '/form_json/dossier.json',
$object = $dossier
);
if ( isset( $_POST[ 'action' ] ) && ( $_POST[ 'action' ] === 'save' ) ) {
header( 'Content-Type: application/json' );
$check = $form->check( $_POST, $_FILES );
if ( $check === true ) {
$save = $form->save( $_POST, $_FILES );
if ( $save === true ) {
echo json_encode( [
'status' => 'success',
] );
} else {
echo json_encode( [
'status' => 'error',
'errors' => $save,
] );
}
} else {
echo json_encode( [
'status' => 'error',
'errors' => $check,
] );
}
exit;
}
// ...
echo '<form class="test_form">';
echo $form;
// Ce bouton peut être déclaré directement dans le JSON
echo '<button class="btn-submit-form">Valider</button>';
echo '</form>';
?>
<script>
$( '.btn-submit-form' ).click( function () {
$( '.test_form' ).submit();
} );
$( '.test_form' ).submit( function ( e ) {
e.preventDefault();
var params = {
'method' : 'demo_form_php',
'action' : 'save'
};
submitForm( this, params );
return false;
} );
</script>
Dans l'exemple ci-dessus :
Si la fonction check a retourné "true", alors on passe à l'enregistrement :
Certains widgets sont très similaires et utilisent le même formulaire et les mêmes fonctionnalité (select et boutons radio par exemple).
Note : pour certains widgets avec beaucoup d’attributs (comme le selectpicker) il peut-être parfois plus rapide de créer le widget sur l’interface, exporter le JSON, l’éditer puis le réimporter.
Les différents champs communs à plusieurs widgets :
Note : sur les champs date simple ou double je n'ai pas voulu imposé l'icône de calendrier, il faut donc l'ajouter dans le append
Possède : label, name, obligatoire ?, class additionnelles du conteneur, class additionnelles du label, class additionnelles du champ, prepend, append, attributs, affichage conditionnel
Note : les checkbox, les title switch et les toggle switch ont une value="1" si ils sont cochés et ne sont pas envoyés sinon (comme pour un formulaire classique en fait).
Possède : label, name, obligatoire ?, class additionnelles du conteneur, class additionnelles du label, class additionnelles du champ, attributs, affichage conditionnel
Possède : label, name, obligatoire ?, class additionnelles du conteneur, class additionnelles du label, class additionnelles du champ, attributs, affichage conditionnel, Valeurs extraites d'un
Possède : label, obligatoire ?, class additionnelles du conteneur, class additionnelles du label, class additionnelles du champ, prepend, append, attributs, affichage conditionnel
Note : ce champ possède en plus un label 1, name 1, label 2, name 2. Les labels sont facultatifs (dans ce cas ce sera «Du» et «au») et les name sont pour les champs date.
Une liste de checkbox. C'est comme une checkbox classique mais avec plusieurs label/valeur
Un des champs les plus complet (et complexe) que j'ai créé. Basiquement, c'est un champ de texte amélioré.
Il possède les champs suivant en plus :
URL interrogée : lorsque le champ est modifié, le script attends 150ms avant d'interroger cette URL. Si avant les 150ms le champ est de nouveau modifié, le timer est réinitialisé. Ça évite de lancer trop de requêtes au serveur
Paramètres envoyés en POST : liste de paramètres fixes envoyés en POST.
Callback après recherche : un callback qui est appelé lorsque le JS reçoit la liste des réponses du serveur (permet par exemple de sélectionner automatiquement la valeur si il n'y en n'a plus qu'une seule…).
Callback après sélection : un callback qui est appelé lorsque l'utilisateur sélectionne une valeur.
Je n'ai pour l'instant pas mis de callback permettant de modifier l'URL ou les paramètres POST.
Le script coté serveur reçoit les paramètres POST initialisés et un paramètre "search" correspondant au contenu du champ de recherche.
Sa réponse doit être un JSon de la forme :
[
{ "label" : "valeur #1", "foo" : "valeur #2", "bar" : "valeur #3", "baz" : "valeur #4" },
{ "label" : "valeur #1", "foo" : "valeur #2", "bar" : "valeur #3", "baz" : "valeur #4" },
// ...
]
Pour chaque élément, le label est obligatoire. Les autres valeurs sont facultatives et peuvent avoir n'importe quel nom.
Dans l'exemple de JSON ci-dessus, au moment de la sélection par l'utilisateur, si votre champ autocomplete a un attribut data-field-foo, si ça valeur pointe vers un champ existant (pointeur CSS), alors ce champ sera rempli automatiquement avec la valeur.
Exemple :
dans mon formulaire j'ai une recherche pour une adresse.
mon JSon me retourne ceci :
[
{ "label" : "1 rue de Rivoli 75001 Paris", "number" : "1", "way" : "rue de rivoli", "zipcode" : "75001", "city" : "Paris" },
{ "label" : "2 rue de Rivoli 75001 Paris", "number" : "2", "way" : "rue de rivoli", "zipcode" : "75001", "city" : "Paris" },
{ "label" : "3 rue de Rivoli 75001 Paris", "number" : "3", "way" : "rue de rivoli", "zipcode" : "75001", "city" : "Paris" },
{ "label" : "4 rue de Rivoli 75001 Paris", "number" : "4", "way" : "rue de rivoli", "zipcode" : "75001", "city" : "Paris" },
{ "label" : "5 rue de Rivoli 75001 Paris", "number" : "5", "way" : "rue de rivoli", "zipcode" : "75001", "city" : "Paris" }
]
Si sur mon autocomplete j'ai :
<input
class="form-control form-search autocomplete"
type="text"
id="id-autocomplete"
data-field-number=".address_no"
data-field-way=".address_way"
data-field-zipcode=".address_zipcode"
data-field-city=".address_city"
data-url="http://domaine.paris.notaires.fr/search_address"
>
Alors $( '.address_no' ) sera automatiquement rempli avec «number», $( '.address_way' ) avec «way» etc.
Vous pouvez aussi choisir d'utiliser le callback après sélection pour effectuer cette manipulation (les valeurs du JSon sont envoyées en 2m paramètre) mais votre callback doit être dans le scope global de la page.
Vous pouvez ajouter autant de boutons que vous voulez sur la même ligne. Vous pouvez modifier leur classes (que ce soit pour de la mise en forme pour pour les cibler en JS).
Pour faire de la mise en forme
Juste un conteneur avec une class et un affichage conditionnel. Si vous avez plusieurs champs avec la même condition d'affichage, préférez utiliser le conteneur. Il est possible d'avoir des enfants dans les enfants, il n'y a pas de limite de profondeur.
Un conteneur censé ne recevoir que 2 enfants (en fait vous en mettez autant que vous voulez…). Pratique par exemple sur les adresse pour mettre sur la même ligne le numéro et l'adresse, le CP et la ville…
Vous n'avez pas trouvé votre bonheur parmis les widgets précédents ? Créez le votre. Ce champ vous permet d'injecter le code HTML que vous voulez (et pour l'instant, même du JS).