How to hyperlink a virtual column?

Hello,

 

I have a detail in which I have added a column from another table using the "diff" array. Please see below Code. I would like the "Link" column to get hyperlinked. Unfortunately, the code I added does not seem to add hyperlink.

Can someone help please?

getShareLink: function(value) {
 
                return {
                        url: value,
                        caption: value,
 
                };
        	},
        	onShareLinkClick: function(url) {
                if (url != null) {
                        window.open(url, "_blank", "height=" + this.get("WindowHeight") + ",width=" + 								this.get("WindowWidth"));
                        return false;
                }
   },
 
//diff array
{
	"operation": "insert",
	"name": "PsgDataGrid",
	"parentName": "Detail",
	"propertyName": "items",
	"index": 0,
	"values": {
			"itemType": Terrasoft.ViewItemType.GRID,
			"listedZebra": true,
			"collection": {"bindTo": "Collection"},
			"activeRow": {"bindTo": "ActiveRow"},
			"primaryColumnName": "Id",
			"isEmpty": {"bindTo": "IsGridEmpty"},
			"isLoading": {"bindTo": "IsGridLoading"},
			"multiSelect": {"bindTo": "MultiSelect"},
			"selectedRows": {"bindTo": "SelectedRows"},
			"sortColumn": {"bindTo": "sortColumn"},
			"sortColumnDirection": {"bindTo": "GridSortDirection"},
			"sortColumnIndex": {"bindTo": "SortColumnIndex"},
			"linkClick": {"bindTo": "linkClicked"},
			"type": "listed",
			"useListedLookupImages": true,
			"visible": {
				"bindTo": "isImageManagerDetailView",
				"bindConfig": {"converter": "getDataGridVisible"}
					},
					"listedConfig": {
						"name": "DataGridListedConfig",
						"items": [
							{
 
								"name": "Link",
								"bindTo": "Link",
								"position": {
									"column": 16,
									"colSpan": 8
								},
								"caption": Resources.localizableStrings.Link,
								"values":
								{
 
									"config": {
											"className": "Terrasoft.TextEdit",
											"linkclick": { bindTo: "onShareLinkClick"},
											"showValueAsLink": true,
											"enabled" : true,
											"href": {
											"bindTo": "Link",
											"bindConfig": {"converter": "getShareLink"}
										}
									}
								},
							}

 

Like 0

Like

8 comments

Hello,

If you want to make a text fields display as a hyperlink you need to add these parameters to the "values" part of the diff:
"showValueAsLink": true,
 "href": {
        "bindTo": "UsrLink",
        "bindConfig": {"converter": "getLinkFormat"}
 },
 "controlConfig": {
        "className": "Terrasoft.TextEdit",
        "linkclick": { bindTo: "onLinkClick"}
}
Note that "UsrLink" is the Code of the column.
And in the methods part add these methods:
            getLinkFormat: function(value) {
                return {
                    "url": value,
                    "caption": value
                };
            },
 
            onLinkClick: function(url) {
                var link = document.createElement("a");
                link.href = url;
                link.target = "_blank";
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                return false;
            }
After this, your text should be displayed as a hyperlink.

Dmytro Vovchenko,

 

kindly see the code above. I have pasted the code with href, control config and showvalueaslink. It does not seem to work which is why I would like to check if the team can help here

Shivani Lakshman,

In that case, can you please show a screenshot of the detail so I can see how it looks like with values?

Sure

Shivani Lakshman,

I can see that you have two parameters named "values", inner and outer ones. Can you please try moving parameters "showValueAsLink", "bindConfig" and others to the outer "values" 

Dmytro Vovchenko,

I believe the outer values is for the detailgrid. I anyway tried outside the inner value and it still did not work. I am attaching the code

 define("FileDetailV2", ["FileDetailV2Resources", "PsgCurrentStorageImageConstants", "ViewUtilities", "ConfigurationConstants", "ConfigurationEnums", "ServiceHelper", "ProcessModuleUtilities","terrasoft", "BusinessRuleModule", "ImageListViewModel", "GridUtilitiesV2","ConfigurationGrid", "ConfigurationGridGenerator", "ConfigurationGridUtilities"],
function(Resources,PsgCurrentStorageImageConstants, ViewUtilities, ConfigurationConstants, ConfigurationEnums, ServiceHelper, ProcessModuleUtilities,Terrasoft, BusinessRuleModule) 
		{
	return {
		rules: {
		},
		attributes: {  
			"ShareButtonMenuItems": {
				dataValueType: Terrasoft.DataValueType.COLLECTION
			}
		},
 
		messages: {
		},
 		mixins: {
         ConfigurationGridUtilites: "Terrasoft.ConfigurationGridUtilities"
        },
		methods: {
 
				init: function() {
						this.callParent(arguments);
						this.loadSPConfiguration();
 
					},
 
 
 
			initLoadFilesQueryColumns: function(esq) {
				this.callParent(arguments);
				esq.addColumn("[PsgFileLink:PsgFileId].PsgCurrentStorage", "CurrentStorage");
				esq.addColumn("[PsgFileLink:PsgFileId].PsgShareableLink", "ShareLink");
 
			},
 
			getImageByCurrentStorage: function() {
 
				var imageUrl = PsgCurrentStorageImageConstants.Icons.DataBase;
				var storageType = this.get("CurrentStorage");
				if(storageType) {
					if(storageType.displayValue === "SharePoint") {
						imageUrl = PsgCurrentStorageImageConstants.Icons.Cloud;
					}
 
				}		
 
				return imageUrl;
			},
 
			decorateItem: function(item) {
				this.callParent(arguments);	
				item.columns["CurrentStorage"] = {
					caption: "",
					columnPath: "CurrentStorage",
					dataValueType: Terrasoft.DataValueType.LOOKUP,
					isLookup: true,
					name: "CurrentStorage"
				};
 
				item.defGetLookupImageUrlMethod = "getIconByCurrentStorage";
				item.getIconByCurrentStorage = this.getImageByCurrentStorage;
			},
 			addColumnLink: function(item, column) {
                this.callParent(arguments);
            },
 
			getShareLink: function(value) {
 
                return {
                        url: value,
                        caption: value,
 
                };
        	},
        	onShareLinkClick: function(url) {
                if (url != null) {
                        window.open(url, "_blank", "height=" + this.get("WindowHeight") + ",width=" + 								this.get("WindowWidth"));
                        return false;
                }
        	}
		},
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "remove",
				"name": "DataGrid",
			},
 
			{
				"operation": "insert",
				"name": "PsgDataGrid",
				"parentName": "Detail",
				"propertyName": "items",
				"index": 0,
				"values": {
					"itemType": Terrasoft.ViewItemType.GRID,
					"listedZebra": true,
					"collection": {"bindTo": "Collection"},
					"activeRow": {"bindTo": "ActiveRow"},
					"primaryColumnName": "Id",
					"isEmpty": {"bindTo": "IsGridEmpty"},
					"isLoading": {"bindTo": "IsGridLoading"},
					"multiSelect": {"bindTo": "MultiSelect"},
					"selectedRows": {"bindTo": "SelectedRows"},
					"sortColumn": {"bindTo": "sortColumn"},
					"sortColumnDirection": {"bindTo": "GridSortDirection"},
					"sortColumnIndex": {"bindTo": "SortColumnIndex"},
					"linkClick": {"bindTo": "linkClicked"},
					"type": "listed",
					"useListedLookupImages": true,
					"visible": {
						"bindTo": "isImageManagerDetailView",
						"bindConfig": {"converter": "getDataGridVisible"}
					},
					"listedConfig": {
						"name": "DataGridListedConfig",
						"items": [
							{
								"name": "NameListedGridColumn",
								"bindTo": "Name",
								"position": {
									"column": 0,
									"colSpan": 4
								},
 
							},
							{
								"name": "VersionListedGridColumn",
								"bindTo": "Version",
								"position": {
									"column": 5,
									"colSpan": 2
								}
							},
							{
								"name": "CurrentStorage",
								"bindTo": "CurrentStorage",
								"position": {
									"column": 7,
									"colSpan": 6
								},
								"caption": Resources.localizableStrings.CurrentStorageColumnCaption,
 
							},
 
							{
								"name": "ShareLink",
								"bindTo": "ShareLink",
								"position": {
									"column": 13,
									"colSpan": 11
								},
								"caption": Resources.localizableStrings.Link,
								"values":
								{
											"showValueAsLink": "true",
											//"enabled" : true,
											"href": {
											"bindTo": "Link",
											"bindConfig": {"converter": "getLink"},
											},
 
											"controlconfig": {
												"className": "Terrasoft.TextEdit",
												"linkclick": { bindTo: "onShareLinkClick"},
 
										},
										"viewType":"url"
									}
 
							}
						]
					},
					"tiledConfig": {
						"name": "DataGridTiledConfig",
						"grid": {
							"columns": 24,
							"rows": 3
						},
						"items": [
 
						]
					},
					"linkClick": {"bindTo": "linkClicked"}
				}
			},
 
			{
					"operation": "insert",
					"parentName": "Header",
					"propertyName": "items",
					"name": "Name",
					"values": {
						"generator": "HtmlControlGeneratorV2.generateHtmlControl",
						"htmlContent": {
							"bindTo": "Name"
						},
						"classes": {
							"wrapClass": ["t-label"]
						}
					}
				},
			{
				"operation": "insert",
				"name": "AddToCloudButton",
				"parentName": "Detail",
				"propertyName": "tools",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"tag": "addFileButton",
					"fileUpload": true,
					"filesSelected": {"bindTo": "onFileSelect"},
					"click": {"bindTo": "onAddFileClick"},
					"visible": {"bindTo": "getAddToCloudButtonVisible"},
					"imageConfig": {"bindTo": "Resources.Images.AddToCloudButtonImage"},
					 "hint": { "bindTo": "Resources.Strings.AddToCloudToolTip" } ,
				}
			},
			{
				"operation": "merge",
				"name": "AddRecordButton",
				"parentName": "Detail",
				"propertyName": "tools",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"tag": "addFileButton",
					"fileUpload": true,
					"filesSelected": {"bindTo": "onFileSelect"},
					"click": {"bindTo": "onAddFileClick"},
					"visible": {"bindTo": "getAddRecordButtonVisible"},
					"imageConfig": {"bindTo": "Resources.Images.AddButtonImage"}
				}
			},
			{
				"operation": "insert",
				"name": "UploadToSPRetry",
				"parentName": "Detail",
				"propertyName": "tools",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"click": {"bindTo": "uploadToSPRetry"},
					"visible": {"bindTo": "uploadToSPRetryButtonVisible"},
					"caption": Resources.localizableStrings.UploadToSPRetryButtonCaption
				}
			},
 
 
			]
		/**SCHEMA_DIFF*/
	};
});

for you to look at. Please let me know your suggestions.

Shivani Lakshman,

With the same issue on my end.

Federico Buffa 😀,

 

The column that I wanted to hyperlink was from another table. The solution that was provided is as follows

Please try with the specific column that you want to hyperlink with the following method
addColumnLink: function(item, column) {
                const columnPath = column.columnPath;
                if (columnPath ==="[PsgFileLink:PsgFileId].PsgShareableLink") {
                    column.columnPath = "ShareLink";
                    this.callParent(arguments);
                } else {
                    this.callParent(arguments);
                }
            },

Show all comments