Generación de componentes personalizados en creación de WYSIWYG

Agregar carpeta y archivos nuevos

Agregue carpetas y archivos nuevos para el nuevo componente personalizado en su proyecto de AEM.

1. Abra el proyecto de AEM y navegue hasta ../blocks/form/components/.

2. Añada una carpeta nueva para el componente personalizado en ../blocks/form/components/<component_name>. En este ejemplo, creamos una carpeta denominada range.

3. Vaya a la carpeta recién creada en ../blocks/form/components/<component_name>. Por ejemplo, vaya a ../blocks/form/components/range y agregue los siguientes archivos:

   • /blocks/form/components/range/_range.json: contiene la definición del componente personalizado.

   • ../blocks/form/components/range/range.css: define el estilo del componente personalizado.

   • ../blocks/form/components/range/range.js: personaliza el componente personalizado durante la ejecución.

     

     note note
     NOTE
     Asegúrese de que el archivo JSON incluye un guion bajo (_) como prefijo en su nombre de archivo.

Vaya al archivo /blocks/form/components/range/_range.json y agregue la definición del componente para el componente personalizado.

Adición de la definición del componente

Para añadir la definición, los campos que deben agregarse en el archivo _range.json son los siguientes:

• title: el título del componente que se muestra en el Editor universal.
• id: un identificador único del componente.
• fieldType: los formularios admiten varios fieldType para capturar tipos específicos de entradas de usuario. Puede encontrar el fieldType admitido en la sección Byte adicional.
• resourceType: cada componente personalizado tiene asociado un tipo de recurso basado en su fieldType. Puede encontrar el resourceType admitido en la sección Byte adicional.
• jcr:title: es similar a un título, pero se almacena dentro de la estructura del componente.
• fd:viewType: representa el nombre del componente personalizado. Es el identificador único del componente. Es necesario crear una vista personalizada para el componente.

Vaya al archivo /blocks/form/components/range/_range.json y agregue el modelo de componente para el componente personalizado.

Adición del modelo de componente

Para definir el modelo de componente para el componente personalizado, debe añadir los campos relevantes al archivo _range.json.

1. Creación de un nuevo modelo

   • En la matriz de modelos, añada un nuevo objeto y establezca el id del modelo de componente para que coincida con la propiedad fd:viewType configurada antes en la definición del componente.
   • Incluya una matriz de campos dentro de este objeto.

2. Definición de campos para el cuadro de diálogo Propiedad

   • Cada objeto de la matriz de campos debe ser un componente de tipo contenedor, lo que permite que aparezca como una pestaña en el cuadro de diálogo Propiedad.
   • Algunos campos pueden hacer referencia a propiedades reutilizables disponibles en models/form-common.

3. Uso de un modelo de componente existente como referencia

   • Puede copiar el contenido de un modelo de componente existente que corresponda a su fieldType elegido y modificarlo según sea necesario. Por ejemplo, el componente number-input se ha ampliado para crear un componente de rango, de modo que podemos usar la matriz de modelos de models/form-components/_number-input.json como referencia.

El archivo _range.json, después de agregar el modelo de componente, es el siguiente:

"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"
    }
  ]
}
]

También puede añadir propiedades personalizadas a un componente personalizado para ampliar su funcionalidad.

Navegue hasta el archivo /blocks/form/_form.json.

Busque la matriz de componentes dentro del objeto que tiene id="form".

Agregue el valor fd:viewType de definitions[] a la matriz de componentes del objeto con 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"
    ]
  }
]

Para agregar el estilo, vaya al archivo /blocks/form/components/range/range.css y añada la siguiente línea de código:

/** 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;
}

El código le ayuda a definir el estilo y el aspecto visual del componente personalizado.

Para agregar la funcionalidad, vaya al archivo /blocks/form/components/range/range.js y añada la línea de código siguiente:

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;
}

Controla la manera en que el componente personalizado interactúa con las entradas del usuario, procesa los datos e integra el bloque de formulario en el Editor universal.

Después de incorporar un estilo y una funcionalidad personalizados, se mejora el aspecto y el comportamiento del componente de rango. El diseño actualizado refleja los estilos aplicados, mientras que la funcionalidad añadida garantiza una experiencia del usuario más dinámica e interactiva.
La siguiente captura de pantalla ilustra el componente de rango actualizado.