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
, lepréfixe
et lesuffixe
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 dumessage
peuvent être traduites.avec l’option boxInput dans l’attribut usfSubtypes : ajoute la possibilité de traduire la
valeur exemple
, lepréfixe
et lesuffixe
.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,
}