Ajouter un champ personnalisé

Pour ajouter un champ personnalisé, vous devez ajouter la clé customFields dans les paramètres de l’installateur.

// src/plugins/formbuilder.js

import store from '@/store';
import { vueUnistraFormbuilder } from '@vue-unistra/formbuilder';

Vue.use(unistraFormbuilder, {
  store,
  customFields: {
    fields: [],
    settings: {}
  },
});

Format de l’objet Field

id

type

requis

string

Valeur uniquer permettant d’identifier le type de champ. Format : Usf<TypeDeChamps>, ex: UsftText, UstSelect

name

type

requis

string

C’est le nom du champ. C’est également la clé utilisée pour la traduction. Sera utilisé en anglais dans la liste des champs.

icon

type

requis

string

Nom de l’icon. Format : mdi-<nomDeLIcone>. Le nom de l’icone peut êtretrouvé sur le site « mdi icons ». ex. : mdi-comment-text, mdi-table-column

types

type

requis

{ label: string, value: string }

x

Liste les types possibles pour le champ. Exemple pour le champ de type texte :

Lié à l’option type au niveau de l’attribut usfSubtypes

types: [
    {
        label: 'Text',
        value: 'text',
    },
    {
        label: 'Number',
        value: 'number',
    },
    {
        label: 'URL',
        value: 'url',
    },
    {
        label: 'Email',
        value: 'email',
    },
    {
        label: 'Password',
        value: 'password',
    },
]

styles

type

requis

{ label: string, value: string }

x

Liste les styles possibles pour le champ. Exemple pour le champ de type date :

Lié à l’option style au niveau de l’attribut usfSubtypes

styles: [
    {
        label: 'Standard',
        value: 'standard',
    },
    {
        label: 'Birthday',
        value: 'birthday',
    },
]

nested

type

requis

Array<string>

x

Liste les id des composants imbriqués.

usfSubtypes

type

requis

Array<string>

accordion

Accesses a specific display tab for the accordion layout, including visibility and panel management settings (add, delete, move).

boxInput

Dans l’onglet affichage, ajoute la possibilité de renseigner la valeur exemple, le préfixe et le suffixe et ajoute des boutons pour activer les styles par défaut pour le champ.

dateTime

Dans l’onglet validation ajoute les champs pour régler la date minimale et la date maximale.

defaultValue

Dans l’onglet validation ajoute un champ pour renseigner une valeur par défaut.

editable

Ajoute un éditeur de texte riche dans l’onglet données.

file

Dans l’onglet validation ajoute les champs pour régler la taille maximale pour les fichiers.

grid

Dans l’onglet affichage ajoute un bouton pour régler si le contenu est vertical ou horizontal. Affiche les colonnes contenus dans le champ et le bouton pour ajouter une nouvelle colonne.

selectElement

Dans l’onglet affichage, pour les options répétables, si le selectElement est défini, vous pouvez cocher si les valeurs sont interdépendantes (si une valeur est sélectionnée dans la première liste d’option, vous ne pouvez plus la sélectionner dans la seconde liste d’option).

selectable

Dans l’onglet données ajoute un bouton multiple (ex. : si le bouton est coché, on peut sélectionner plusieurs valeur dans le champ de type liste d’option) et dans l’onglet données ajoute un bouton pour activer le mode chips.

style

Associé avec le champ de type date par example, dans l’onglet affichage ajoute une liste d’option pour sélectionner le style prédéfini pour le sélecteur de date (standard ou anniversaire). La liste des valeurs de style est définie dans l’attribut styles̀

text

Dans l’onglet validation ajoute les champs pour régler la taille maximale pour les fichiers.

type

Ajoute une liste d’options pour définir le type du champ (ex. : champ de type texte/email/url…). Les options disponibles dans la liste se règle dans l’attribut types.

withOptions

Modifie les options :

  • ajoute et lie les options nouvellement créée quand le champ est créé;

  • dans l’onglet condition quand le champ a l’option withOption, on doit sélectionner les options;

  • dans l’onglet donées, ajoute un tableau avec la liste des options.

settingsModalTabs

type

requis

Array<modalTabs[modalTabName: string] | modalTabs[modalTabName: string](…param: boolean)>

Ajoute ou non l’onglet dans la fenêtre de paramétrage du champ. modalTab peut être un simple objet ou une fonction si elle a des options.

import {modalTabs} from '@vue-unistra/formbuilder/src/store/modules/form-builder/controls/utils';

settingsModalTabs: [
    modalTabs['data'](true),
    modalTabs['api'],
    modalTabs['conditional'],
],

api

Onglet pour ajouter le nom du champ

conditional

Onglet pour ajouter des conditions pour :

  • « le champ est affiché si… »

  • « le champ existe si… »

  • « le champ est requis si… »

data

L’onglet a différentes formes :

  • avec l’option editable dans l’attribut usfSubtypes : affiche un éditeur de texte riche.

  • avec l’option selectable dans l’attribut usfSubtypes : affiche un bouton pour définir si le champ peut accepter des valeurs multiples.

  • avec l’option withOptions dans l’attribut usfSubtypes : insert un tableau qui affiche toutes les options liées au champ.

display

L’onglet a différentes formes :

  • avec l’option boxInput dans l’attribut usfSubtypes : ajoute la possibilité de renseigner la valeur exemple, le préfixe et le suffixe et ajoute des boutons pour activer les styles par défaut pour le champ.

  • avec l’option grid dans l’attribut usfSubtypes : ajoute un bouton pour régler si le contenu est vertical ou horizontal, affiche les colonnes contenues dans le champ et le bouton pour ajouter une nouvelle colonne.

  • avec l’option selectable dans l’attribut usfSubtypes : affiche un bouton pour activer le mode chip.

  • with the accordion option in the usfSubtypes: displays a specific tab for the accordion layout, including visibility and panel management settings (add, delete, move).

internationalization

Onglet avec un tableau pour traduire le libellé, le message, la valeur d'exemple, le préfixe, le suffixe et les libellés d'option.

  • sans option dans l’attribut usfSubtypes: seul les valeurs du libellé et du message peuvent être traduites.

  • avec l’option boxInput dans l’attribut usfSubtypes : ajoute la possibilité de traduire la valeur exemple, le préfixe et le suffixe.

  • avec l’option withOptions dans l’attribut usfSubtypes : ajoute la possibilité de traduire les libellés d'option.

validation

Onglet pour modifier les réglages de validation du champ.

  • par défaut a un bouton pour modifier si le champ est requis.

  • avec l’option defaultValue dans l’attribut usfSubtypes : ajoute un champ pour ajouter une valeur par défaut pour le champ.

  • avec l’option text dans l’attribut usfSubtypes: ajoute deux champs pour indiquer la taille minimale et/ou la taille maximale pour le champ.

  • avec l’option file dans l’attribut usfSubtypes : ajoute les champs pour régler la taille maximale pour les fichiers.

  • avec l’option dateTime dans l’attribut usfSubtypes : ajoute les champs pour régler la date minimale et la date maximale.

toAdd

Objet pour ajouter, en plus des clés obligatoires, des clés spécifiques dans le champ nouvellement créé.

ex. le champ de type liste d’options a une clé options pour lister les id des options liées et une clé defaultOption pour stocker l’id de l’option par défaut.

UsfSelect: {
    id: 'UsfSelect',
    toAdd: {
        component: 'UsfSelect',
        options: [],
        defaultOption: null,
    },
},

… le champ nouvellement créé :

{
    // mandatory keys
    component: "UsfSelect",
    exist: true,
    visible: true,
    parentId: "root",
    id: "dsxtdeqbjy",
    // specific keys
    options: [],
    defaultOption: null,
}