Expand my Community achievements bar.

SOLVED

RTE customize hyperlink

Avatar

Level 5

Hi

I want to implement the functionality where i need to place the validations on the hyperlink dialog in rte in such a way if the link selected in path field belongs to specific path and author didn't tick on open in new window. It should display the error message not to proceed. How can i implement such thing.

 

Thanks

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

I guess below steps would help you achieve what you have mentioned:

Steps:

  • First of all you will need to overlay OOTB LinkDialog.js file.
    • Current location of LinkDialog.js is - /libs/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js
    • Overlay the path and bring it under apps
  • You will need to define the buttons config in default constructor i.e. under var defaults
    • Add below button config to it
var defaults = { "title": CQ.I18n.getMessage("Hyperlink"), "modal": true, "width": 400, "height": 160, "dialogItems": [ { "itemId": "href", "name": "href", "parBrowse": true, "anchor": CQ.themes.Dialog.ANCHOR, "fieldLabel": CQ.I18n.getMessage("Link to"), "xtype": "pathfield", "rootPath": rootPath, "ddGroups": [ CQ.wcm.EditBase.DD_GROUP_PAGE, CQ.wcm.EditBase.DD_GROUP_ASSET ], "fieldDescription": CQ.I18n.getMessage("Drop files or pages from the Content Finder"), "listeners": { "dialogselect": { "fn": this.selectAnchor, "scope": this }, "render": this.initHrefDragAndDrop }, "validator": CUI.rte.Utils.scope(this.validateLink, this), "validationEvent": "keyup", "escapeAmp": true }, { "itemId": "targetBlank", "name": "targetBlank", "xtype": "checkbox", "boxLabel": CQ.I18n.getMessage("Open in new window"), "value": "targetBlank" } ],"buttons": [ { "itemId": "okButton", "name": "okButton", "text": CQ.I18n.getMessage("Ok"), "handler": this.checkDialogSubmit, "disabled": false, "scope": this }, { "itemId": "cancelButton", "name": "cancelButton", "text": CQ.I18n.getMessage("Cancel"), "handler": this.cancel, "disabled": false, "scope": this }] };

 

  • what we have achieved with this is; we have overridden the behavior of OK button click.
  • Not define checkDialogSubmit in your JS file and perform all validation checks there. Sample is as below:
checkDialogSubmit: function(dialog) { alert('Dialog check called'); var hrefField = this.getFieldByName("href"); var hrefValue = hrefField.getValue(); var targetBlankFieldValue = false; var targetBlankField = this.getFieldByName("targetBlank"); if(targetBlankField){ targetBlankFieldValue = targetBlankField.getValue(); } if(hrefValue.indexOf('geometrixx-media')!=-1 && !targetBlankFieldValue){ alert('for pages of geometrixx-media target_blank needs to be checked'); return false; }else{ this.apply(); } return true; },
  • make sure to have this.apply() in your pass condition else dialog wont be saved.

Hope it helps.

Thanks

Runal

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

Hi,

I guess below steps would help you achieve what you have mentioned:

Steps:

  • First of all you will need to overlay OOTB LinkDialog.js file.
    • Current location of LinkDialog.js is - /libs/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js
    • Overlay the path and bring it under apps
  • You will need to define the buttons config in default constructor i.e. under var defaults
    • Add below button config to it
var defaults = { "title": CQ.I18n.getMessage("Hyperlink"), "modal": true, "width": 400, "height": 160, "dialogItems": [ { "itemId": "href", "name": "href", "parBrowse": true, "anchor": CQ.themes.Dialog.ANCHOR, "fieldLabel": CQ.I18n.getMessage("Link to"), "xtype": "pathfield", "rootPath": rootPath, "ddGroups": [ CQ.wcm.EditBase.DD_GROUP_PAGE, CQ.wcm.EditBase.DD_GROUP_ASSET ], "fieldDescription": CQ.I18n.getMessage("Drop files or pages from the Content Finder"), "listeners": { "dialogselect": { "fn": this.selectAnchor, "scope": this }, "render": this.initHrefDragAndDrop }, "validator": CUI.rte.Utils.scope(this.validateLink, this), "validationEvent": "keyup", "escapeAmp": true }, { "itemId": "targetBlank", "name": "targetBlank", "xtype": "checkbox", "boxLabel": CQ.I18n.getMessage("Open in new window"), "value": "targetBlank" } ],"buttons": [ { "itemId": "okButton", "name": "okButton", "text": CQ.I18n.getMessage("Ok"), "handler": this.checkDialogSubmit, "disabled": false, "scope": this }, { "itemId": "cancelButton", "name": "cancelButton", "text": CQ.I18n.getMessage("Cancel"), "handler": this.cancel, "disabled": false, "scope": this }] };

 

  • what we have achieved with this is; we have overridden the behavior of OK button click.
  • Not define checkDialogSubmit in your JS file and perform all validation checks there. Sample is as below:
checkDialogSubmit: function(dialog) { alert('Dialog check called'); var hrefField = this.getFieldByName("href"); var hrefValue = hrefField.getValue(); var targetBlankFieldValue = false; var targetBlankField = this.getFieldByName("targetBlank"); if(targetBlankField){ targetBlankFieldValue = targetBlankField.getValue(); } if(hrefValue.indexOf('geometrixx-media')!=-1 && !targetBlankFieldValue){ alert('for pages of geometrixx-media target_blank needs to be checked'); return false; }else{ this.apply(); } return true; },
  • make sure to have this.apply() in your pass condition else dialog wont be saved.

Hope it helps.

Thanks

Runal

Avatar

Level 5

Hi Runal

Thanks, but i am not able to get this behavior. I just copied paste the file LinkDialog.js under my /apps/myprj folder. But i am not getting the alert on clinking of OK. It seems that file not getting call. Attached is my LinkDialog.js under  /apps/myprj can you please check.

Avatar

Community Advisor

For the alert that is called i.e. [alert('for pages of geometrixx-media target_blank needs to be checked');] on above code, is there any way we can make changes such that instead of the alert pop-up, the message is displayed inside the hyperlink dialog box?

Something like shown in the image attahced. [img]expected dialog after invalidation.PNG[/img]

Avatar

Community Advisor

You will need to overlay the entire path from libs to apps.

i.e. /libs/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js to /apps/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js

Unfortunately the forum doesn't allow to attach the zip otherwise I would have attached it here.

Send me your email id and I will post you the package there.

Thanks

Runal