Highlighted

Pathfield for Text component hyperlink in 6.3 Classic UI

CT1012

17-10-2017

As a part of upgrade from 5.6.1 to 6.3.

In AEM 6.3 Pathfield for hyperlink in text component handled under LinkDialog.js is not us allowing to leave blank

1326323_pastedImage_1.png

We are using basic libs LInkDialog.js... Code for pathfield

{

                    "itemId": "href",

                    "name": "href",

                    "parBrowse": false,

                    "anchor": CQ.themes.Dialog.ANCHOR,

                    /*"fieldLabel": CQ.I18n.getMessage("Link"),*/

                    "xtype": "pathfield",

                    "ddGroups": [

                        CQ.wcm.EditBase.DD_GROUP_PAGE,

                        CQ.wcm.EditBase.DD_GROUP_ASSET

                    ],

                    "fieldDescription": CQ.I18n.getMessage("Select file from the Content Finder or enter the complete URL"),

                    "listeners": {

                        "dialogselect": {

                            "fn": this.selectAnchor,

                            "scope": this

                        },

                        "render": this.initHrefDragAndDrop

                    },

                    "validator": CUI.rte.Utils.scope(this.validateLink, this),

                    "validationEvent": "keyup",

                    "escapeAmp": true

                }

Validate Link

    validateLink: function(href) {

        var linkRules = this.getParameter("linkRules");

        if (!linkRules) {

            return (href.length > 0 ? true : CQ.I18n.getMessage("No link provided"));

        }

        var isValid = linkRules.validateHref(href);

        return isValid || CQ.I18n.getMessage("Invalid link");

    }

});

Should i need to add any Properties or config options?

Replies

Highlighted

smacdonald2008

17-10-2017

In AEM 6.3 - you should be working in TOuch UI and using Granite data types. Most of the code examples you will find in AEM 6.3 is applicable for TOuch UI. I will to see if there are any Classic UI examples still.

Highlighted

CT1012

17-10-2017

  Thanks donald

Somehow i see validate link is causing the issue, even i've tried allowBlank=True

ValidateLink from 5.6.1

validateLink: function() {

        var href = this.getFieldByName("href");

        if (!href) {

            return false;

        }

        href = href.getValue();

        var linkRules = this.getParameter("linkRules");

        if (!linkRules) {

            return (href.length > 0);

        }

        return linkRules.validateHref(href);

    }

ValidateLink from 6.3

validateLink: function(href) {

        var linkRules = this.getParameter("linkRules");

        if (!linkRules) {

            return (href.length > 0 ? true : CQ.I18n.getMessage("No link provided"));

        }

        var isValid = linkRules.validateHref(href);

        return isValid || CQ.I18n.getMessage("Invalid link");

    }

Highlighted

CT1012

18-10-2017

We are using the basic field available from RTE Link Dialog.The one with red border in the first post is the same. Please find the code in Post #1. Let me know if you need anything specificpastedImage_2.png

PS: Picture from the other hyperlink thread

Highlighted

smacdonald2008

18-10-2017

Can you put together a test package that has all of this AEM code in it and put in Google drive and put link here. We will look into this. As I stated, Classic UI is not much of a focus anymore as Touch UI and Grainte APIs is the main focus.

Highlighted

CT1012

18-10-2017

Donald

Thanks for the response...Please use the basic classic Text component for the Hyperlink. After the Hyperlink dialogue shows up if we leave the field empty and try to click OK, field borders red as the first post. It's not a customized field, you can use this JS  underlibs/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js

Since we've one more field to choose, we don't want the href field to validate and stop us from clicking OK by setting red. I'm able to use it by removing validation. Any other way i can handle this?

Highlighted

smacdonald2008

18-10-2017

You are correct - if i open this and click OK - a border appears.

AAA555.png

Look at the reference docs for the Classic UI Pathfield

CQ5 | Widgets API

You can control this for a Pathfield by this setting --

AAAA666.png

Make sure you are setting to true.

Highlighted

CT1012

19-10-2017

I've checked with allowBlank, it is not working. I think Validate Link is not allowing to skip the value blank. Let me know if i can do anything in the below code. Even if i remove validation, it is taking null by default and creating a hyperlink after clicking OK

   

validateLink: function(href) {

        var linkRules = this.getParameter("linkRules");

        if (!linkRules) {

            return (href.length > 0 ? true : CQ.I18n.getMessage("No link provided"));

        }

        var isValid = linkRules.validateHref(href);

        return isValid || CQ.I18n.getMessage("Invalid link");

    }