Esta es una traducción que desde EGA Futura ofrecemos como cortesía a toda la Ohana y comunidad de programadores, consultores, administradores y arquitectos de Salesforce para toda Iberoamérica.
El enlace a la publicación original, lo encontrarás al final de este artículo.
…
Mejore la flexibilidad con editores y tipos de propiedades personalizados en Experience Builder
Haga que la configuración de componentes para sus usuarios de Experience Builder sea más cómoda e intuitiva: cree editores y tipos de propiedades personalizados para sus Lightning Web Components personalizados. Atrás quedaron los días en los que la configuración de un componente se limitaba a cuadros de texto y desplegables básicos. Esta entrada de blog le mostrará cómo hacer que sus Lightning Web Components sean visualmente interactivos y fáciles de configurar.
Creación de un editor de propiedades personalizado
Con los editores de propiedades personalizados, puede crear cualquier tipo de campo de interfaz de usuario para configurar un valor de propiedad en Experience Builder. Por ejemplo, en lugar de un campo de texto en el que sus usuarios escribirían una fecha, el panel de propiedades de su componente puede ofrecer un selector de fecha con un calendario emergente en el que los usuarios pueden hacer clic para seleccionar una fecha.
Un editor de propiedades personalizado no es más que un componente web Lightning. La creación de uno es igual que la creación de cualquier otro componente web Lightning, con sólo algunos detalles adicionales. Veamos cómo crear uno. Utilizaremos la alineación de texto como ejemplo.
Escenario: Supongamos que está trabajando con un Lightning Web Component personalizado llamado MyCustomComponent. Para la propiedad textAlignment, en lugar del editor de cadenas predeterminado, prevé tener un grupo de botones donde los usuarios puedan ajustar la alineación con un solo clic.
Para crear este grupo de botones, puede crear un Lightning Web Component que actúe como editor de propiedades personalizado para la propiedad textAlignment del tipo String. Llamaremos a este nuevo editor personalizado alignmentCPE.
Para crear este editor de propiedades personalizado, siga estos pasos básicos.
Paso 1: Crear una clase de componente
Para que el componente alignmentCPE actúe como un editor de propiedades personalizado, debe adherirse al contrato del editor de propiedades. El contrato requiere que su componente editor de propiedades personalizado incluya ciertas propiedades públicas en su clase de elemento: label, description, required, value, errors y schema. Consulte nuestra guía para obtener más información sobre el contrato del editor de propiedades. A continuación se muestra un fragmento de clase básico para crear una clase de componente.
export default class AlignmentCPE extends LightningElement {
@api valor;
@api label;
@api esquema; // Derivado del tipo de propiedad asociada.
@api errores;
@track botones = […]
handleAlignmentClick(evento) {
const value = event.target.value;
this.value = valor;
this.dispatchEvent(new CustomEvent(«valuechange», {detail: {value: this.value}}));
}
}
Paso 2: Crear la interfaz de usuario del componente
A continuación, vamos a crear una interfaz de usuario fácil de usar para el editor de propiedades utilizando el mismo HTML y CSS que utilizaría para otros componentes web de Lightning.
A continuación se muestra un fragmento de código para el componente alignmentCPE.
Paso 3: Actualizar la configuración XML
Por último, asegúrese de que el archivo js-meta.xml de su componente reconoce alignmentCPE como editor de propiedades.
58.0
true
Componente del editor de alineación
relámpago__EditorDePropiedades
Creación de un tipo de propiedad personalizada
Un tipo de propiedad personalizado se define utilizando un nuevo tipo de metadatos llamado ExperiencePropertyTypeBundle.
Para crear un tipo de propiedad personalizado, siga estos pasos.
Escenario: Supongamos que está trabajando con su componente web personalizado de Lightning, MyCustomComponent. Desea crear un tipo de propiedad complejo, layoutAndBorderStyle, que incluya subpropiedades para borderStyle, borderWeight, borderRadius, layoutHeight y layoutWidth. También quiere organizar estas propiedades en pestañas llamadas Borders y Size.
Para crear este tipo complejo, siga estos subpasos.
Paso 1. Estructura del ExperiencePropertyTypeBundle
En primer lugar, vamos a configurar la carpeta para el nuevo tipo de metadatos. Cree una carpeta experiencePropertyTypeBundles para describir layoutAndBorderStyleType, nuestro tipo de propiedad personalizado.
+–miPaqueteDeMetadatos
+–experiencePropertyTypeBundles
+–layoutAndBorderStyleType
+–schema.json
+–design.json
Paso 2. Definir el esquema Definir el esquema: schema.json
Un archivo schema.json es esencial para definir la estructura, el tipo y la validación de una propiedad. Al adherirse a las especificaciones del esquema JSON, se asegura de que los valores de propiedad que establece para su componente se alinean con la estructura y el formato necesarios, manteniendo la integridad de los datos y la funcionalidad del componente.
Consulte nuestra guía para obtener una lista completa de las palabras clave que puede especificar
…
Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2023/12/enhance-flexibility-with-custom-property-editors-and-types-in-experience-builder.html
