Question

Hyperlink fields

I'm new to BPMOnline and I was wondering how to make a custom field linkable to an external source - a hyper link.  I understand how to create fields, display them, but can you control formatting or make them of type link?

Thanks

 

Like

8 comments

I might be using the wrong community forurm for such questions.

Hi John,

 

This is the right place for such questions :)

It's very easy to make the field linkable in the grid. You just need to put https:// before the field value and once you display it in the grid, it turns into a hyperlink:

Please note that in this case the field's value won't be clickable on the edit page itself. To make it clickable there would take some more effort.

In the diff of your custom field you need to add the following code (the name of the custom field from the example below is 'UsrPhoto'):

"showValueAsLink": true,
"href": {
        "bindTo": "UsrFoto",
        "bindConfig": {"converter": "getUsrFotoLink"}
},
"controlConfig": {
        "className": "Terrasoft.TextEdit",
        "linkclick": { bindTo: "onUsrFotoLinkClick"}
}

Then you need to add the methods like these:

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

Kindly note that the value of the field should start with 'http/https' for it to be considered a hyperlink.

 

Lisa

thanks

Thanks Lisa! To make this solution more clear, here is full diff array item code, manually added part marked with bold font:

{
        "operation": "insert",
        "name": "UsrURLpage22872546-f334-4b46-a445-112b532455c4",
        "values": {
                "layout": {
                        "colSpan": 12,
                        "rowSpan": 1,
                        "column": 0,
                        "row": 3,
                        "layoutName": "Header"
                },
                "labelConfig": {},
                "enabled": true,
                "bindTo": "UsrURLpage",
                "showValueAsLink": true,
                "href": {
                        "bindTo": "UsrURLpage",
                        "bindConfig": {"converter": "getUsrURLpageLink"}
                },
                "controlConfig": {
                        "className": "Terrasoft.TextEdit",
                        "linkclick": { bindTo: "onUsrURLpageLinkClick"}
                }
        },
        "parentName": "Header",
        "propertyName": "items",
        "index": 6
}



Here is implementation of methods:

 

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

 

Dmitry Gamora,

How do you set the url and caption from different fields, so that it looks and functions like most links, which don't display the URL?

Janine White,

The  getUsrURLpageLink returns an object with two parameters. You can adjust the value, which is passed to the parameter. Url parameter will store the link. Caption parameter will be set to value from other field. 

 

Therefore, retrieve the needed value before return and use it in the caption parameter. The method will look somewhat like this:

getUsrURLpageLink: function(value) {
                var caption = this.get("Field");
                return {
                        "url": value,
                        "caption": caption
                };
        }

Regards,

Anastasia

 

Hi Dmitry Gamora,

Here my doubt was After implementing of your code Now my text fields are changed to hyperlinks. But in column setup why Its showing as normal filed and only once opening of edit page its showing that filed as a hyperlink.How we can show in column setup also that filed as a hyperlink without using hppt/https.

 

Regards,

Praveen

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