Article

How to make an URL String field into a clickable hyperlink

21:56 Apr 29, 2019

Get the Usr code of the field.
1. Open the section wizard for the section.
2. Double click on the field.
3. Note the Name in DB of the field.
4. Close the section wizard.
Open the Schema for the edit page.
Backup the current Schema by copying and pasting it to a Notepad file.
Find the DIFF section of the insert operation for the Usr code of the field.
If there is a labelCofig section, delete the content of labelConfig
```
"labelConfig": {}
```
Add a comma after "enabled": true
```
"enabled": true,
```

After enabled add:

"showValueAsLink": true,
"href": {
        "bindTo": "UsrCodeOfTheField",
        "bindConfig": {"converter": "getUsrCodeOfTheField"}
         },
"controlConfig": {
         "className": "Terrasoft.TextEdit",
         "linkclick": { bindTo: "onUsrCodeOfTheFieldClick"}
         }

In methods add:

getUsrCodeOfTheField: function(value) {
   return {
       "url": value,
       "caption": value
   };
},
onUsrCodeOfTheFieldClick: function(url) {
   if (url != null) {
        window.open(url, "_blank", "height=" + this.get("WindowHeight") + ",width=" + this.get("WindowWidth"));
        return false;
   }
}

Click the Code Validation button to verify that there are no errors on the page.
Click the Save button.

Refresh the edit page to see the field appear as link.

5 comments

Van Ly

07:47 Jul 31, 2019

You can add mixins "CommunicationOptionsMixin" and update the field as following:

	{
	    "operation": "insert",
	    "name": "...",
	    "values": {
	        "layout": {
	            // ...
	        },
	        "bindTo": "UsrDocumentLink",
	        "className": "Terrasoft.BaseEdit",
	        "showValueAsLink": "true",
	        "href": {
	            "bindTo": "UsrDocumentLink",
	            "bindConfig": {
	                "converter": "getLinkValue"
	            }
	        },
	        "linkclick": {
	            "bindTo": "onOpenWindowClick"
	        }
	    }
	    //...
	}

Julie cooper

22:15 Apr 10, 2020

If I want to have multiple string fields as hyperlinks, how do I do this in 'methods'? Do I add this whole section of code in again for the next field but replacing the 'UserCodeOfTheField with the 2nd string field name?

getUsrCodeOfTheField: function(value) {
   return {
       "url": value,
       "caption": value
   };
},
onUsrCodeOfTheFieldClick: function(url) {
   if (url != null) {
        window.open(url, "_blank", "height=" + this.get("WindowHeight") + ",width=" + this.get("WindowWidth"));
        return false;
   }
}

Oleg Drobina

11:31 Apr 11, 2020

Julie cooper,

you need to add a separate method for the second string field and bind it to your second string field. So there should be

getUsrCode1OfTheField

and

getUsrCode2OfTheField

as well as

onUsrCodeOfTheField1Click

and

onUsrCodeOfTheField2Click

methods and they should be bound to each string field accordingly.

Best regards,

Oscar

praveen n

15:33 Jul 16, 2020

Oscar Dylan,

Hi ,

Here my doubt was in column setup its showing like a normal filed.How to setup same text filed as an hyperlink in column setup also.

Regards,

Praveen

Dennis Hudson

16:15 Jul 16, 2020

Dear praveen n,

Unfortunately, there is no easy way to do the same it in the grid aside from using http/https (or other link-type strings like email, etc.) You can do it by extending or overriding class Terrasoft.Grid (you can find it in the web console, you won't be able to find it in configuration) and changing the method formatCellContent to call formatCellLink when you need it to aside from cases when it is called by default. You can debug method formatCellContent and see how it works in OOB version and create your own based on that. Unfortunately, we don't have examples of such implementation.

Please see the following articles on how to override modules:

https://community.creatio.com/questions/substitutionreplacing-modules

https://community.creatio.com/questions/change-task-displayed-fields

Best regards,

Dennis

Show all comments