Question

Hyperlink on mini page and synchronising field with detail

16:36 Jan 13, 2022

Hi community,

How do you make a link (string field) a hyperlink in a mini-page? It is displayed as a label (https://academy.creatio.com/api/jscoreapi/7.15.0/index.html#!/api/Terra…) but there is no "showValueAsLink" property like in a text field in a page.

And how can I create a field that has the same behaviour as the email field in the default contact page? I have a "linkedin" field that I need to sync with the communication option (which has a linkedin field added under "website") and I need to sync it with the same behaviour as the email field (which takes the main email in the communication option, automatically adds a new email or updates it etc.).

Best regards,

Julien

7 comments

Oleg Drobina

16:13 Jan 14, 2022

Hi Julien,

As for your first question - it's not clear which string-link field on the mini page you are refering to. I hope this community post where a similar question was asked will be useful - https://community.creatio.com/questions/convert-text-field-hyperlink.

As for your second question - the logic behind the email column is stored in the BaseCommunication and ContactCommunication objects in the Base package (processes on these objects). You need to study how the logic is declared there.

Best regards,

Oscar

Julien Gunther

11:03 Jan 17, 2022

Oscar Dylan,

Thank you for your answer, about my first question I mean a mini page that shows when you hover on a record :

I need to change a field that shows on the minipage to a link (with target _blank). On a page directly I can use a "ShowAsLink" attribute, but the component on a minipage that shows a text field is a label, which don't have a "ShowAsLink" attribute.

Thank you for your answer on the second question, I'll dig into the Base Package.

Best regards,

Julien Gunther

Oleg Drobina

11:10 Jan 17, 2022

Julien Gunther,

This minipage is a "view" type minipage for the section that is used as a lookup reference. So you need to create the same logic described in the community post I shared above for the field on that minipage.

Best regards,

Oscar

Julien Gunther

11:27 Jan 17, 2022

Oscar Dylan,

The text field is rendered as a label, and it throw me this error :

Uncaught Object { message: "Property showValueAsLink is not defined in class Terrasoft.controls.Label" }

here is my diff :

			{
				"operation": "insert",
				"name": "Linkedin889ba056-f389-4852-a0f2-b5f8caede729",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 10,
						"layoutName": "MiniPage"
					},
					"isMiniPageModelItem": true,
					"visible": {
						"bindTo": "isViewMode"
					},
					"bindTo": "Linkedin",
					"showValueAsLink": true,
					"controlConfig": {
						"enabled": true,
						"href": {
							"bindTo": "getLinkedin"
						},
						"linkclick": {
							"bindTo": "onExternalLinkClick"
						}
					}
				},
				"parentName": "MiniPage",
				"propertyName": "items",
				"index": 13
			},

and the methods :

		methods: {
			getLinkedin: function() {
				return this.getLink(this.get("Linkedin"));
			},
			onExternalLinkClick: function() {
				return;
			},
			getLink: function(value) {
				if (Terrasoft.isUrl(value)) {
					return {
						url: value,
						caption: value
					}
				}
			}
		},

Best regards,

Julien Gunther

Oleg Drobina

14:53 Jan 17, 2022

Julien Gunther,

Ok, we can do it in another way. We can create a virtual column, populate it with the value from the main record and display it not as a label in the minipage, but as a string field. For example using the code below (was added to the ContactMiniPage in my case):

define("ContactMiniPage", [], function() {
	return {
		entitySchemaName: "Contact",
		attributes: {
			"LinkedIn": {
				"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
				"value": ""
			}
		},
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
		methods: {
			onEntityInitialized: function() {
				this.callParent(arguments);
				var linkedInValue = this.get("UsrLinkedIn");
				this.set("LinkedIn", linkedInValue);
			},
			getLinkedInLink: function() {
				return this.getLink(this.get("LinkedIn"));
			},
			getLink: function(value) {
				if (Terrasoft.isUrl(value)) {
					return {
						url: value,
						caption: value
					};
				}
			},
			onLinkedInLinkClick: function() {
				return;
			},
		},
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"name": "LinkedIn",
				"values": {
					"showValueAsLink": true,
					"controlConfig": {
						"href": {
							"bindTo": "getLinkedInLink"
						},
						"linkclick": {
							"bindTo": "onLinkedInLinkClick"
						}
					},
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 11
					},
					"caption": {
						"bindTo": "Resources.Strings.LinkedIn"
					},
					"bindTo": "LinkedIn",
				},
				"parentName": "MiniPage",
				"propertyName": "items",
				"index": 5
			},
			{
				"operation": "merge",
				"name": "HeaderContainer",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 0
					}
				}
			},
			{
				"operation": "merge",
				"name": "TimezoneMiniContactPage",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 9
					}
				}
			},
			{
				"operation": "merge",
				"name": "JobInfoContainer",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 10
					}
				}
			},
			{
				"operation": "move",
				"name": "JobInfoContainer",
				"parentName": "MiniPage",
				"propertyName": "items",
				"index": 2
			},
			{
				"operation": "merge",
				"name": "Name",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 1
					}
				}
			},
			{
				"operation": "merge",
				"name": "Type",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 2
					}
				}
			},
			{
				"operation": "merge",
				"name": "Account",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 3
					}
				}
			},
			{
				"operation": "merge",
				"name": "JobTitle",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 4
					}
				}
			},
			{
				"operation": "merge",
				"name": "Department",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 5
					}
				}
			},
			{
				"operation": "merge",
				"name": "MobilePhone",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 6
					}
				}
			},
			{
				"operation": "merge",
				"name": "Email",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 7
					}
				}
			},
			{
				"operation": "remove",
				"name": "OwnerEdit"
			},
			{
				"operation": "remove",
				"name": "Owner"
			},
			{
				"operation": "remove",
				"name": "OwnerButtonContainer"
			},
			{
				"operation": "remove",
				"name": "OwnerCallButton"
			},
			{
				"operation": "remove",
				"name": "OwnerEmailButton"
			}
		]/**SCHEMA_DIFF*/
	};
});

As a result I received a clickable linkedin field in the view-minipage:

Hope it will work in your case as well.

Best regards,

Oscar

Julien Gunther

12:14 Jan 19, 2022

Oscar Dylan,

I still have the same error :

Uncaught Object { message: "Propriété showValueAsLink is not defined in class Terrasoft.controls.Label" }

Here is my code :

define("MTF_Candidat1MiniPage", [], function() {
	return {
		entitySchemaName: "MTF_Candidat",
		attributes: {
			"LinkedinVirtual": {
				"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
				"value": ""
			}
		},
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
		methods: {
			onEntityInitialized: function() {
				this.callParent(arguments);
				this.set("LinkedinVirtual", this.get("UsrLinkedin"))
			},
			getLinkedinLink: function() {
				return this.getLink(this.get("LinkedinVirtual"));
			},
			onExternalLinkClick: function() {
				return;
			},
			getLink: function(value) {
				if (Terrasoft.isUrl(value)) {
					return {
						url: value,
						caption: value
					}
				}
			}
		},
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
		diff: /**SCHEMA_DIFF*/[
			// other items in diff ....
			{
				"operation": "insert",
				"name": "Linkedin889ba056-f389-4852-a0f2-b5f8caede729",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 10,
						"layoutName": "MiniPage"
					},
					"caption": "Linkedin",
					"isMiniPageModelItem": true,
					"bindTo": "LinkedinVirtual",
					"showValueAsLink": true,
					"controlConfig": {
						"href": {
							"bindTo": "getLinkedinLink"
						},
						"linkclick": {
							"bindTo": "onExternalLinkClick"
						}
					}
				},
				"parentName": "MiniPage",
				"propertyName": "items",
				"index": 39
			}
		]/**SCHEMA_DIFF*/
	};
});

"isMiniPageModelItem" is a required attribute, if set to false or removed it raise this error:

Uncaught Object { message: "DataValueType.null is not supported" }

Do you have another solution ?

Best regards,

Julien

Oleg Drobina

11:51 Jan 21, 2022

Julien Gunther,

Your error comes from some place that is not present in the code I shared. Everything is working on my end, please perform an absolutely same setup.

Best regards,

Oscar

Show all comments