Canvas Data API -UI extensions

[SalmaSh3]

Hi,

I am working on AEM UI extensions for content fragment editor. I am using Canvas Data API. As per this documentation (Canvas Data Api - AEM Content Fragments Editor Extensibility), I am trying to set styles to the content fragment fields. It is working for the text fields. When I try to set styles for number fields it is not reflecting the style. Please help on this if anyone have idea on this.

[TarunKumar]

Hi @SalmaSh3 ,

The setStyle method applies styles to the field's presentation in the content fragment editor interface .

Please follow below steps:-

1. Obtain the API Instance: First, ensure you have the api object from the guest connection in your UI extension.

const api = await guestConnection.host.dataApi.get();

2. Use setStyle Method: Call the setStyle method with the name of the number field and an object containing the CSS properties you want to apply.

• fieldName : The exact technical name of the number field as defined in your Content Fragment Model.
• stylesObject : The JavaScript object where keys are CSS property names (camelCase) and values are the desired style values.

const fieldName = "yourNumberFieldName"; // Replace with your field's name
await api.setStyles(fieldName, {
    "backgroundColor": "#f0f0f0",
    "border": "2px solid red",
    "padding": "10px",
    "display": "none" // Example: to hide the field
});

Some points to remember is:

• Editor UI Only: The Canvas Data API is for modifying the user interface within the AEM Content Fragment editor (authoring environment). It does not affect how the number field is displayed on the final rendered page (publish environment).
• Styling the Output (Frontend): To style the number field's appearance on a published webpage, you need to manage the CSS in your AEM site's frontend code (e.g., within the client library of your core components). 

-Tarun