Créer un composant personnalisé en création WYSIWYG

Ajout d’un dossier et de fichiers

Ajoutez un dossier et des fichiers pour votre nouveau composant personnalisé dans votre projet AEM.

1. Ouvrez votre projet AEM et accédez à ../blocks/form/components/.

2. Ajoutez un dossier pour votre composant personnalisé sur ../blocks/form/components/<component_name>. Dans cet exemple, nous allons créer un dossier nommé range.

3. Accédez au dossier nouvellement créé sur ../blocks/form/components/<component_name>. Par exemple, accédez à ../blocks/form/components/range et ajoutez les fichiers suivants :

   • /blocks/form/components/range/_range.json : contient la définition du composant personnalisé.

   • ../blocks/form/components/range/range.css : définit le style du composant personnalisé.

   • ../blocks/form/components/range/range.js : personnalise le composant personnalisé au moment de l’exécution.

     

     note note
     NOTE
     Vérifiez que le fichier json comprend un trait de soulignement (_) comme préfixe dans son nom de fichier.

Accédez au fichier /blocks/form/components/range/_range.json et ajoutez la définition du composant personnalisé.

Ajouter la définition du composant

Pour ajouter la définition, les champs à ajouter dans le fichier _range.json sont les suivants :

• title  : titre du composant qui s’affiche dans l’éditeur universel.
• id  : identifiant unique du composant.
• fieldType  : Forms prend en charge différents fieldType pour capturer des types spécifiques d’entrée utilisateur. Le fieldType pris en charge se trouve dans la section Octet supplémentaire.
• resourceType  : chaque composant personnalisé est associé à un type de ressource en fonction de son fieldType. Le resourceType pris en charge se trouve dans la section Octet supplémentaire.
• jcr:title  : similaire à un titre, mais il est stocké dans la structure du composant.
• fd:viewType  : représente le nom du composant personnalisé. Il s’agit de l’identifiant unique du composant. Vous devez créer une vue personnalisée pour le composant.

Accédez au fichier /blocks/form/components/range/_range.json et ajoutez le modèle de composant pour le composant personnalisé.

Ajouter le modèle de composant

Pour définir le modèle de composant de votre composant personnalisé, vous devez ajouter les champs appropriés au fichier _range.json.

1. Créer un modèle

   • Dans le tableau de modèles, ajoutez un objet et définissez l’id du modèle de composant pour qu’il corresponde à la propriété fd:viewType configurée précédemment dans la définition du composant.
   • Incluez un tableau de champs dans cet objet.

2. Définir des champs pour la boîte de dialogue Propriété

   • Chaque objet du tableau des champs doit être un composant de type conteneur, ce qui lui permet d’apparaître sous la forme d’un onglet dans la boîte de dialogue Propriété.
   • Certains champs peuvent faire référence à des propriétés réutilisables disponibles dans models/form-common.

3. Utiliser un modèle de composant existant comme référence

   • Vous pouvez copier le contenu d’un modèle de composant existant correspondant au fieldType de votre choix et le modifier si nécessaire. Par exemple, le composant number-input est étendu pour créer un composant range (plage) afin que nous puissions utiliser le tableau de modèles de models/form-components/_number-input.json comme référence.

Après l’ajout du composant, le fichier _range.json ressemble à celui-ci :

"models": [
{
  "id": "range",
  "fields": [
    {
      "component": "container",
      "name": "basic",
      "label": "Basic",
      "collapsible": false,
      "...": "../../../../models/form-common/_basic-input-fields.json"
    },
    {
      "...": "../../../../models/form-common/_help-container.json"
    },
    {
      "component": "container",
      "name": "validation",
      "label": "Validation",
      "collapsible": true,
      "...": "../../../../models/form-common/_number-validation-fields.json"
    }
  ]
}
]

Vous pouvez également ajouter des propriétés personnalisées à un composant personnalisé pour étendre ses fonctionnalités.

Accédez au fichier /blocks/form/_form.json.

Recherchez le tableau de composants dans l’objet qui contient id="form".

Ajoutez la valeur fd:viewType de definitions[] au tableau de composants de l’objet avec id="form".

"filters": [
  {
    "id": "form",
    "components": [
      "captcha",
      "checkbox",
      "checkbox-group",
      "date-input",
      "drop-down",
      "email",
      "file-input",
      "form-accordion",
      "form-button",
      "form-fragment",
      "form-image",
      "form-modal",
      "form-reset-button",
      "form-submit-button",
      "number-input",
      "panel",
      "plain-text",
      "radio-group",
      "rating",
      "telephone-input",
      "text-input",
      "tnc",
      "wizard",
      "range"
    ]
  }
]

Pour ajouter les styles, accédez au fichier /blocks/form/components/range/range.css et ajoutez la ligne de code suivante :

/** Styling for range */
main .form .range-widget-wrapper.decorated input[type="range"] {
margin: unset;
padding: unset;
appearance: none;
height: 5px;
border-radius: 5px;
border: none;
background-image: linear-gradient(to right, #ADD8E6 calc(100% - var(--current-steps)/var(--total-steps)), #C5C5C5 calc(100% - var(--current-steps)/var(--total-steps)));
}

main .form .range-widget-wrapper.decorated input[type="range"]:focus {
outline: none;
}

.range-widget-wrapper.decorated input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #00008B; /* Dark Blue */
border: 3px solid #00008B; /* Dark Blue */
cursor: pointer;
outline: 3px solid #fff;
}

.range-widget-wrapper.decorated input[type="range"]:focus::-webkit-slider-thumb {
border-color: #00008B; /* Dark Blue */
}

.range-widget-wrapper.decorated .range-bubble {
color: #00008B; /* Dark Blue */
font-size: 20px;
line-height: 28px;
position: relative;
display: inline-block;
padding-bottom: 12px;
font-weight: bold;
}

.range-widget-wrapper.decorated .range-min,
.range-widget-wrapper.decorated .range-max {
font-size: 14px;
line-height: 22px;
color: #494f50;
margin-top: 16px;
display: inline-block;
}

.range-widget-wrapper.decorated .range-max {
float: right;
}

Le code vous permet de définir le style et l’aspect visuel du composant personnalisé.

Pour ajouter les fonctionnalités, accédez au fichier /blocks/form/components/range/range.js et ajoutez la ligne de code suivante :

function updateBubble(input, element) {
const step = input.step || 1;
const max = input.max || 0;
const min = input.min || 1;
const value = input.value || 1;
const current = Math.ceil((value - min) / step);
const total = Math.ceil((max - min) / step);
const bubble = element.querySelector('.range-bubble');
// during initial render the width is 0. Hence using a default here.
const bubbleWidth = bubble.getBoundingClientRect().width || 31;
const left = `${(current / total) * 100}% - ${(current / total) * bubbleWidth}px`;
bubble.innerText = `${value}`;
const steps = {
    '--total-steps': Math.ceil((max - min) / step),
    '--current-steps': Math.ceil((value - min) / step),
};
const style = Object.entries(steps).map(([varName, varValue]) => `${varName}:${varValue}`).join(';');
bubble.style.left = `calc(${left})`;
element.setAttribute('style', style);
}

export default async function decorate(fieldDiv, fieldJson) {
console.log('RANGE DIV: ', fieldDiv);
console.log('RANGE JSON: fieldJson', fieldJson);
 const input = fieldDiv.querySelector('input');
// modify the type in case it is not range.
input.type = 'range';
input.min = input.min || 10;
input.max = input.max || 1000;
// create a wrapper div to provide the min/max and current value
const div = document.createElement('div');
div.className = 'range-widget-wrapper decorated';
input.after(div);
const hover = document.createElement('span');
hover.className = 'range-bubble';
const rangeMinEl = document.createElement('span');
rangeMinEl.className = 'range-min';
const rangeMaxEl = document.createElement('span');
rangeMaxEl.className = 'range-max';
rangeMinEl.innerText = `${input.min || 1}`;
rangeMaxEl.innerText = `${input.max}`;
div.appendChild(hover);
// move the input element within the wrapper div
div.appendChild(input);
div.appendChild(rangeMinEl);
div.appendChild(rangeMaxEl);
input.addEventListener('input', (e) => {
updateBubble(e.target, div);
});
updateBubble(input, div);
return fieldDiv;
}

Elles contrôlent la manière dont le composant personnalisé interagit avec les entrées des utilisateurs et utilisatrices, traite les données et s’intègre au bloc de formulaire dans l’éditeur universel.

Lorsque le style et les fonctionnalités personnalisés ont été intégrés, l’aspect et le comportement du composant « range » (plage) sont améliorés. La conception mise à jour reflète les styles appliqués, tandis que les fonctionnalités ajoutées garantissent une expérience client plus dynamique et interactive.
La copie d’écran ci-dessous illustre le composant « range » (plage) mis à jour.