Hello,

I'm trying to add a button to contact page details (Contacts_FormPage), I'm currently using Creatio on cloud version 8.1.3.6734 with Freedom UI
I followed these steps:

  1. Navigated to Settings > Advanced Settings
  2. Created a new package, and added ProductCore dependency
  3. Created a Replacing view model with the code name ContactPageV2
  4. Added the code:
  5. define("ContactPageV2", [], function() {
       console.log("ContactPageV2 module loaded");
       return {
           methods: {
               onGenerateLinkClick: function() {
                   console.log("Generate Link button clicked");
               }
           },
           diff: [
               {
                   "operation": "insert",
                   "name": "GenerateLinkButton",
                   "parentName": "ActionButtonsContainer",
                   "propertyName": "items",
                   "values": {
                       "itemType": Terrasoft.ViewItemType.BUTTON,
                       "caption": "Generate Link",
                       "click": {"bindTo": "onGenerateLinkClick"}
                   }
               }
           ]
       };
    });
  6. After saving, I compiled the package
  7. Emptied the cache of the browser, but nothing is showing not even the console log "ContactPageV2 module loaded"

 

Please help as I'm not sure what I'm doing wrong or what steps am I missing (I'm a newbie to this platform).
Thank you in advance.

Like 0

Like

2 comments
Best reply

Creatio has two types of pages, Freedom UI pages and classic pages. They are completely separate/different pages. The ContactPageV2 is the classic page, not the Freedom UI page which is Contacts_FormPage

To add the button that executes your code on the Freedom UI page:

  1. Go to the contact page, click the small gear on the top right corner of the page to edit
  2. Save it to make a copy in your package (see the Side Note at end of article here to force the save to go into your package, if needed)
  3. Add a button to the page where you want it
  4. Open the code for the page (clicking one of the icons at the top right of the page designer)
  5. Add the request handler for the button (the code that will execute when clicked) following steps here: https://customerfx.com/article/adding-a-button-to-execute-custom-code-o…

Ryan

Creatio has two types of pages, Freedom UI pages and classic pages. They are completely separate/different pages. The ContactPageV2 is the classic page, not the Freedom UI page which is Contacts_FormPage

To add the button that executes your code on the Freedom UI page:

  1. Go to the contact page, click the small gear on the top right corner of the page to edit
  2. Save it to make a copy in your package (see the Side Note at end of article here to force the save to go into your package, if needed)
  3. Add a button to the page where you want it
  4. Open the code for the page (clicking one of the icons at the top right of the page designer)
  5. Add the request handler for the button (the code that will execute when clicked) following steps here: https://customerfx.com/article/adding-a-button-to-execute-custom-code-o…

Ryan

Thank you! 
I was able to add it following your explanation. 
And yes I need to add it to my custom package since I'm trying to create a connector that can be used by anyone later on.
That was very insightful, thanks again!

Show all comments

Hi community,

 

I try to display (or not) an element based on information found on the contact page of the connected user. I tried with a business rule but I only can choose the user connected and not its related objects and their attributes.

 

So I tried something like that in the methods :

		methods: {
			init: function() {
				this.callParent(arguments);
				this.mixins.MultiChoiceMixin.init.call(this, arguments);
				// console.log(this.checkIfInHR());
				},
			/** 
			* Check if connected user is in HR department
			* @param  {string} departmentId  The contact's department Id
			* @param  {string} contactTypeId The contact's type Id
			* @return {bool} 			true if user is in HR department, otherwise false
			*/
			checkIfInHR: function(departmentId = "", contactTypeId = ""){
 
				// if called without args, query connected contact
				if (departmentId == "" && contactTypeId == ""){
					var esq = Ext.create("Terrasoft.EntitySchemaQuery", {rootSchemaName: "Contact"});
 
					// query the contact's department and contact's type
					esq.addColumn("Department");
					esq.addColumn("Type");
 
					// Execute the query 
					esq.getEntity(Terrasoft.SysValue.CURRENT_USER_CONTACT.value, function(res) {
						if (res.success){
							// call checkIfHR again but with args this time
							this.checkIfHR(res.entity.values.Department.value, res.entity.values.Type.value);
						}}, this);
				} else {
					// if args are passed
					// console.log() will be removed in prod
					console.log("departmentId : ", departmentId);
					console.log("contactTypeId : ", contactTypeId);
					console.log("response : ", departmentId == "ca611978-6277-4576-8a96-22ae54fe4d79" && contactTypeId == "60733efc-f36b-1410-a883-16d83cab0980");
					// 1st Id : HR department, 2nd Id: Our company
					return departmentId == "ca611978-6277-4576-8a96-22ae54fe4d79" && contactTypeId == "60733efc-f36b-1410-a883-16d83cab0980";
				}
			}
		}

Then I tried to call this method in the DIFF part :

			{
				"operation": "insert",
				"name": "Tab0f271a37TabLabel",
				"values": {
					"caption": {
						"bindTo": "Resources.Strings.Tab0f271a37TabLabelTabCaption"
					},
					"items": [],
					"order": 11
				},
				"parentName": "Tabs",
				"propertyName": "tabs",
				"index": 10,
				"enabled": this.checkIfInHR()
			},

but it always gives me this error now:

Uncaught TypeError: this.checkIfInHR is not a function

 

Do you have a better way to hide a tab based on values in the user connected' contact page or a way to fix my error ?

 

Best regards,

 

Julien G.

Like 0

Like

3 comments
Best reply

Hi Julien,

 

I cannot see the checkIfInHR method call on the init method execution, but I suppose you wanted to call it inside the "enabled" property of the Tab0f271a37TabLabel object. Ok, but the problem is that you need to use:

"enabled": {"bindTo": "checkIfInHR"},

and also the "enabled" property should be initialized inside the "values" object. So the code should've been:

onEntityInitialized: function() {
				this.callParent(arguments);
				this.mixins.MultiChoiceMixin.init.call(this, arguments);
				this.checkIfInHR();
				},
 
....
 
{
				"operation": "insert",
				"name": "Tab0f271a37TabLabel",
				"values": {
					"enabled": {"bindTo": "checkIfInHR"},
					"caption": {
						"bindTo": "Resources.Strings.Tab0f271a37TabLabelTabCaption"
					},
					"items": [],
					"order": 11
				},
				"parentName": "Tabs",
				"propertyName": "tabs",
				"index": 10
			},

The next problem is that this approach won't work since there is no "enabled" property for tab labels. So the general approach should be modified.

 

I would suggest using this check in the onEntityInitialized method:

onEntityInitialized: function() {
				this.callParent(arguments);
				this.mixins.MultiChoiceMixin.init.call(this, arguments);
				this.reformTabsCollection();
			},
			reformTabsCollection: function(){
				this.checkIfInHR();
				var tabsCollection = this.get("TabsCollection");
				if (this.get("BooleanAttribute")==false) {
                        tabsCollection.removeByKey("TheTabYouNeedToBeNotVisible");
                    }
			}

Also you need to create some bool attribute where the result of the checkIfInHR method will be written (using this.set("BooleanAttribute", true) or this.set("BooleanAttribute", false) at the end of the checkIfInHR method execution based on the checkIfInHR method results). There is no need to store the tab on the page in case it should be non clickable.

 

Best regards,

Oscar

Change it from this:

"enabled": this.checkIfInHR()

To this (and move inside of "values"):

"enabled": { "bindTo": "checkIfInHR" }

Ryan

Hi Julien,

 

I cannot see the checkIfInHR method call on the init method execution, but I suppose you wanted to call it inside the "enabled" property of the Tab0f271a37TabLabel object. Ok, but the problem is that you need to use:

"enabled": {"bindTo": "checkIfInHR"},

and also the "enabled" property should be initialized inside the "values" object. So the code should've been:

onEntityInitialized: function() {
				this.callParent(arguments);
				this.mixins.MultiChoiceMixin.init.call(this, arguments);
				this.checkIfInHR();
				},
 
....
 
{
				"operation": "insert",
				"name": "Tab0f271a37TabLabel",
				"values": {
					"enabled": {"bindTo": "checkIfInHR"},
					"caption": {
						"bindTo": "Resources.Strings.Tab0f271a37TabLabelTabCaption"
					},
					"items": [],
					"order": 11
				},
				"parentName": "Tabs",
				"propertyName": "tabs",
				"index": 10
			},

The next problem is that this approach won't work since there is no "enabled" property for tab labels. So the general approach should be modified.

 

I would suggest using this check in the onEntityInitialized method:

onEntityInitialized: function() {
				this.callParent(arguments);
				this.mixins.MultiChoiceMixin.init.call(this, arguments);
				this.reformTabsCollection();
			},
			reformTabsCollection: function(){
				this.checkIfInHR();
				var tabsCollection = this.get("TabsCollection");
				if (this.get("BooleanAttribute")==false) {
                        tabsCollection.removeByKey("TheTabYouNeedToBeNotVisible");
                    }
			}

Also you need to create some bool attribute where the result of the checkIfInHR method will be written (using this.set("BooleanAttribute", true) or this.set("BooleanAttribute", false) at the end of the checkIfInHR method execution based on the checkIfInHR method results). There is no need to store the tab on the page in case it should be non clickable.

 

Best regards,

Oscar

Oscar Dylan,

 Thank you very much !

 

Best regards,

 

Julien

Show all comments

Hi !

 

Is there any way to change the default value when someone makes a call from "incoming" to "outgoing"?

 

 

We almost always make outgoing calls and sometimes we forget to change that and we can't change it afterwards..

Like 0

Like

3 comments
Best reply

Hello Julien,

I have the steps to change this default to outgoing here: https://customerfx.com/article/setting-the-default-call-direction-to-ou…

Ryan

Hello Julien,

I have the steps to change this default to outgoing here: https://customerfx.com/article/setting-the-default-call-direction-to-ou…

Ryan

Hello Ryan, Thank you very much !

Dear Julien, 



It's also possible to change it in Creatio UI. 

In order to change, please follow to Advanced Settings, create a replacing module for Activity object and change the default value for Call Direction column in it to Incoming. 



Kind regards,

Roman

Show all comments

Hi all,

      I found the "ContactPageV2" use method "syncEntityWithCommunicationDetail" when changing value of any community option. So, how can I override that method in my "ContactPageV2"?

Thanks

Like 0

Like

2 comments

Hello Mai,

 

You need to simply override the basic method and put your logic in it. Here is the Creatio Academy article that will be useful.

 

Best regards,

Oscar

syncEntityWithCommunicationDetail : function(){

      this.callParent(arguments);

      YOUR CODE HERE;

}

Show all comments