How can we store URL and make this field clckable in the form?

Question

How can we store URL (what should be the field?) and how can we make (if possible at all) this field clckable in the form?

Answer

You can store URL in a text field.

Add the following properties to values of the diff array element:

"showValueAsLink": true,
"href": {
        "bindTo": "UsrFieldName",
        "bindConfig": {"converter": "getUsrFieldNameLink"}
},
"controlConfig": {
        "className": "Terrasoft.TextEdit",
        "linkclick": { bindTo: "onUsrFieldNameLinkClick"}
}

UsrFieldName is the name of the field we want to display as a hyperlink.

Implement two methods that we bound to our field:

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

Make sure the field value starts with http or https, otherwise the system will add application  path to the content. You can also analyze the value incoming parameter in the first method and add this prefix if needed.

A full example of the diff element:

{
    "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
}