Criar componente personalizado na criação do WYSIWYG

Adicionar nova pasta e arquivos
Adicione novas pastas e arquivos para o novo componente personalizado no projeto do AEM.

1. Abra o projeto do AEM e navegue até ../blocks/form/components/.

2. Adicione uma nova pasta para o componente personalizado em ../blocks/form/components/<component_name>. Neste exemplo, criamos uma pasta chamada range.

3. Navegue até a pasta recém-criada em ../blocks/form/components/<component_name>. Por exemplo, navegue até ../blocks/form/components/range e adicione os seguintes arquivos:

   • /blocks/form/components/range/_range.json: contém a definição do componente personalizado.

   • ../blocks/form/components/range/range.css: define o estilo do componente personalizado.

   • ../blocks/form/components/range/range.js: Personaliza o componente personalizado no tempo de execução.

     

     note note
     NOTE
     Certifique-se de que o arquivo json inclua um sublinhado (_) como um prefixo em seu nome de arquivo.

Navegue até o arquivo /blocks/form/components/range/_range.json e adicione a definição do componente para o componente personalizado.

Adicionar a definição do componente

Para adicionar a definição, os campos que precisam ser adicionados ao arquivo _range.json são:

• título: o título do componente que é exibido no Editor Universal.
• id: um identificador exclusivo do componente.
• fieldType: o Forms oferece suporte a vários fieldType para capturar tipos específicos de entrada de usuário. Você pode encontrar o fieldType com suporte na seção Byte Extra.
• resourceType: cada componente personalizado tem um tipo de recurso associado com base em seu fieldType. Você pode encontrar o resourceType com suporte na seção Byte Extra.
• jcr:title: é semelhante a um título, mas é armazenado na estrutura do componente.
• fd:viewType: representa o nome do componente personalizado. É o identificador exclusivo do componente. É necessário criar uma exibição personalizada para o componente.

Navegue até o arquivo /blocks/form/components/range/_range.json e adicione o modelo de componente para o componente personalizado.

Adicionar o modelo de componente

Para definir o modelo do componente para seu componente personalizado, é necessário adicionar os campos relevantes ao arquivo _range.json.

1. Criar novo modelo

   • Na matriz de modelos, adicione um novo objeto e defina o id do modelo de componente para corresponder à propriedade fd:viewType configurada anteriormente na definição do componente.
   • Incluir uma matriz de campos neste objeto.

2. Definir Campos para a caixa de diálogo Propriedade

   • Cada objeto na matriz de campos deve ser um componente do tipo contêiner, permitindo que apareça como uma guia na caixa de diálogo Propriedade.
   • Alguns campos podem fazer referência a propriedades reutilizáveis disponíveis em models/form-common.

3. Usar um modelo de componente existente como referência

   • Você pode copiar o conteúdo de um modelo de componente existente que corresponda ao fieldType escolhido e modificá-lo conforme necessário. Por exemplo, o componente number-input é estendido para criar um componente range, para que possamos usar a matriz de modelos de models/form-components/_number-input.json como uma referência.

O arquivo _range.json, após adicionar o modelo de componente, é o seguinte:

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

Você também pode adicionar propriedades personalizadas a um componente personalizado para estender sua funcionalidade.

Para adicionar o estilo, navegue até o arquivo /blocks/form/components/range/range.css e adicione a seguinte linha 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;
}

O código ajuda a definir o estilo e a aparência visual do componente personalizado.

Para adicionar a funcionalidade, navegue até o arquivo /blocks/form/components/range/range.js e adicione a seguinte linha de código:

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

Ele controla como o componente personalizado interage com as entradas do usuário, processa dados e se integra ao bloco de formulários no Editor universal.

Depois de incorporar o estilo e a funcionalidade personalizados, a aparência e o comportamento do componente de Intervalo são aprimorados. O design atualizado reflete os estilos aplicados, enquanto a funcionalidade adicionada garante uma experiência do usuário mais dinâmica e interativa.
A captura de tela abaixo ilustra o componente de intervalo atualizado.