51黑料不打烊

Add new folder and files
Add new folder and files for your new custom component in your AEM Project.

1. Open your AEM project and navigate to ../blocks/form/components/.

2. Add a new folder for your custom component at ../blocks/form/components/<component_name>. In this example, we create a folder named range.

3. Navigate to the newly created folder at ../blocks/form/components/<component_name>. For example, navigate to ../blocks/form/components/range, and add the following files:

   • /blocks/form/components/range/_range.json: Contains the definition of the custom component.

   • ../blocks/form/components/range/range.css: Defines the styling for the custom component.

   • ../blocks/form/components/range/range.js: Customizes the custom component at runtime.

     

     note note
     NOTE
     Ensure that the json file includes an underscore (_) as a prefix in its filename.

Navigate to the /blocks/form/components/range/_range.json file and add the component definition for the custom component.

Add the component definition

To add the definition the fields need to be added in the _range.json file are:

• title: The title of the component that is displayed in the Universal Editor.
• id: A unique identifier of the component.
• fieldType: Forms support various fieldType to capture specific types of user input. You can find the supported fieldType in the Extra Byte section.
• resourceType: Each custom component has an associated resource type based on its fieldType. You can find the supported resourceType in the Extra Byte section.
• jcr:title: It is similar to a title, but it is stored within the component鈥檚 structure.
• fd:viewType: It represents the name of the custom component. It is the unique identifier for the component. It is required to create a customized view for the component.

Navigate to the /blocks/form/components/range/_range.json file and add the component model for the custom component.

Add the component model

To define the component model for your custom component, you need to add the relevant fields to the _range.json file.

1. Create new model

   • In the models array, add a new object and set the id of the component model to match the fd:viewType property configured earlier in the component definition.
   • Include a fields array within this object.

2. Define Fields for the Property dialog

   • Each object in the fields array should be a container-type component, allowing it to appear as a tab in the Property dialog.
   • Some fields can reference reusable properties available in models/form-common.

3. Use an Existing Component Model as a Reference

   • You can copy the contents of an existing component model that corresponds to your chosen fieldType and modify it as needed. For example, the number-input component is extended to create a range component, so we can use the models array from models/form-components/_number-input.json as a reference.

The _range.json file, after adding the component model, is as follows:

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

You can also add custom properties to a custom component to extend its functionality.

To add the styling, navigate to the /blocks/form/components/range/range.css file and add the following line of code:

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

The code helps you to define the styling and visual appearance of the custom component.

To add the functionality, navigate to the /blocks/form/components/range/range.js file and add the following line of code:

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

It controls how the custom component interacts with user inputs, processes data, and integrates with the form block in the Universal Editor.

After incorporating custom styling and functionality, the range component鈥檚 appearance and behavior are enhanced. The updated design reflects the applied styles, while the added functionality ensures a more dynamic and interactive user experience.
The below screenshot illustrates the updated range component.