Aangepaste component maken in WYSIWYG Authoring

voeg nieuwe omslag en dossiers toe

Voeg nieuwe map en bestanden toe voor uw nieuwe aangepaste component in uw AEM-project.

1. Open uw AEM-project en navigeer naar ../blocks/form/components/ .

2. Voeg een nieuwe map voor uw aangepaste component toe op ../blocks/form/components/<component_name> . In dit voorbeeld maken we een map met de naam range .

3. Navigeer naar de nieuwe map op ../blocks/form/components/<component_name> . Navigeer bijvoorbeeld naar ../blocks/form/components/range en voeg de volgende bestanden toe:

   • /blocks/form/components/range/_range.json - Bevat de definitie van de aangepaste component.

   • ../blocks/form/components/range/range.css - Definieert de opmaak voor de aangepaste component.

   • ../blocks/form/components/range/range.js: past de aangepaste component bij uitvoering aan.

     

     note note
     NOTE
     Zorg ervoor dat het JSON-bestand een onderstrepingsteken (_) als voorvoegsel in de bestandsnaam bevat.

Navigeer naar het /blocks/form/components/range/_range.json -bestand en voeg de componentdefinitie voor de aangepaste component toe.

voeg de componentendefinitie toe

Als u de definitie wilt toevoegen, moeten de velden die in het _range.json -bestand moeten worden toegevoegd, als volgt worden ingesteld:

• titel: De titel van de component die in de Universele Redacteur wordt getoond.
• identiteitskaart: Een uniek herkenningsteken van de component.
• fieldType: Forms steunt diverse fieldType om specifieke soorten gebruikersinput te vangen. U kunt gesteunde fieldType in de Extra sectie van de Bytevinden.
• resourceType: Elke douanecomponent heeft een geassocieerd middeltype dat op zijn fieldType wordt gebaseerd. U kunt gesteunde resourceType in de Extra sectie van de Bytevinden.
• jcr:title: Het is gelijkaardig aan een titel, maar het wordt opgeslagen binnen de structuur van de component.
• fd:viewType: Het vertegenwoordigt de naam van de douanecomponent. Dit is de unieke id voor de component. U moet een aangepaste weergave voor de component maken.

Navigeer naar het /blocks/form/components/range/_range.json -bestand en voeg het componentmodel voor de aangepaste component toe.

voeg het componentenmodel toe

Als u het componentmodel voor uw aangepaste component wilt definiëren, moet u de relevante velden toevoegen aan het _range.json -bestand.

1. creeer nieuw model

   • Voeg in de modellenarray een nieuw object toe en stel de id van het componentmodel in zodat deze overeenkomt met de eigenschap fd:viewType die eerder in de componentdefinitie is geconfigureerd.
   • Neem een array met velden in dit object op.

2. bepaalt Gebieden voor de dialoog van het Bezit

   • Elk voorwerp in de gebiedsserie zou een container-type component moeten zijn, toestaand het om als lusje in de dialoog van het Bezit te verschijnen.
   • Sommige velden kunnen verwijzen naar herbruikbare eigenschappen die beschikbaar zijn in models/form-common .

3. Gebruik een Bestaand Model van de Component als Verwijzing

   • U kunt de inhoud van een bestaand componentenmodel kopiëren dat aan uw gekozen fieldType beantwoordt en het wijzigen zoals nodig. Bijvoorbeeld, wordt de number-input component uitgebreid om a waaier component tot stand te brengen, zodat kunnen wij de modelserie van models/form-components/_number-input.json als verwijzing gebruiken.

Het bestand _range.json ziet er na het toevoegen van het componentmodel als volgt uit:

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

U kunt douaneeigenschappenaan een douanecomponent ook toevoegen om zijn functionaliteit uit te breiden.

Navigeer naar het /blocks/form/_form.json -bestand.

Zoek de componentenarray in het object dat id="form" heeft.

Voeg de fd:viewType -waarde van definitions[] toe aan de componentenarray van het object met 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"
    ]
  }
]

Als u de opmaak wilt toevoegen, navigeert u naar het /blocks/form/components/range/range.css -bestand en voegt u de volgende coderegel toe:

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

Met de code kunt u de opmaak en visuele weergave van de aangepaste component definiëren.

Als u de functionaliteit wilt toevoegen, navigeert u naar het /blocks/form/components/range/range.js -bestand en voegt u de volgende coderegel toe:

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

Het bepaalt hoe de aangepaste component reageert op gebruikersinvoer, gegevens verwerkt en integreert met het formulierblok in de Universal Editor.

Nadat u aangepaste stijlen en functionaliteit hebt opgenomen, worden de weergave en het gedrag van de bereikcomponent verbeterd. Het bijgewerkte ontwerp weerspiegelt de toegepaste stijlen, terwijl de toegevoegde functionaliteit een dynamischere en interactieve gebruikerservaring garandeert.
In de onderstaande schermafbeelding ziet u de bijgewerkte bereikcomponent.