AEM 6.3 Regex and ColorField issue

[brijesht1767899]

Hi All,

We are using Classic UI in our project and after upgrade to AEM 6.3, some widgets are not working. We found out later that the issue was with following scenarios:

1. Colorfield is not working when we add property "showHexValue" as true

2. Regex property is not working for Numberfield widget

Kindly provide the suggestion or fix if anyone had faced this issue while upgrading to AEM 6.3 and had resolved this.

Thanks in Advance

Brijesh Tewari

7838631373

[smacdonald2008]

In 6.3 - older EXTJS APIs may not work like they did on previous versions of AEM. They will most likely not be fixed as Adobe is moving away from Classic UI to Touch UI.

As a result, in AEM 6.3 you should refactor your components to move away from Classic API to use the TOuch UI Granite APIs.

For a color picker in TOuch UI Component dialog - there is no data type that lets you pick colors. You need to write a custom Sling Resource type using JQuery Plug-ins. We have an article to show you how to perform this use case.

Scott's Digital Community: Creating a custom Experience Manager sling:resourceType for Touch UI

[brijesht1767899]

Hi Member,

Thanks for the reply but we have no option right now to move the components to touch UI .

So we need to fix this in classic UI. Fix related to this classic will help us in resolving the issue.

[smacdonald2008]

Then open a ticket with support. There may be a hotfix to get these EXTJS apis working...

Aslo  - AEM 6.3 component examples in Articles will focus on Touch UI as we do not recommend using Classic anymore.

[Prince_Shivhare]

As Scott suggested, if you working in AEM 6.3 you should go with Touch UI. because also in upcoming version there will be no classic UI.

and possibly you can have lot of issues with AEM 6.3 + classic UI. so better to go with touch ui.

and still you want to look out .. then please check the link given by Scott.

Regards,
Prince

[brijesht1767899]

Hi Prince,

We loved to build this component to Touch UI but we cannot do this until client approves this and he wants this to work in Classic UI.

Because of this we are facing this issue.

[smacdonald2008]

You should inform the Client that work in Classic UI **may** be at risk in future AEM versions as Adobe recommends all components be for TOuch UI. 

Open the ticket with Support to see why EXTJS APIS not working like they used to in older versions.

[brijesht1767899]

Hi Scott,

Thanks for the suggestion. We have raised the ticket with Adobe regarding this. If we find any solution from them i will update that here also.

[smacdonald2008]

That is great - and when you eventually switch to TOuch UI - we have a lot more examples, and articles to help you.

[JustinAsh]

I came across the same issue with colorfield and the classic ui when upgrading to 6.3. Here was my solution, it works for both colorfield and numberfield. You just need to edit one line in /libs/cq/ui/widgets/source/ext/override/widgets/form/TextField.js. You don't actually edit that file though. Since this lives in /libs you can create the same file in /apps. /apps/cq/ui/widgets/source/ext/override/widgets/form/TextField.js. There you can update line 96 from:

if (this.regex && !this.regex.test(value)) { 
    errors.push(this.regexText); 
} 

to:

if (this.regex && this.regex.test && !this.regex.test(value)) { 
    errors.push(this.regexText); 
}

Basically adding a check if the regex method exists. https://blog.justinashdown.com/colorfield-and-aem-6-3-classic-ui/

[brijesht1767899]

HI Justin,

Many thanks it works for us.....