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
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?
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.
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);
}
},