Service_Creatio | Community Creatio

17:07 May 31, 2024

Hello. In a section page, I need to make the case number font bold, but according to a specific field value. I tried to do it based on several articles (https://community.creatio.com/questions/how-add-custom-style-control-pa… https://community.creatio.com/questions/bigger-font-name-list-record-di…).

But I'm running out of ideas. I would be grateful for your help!

Something like this, but only for case number text.

9 comments

Best reply

16:04 Jun 04, 2024

Сергій Сермакшев,

&lt is the html code for < symbol, it's a "feature" of the code editor here in the Community:)

As for ModifierType

We have access to items that will be displayed in the grid and their position will be the same as in the response.collection.collection.items. You can pass response to the performStylesChange method and process it there as well and perform the check for the needed ModifierType and change styles only for those records.

Something like:

define("CaseSection", [], function() {
	return {
		entitySchemaName: "Case",
		messages: {},
		attributes: {},
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		methods: {
			onGridDataLoaded: function(response) {
				this.callParent(arguments);
				this.performStylesChange(response);
			},
 
			performStylesChange: function(response) {
				var processedItemsIndexes = this.checkResponseCollection(response);
				var recordTitles = document.getElementsByClassName("grid-primary-column");
				for (var i = 0; i &lt; recordTitles.length; i++) {
					for (var j = 0; j &lt; processedItemsIndexes.length; j++) {
						if (processedItemsIndexes[j] == i) {
							var element = recordTitles[i];
							element.style.fontWeight = 'bold';
						}
					}
				}
			},
 
			checkResponseCollection: function(response) {
				var responseItems = response.collection.getItems();
				var processItemsIndexes = [];
				for (var i = 0; i &lt; responseItems.length; i++) {
					if (responseItems[i].values.Status.displayValue == "New") {
						processItemsIndexes.push(i);
					}
				}
				return processItemsIndexes;
			}
		}
	};
});

Here I marked tickets in the New status in bold text:

So you can use the same approach in your task.

Anhelina

18:08 May 31, 2024

Hello Serhiy,

Could you please clarify which step exactly you have problems with?

Was it possible for you to make the text bold without conditions?

If so then how exactly do you add the specific field value?

09:14 Jun 02, 2024

Anhelina writes:

Hello Serhiy,

Could you please clarify which step exactly you have problems with?

Was it possible for you to make the text bold without conditions?

If so then how exactly do you add the specific field value?

Thank you for your interest. I have overridden 2 methods:

initQueryColumns: function(esq) {
	this.callParent(arguments);
 
	esq.addColumn("ModifiedBy.Type.Id", "ModifierType");
 
},
 
prepareResponseCollection: function(collection) {
	this.callParent(arguments);
	// Аor each record returned in the query for the list 		
	// check the Amount field value and then apply style
	collection.each(function(item) {
		if (item.get("ModifierType") == "00783ef6-f36b-1410-a883-16d83cab0980") {
			item.customStyle = Ext.apply(item.customStyle || {}, {
				"background-color": "#FFFFCC",
				"font-weight": "bold"
	        });
		}
	}, this);
}

I understand that I need to change this part of the code:

item.customStyle = Ext.apply(item.customStyle || {}, {
	"background-color": "#FFFFCC",
	"font-weight": "bold"
}

It must be something like this:

.title {
	"background-color": "#FFFFCC",
	"font-weight": "bold"
}

But I have no idea how to apply the style to a specific entry element in the list.

12:31 Jun 04, 2024

Сергій Сермакшев,

Hello,

Try another approach:

define("CaseSection", [], function() {
	return {
		entitySchemaName: "Case",
		messages: {},
		attributes: {},
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		methods: {
			onGridDataLoaded: function(response) {
				this.callParent(arguments);
				this.performStylesChange();
			},
 
			performStylesChange: function() {
				var recordTitles = document.getElementsByClassName("grid-primary-column");
				for (var i = 0; i &lt; recordTitles.length; i++) {
					var element = recordTitles[i];
					element.style.fontWeight = 'bold';
				}
			}
		}
	};
});

The logic here is simple: once grid data is loaded we go through all elements on the page and change the style for the text to bold to all title columns (which is a case number). This is not the best solution, but it works properly when the list is loaded or sorting\filtering is changed in the list.

13:00 Jun 04, 2024

Oleg Drobina writes:

i <

Thank you. For some reason, it complained about "i <" had to delete. Everything worked.

But how to implement this part of the logic?

if (item.get("ModifierType") == "00783ef6-f36b-1410-a883-16d83cab0980")

It is necessary to highlight only those records where some field matches a specific record in the directory.

Andrii Orlenko

15:14 Jun 04, 2024

Сергій Сермакшев,

Hello. Here is an example. It uses jQuery, but you may easily adapt it to Oleg's example. Main idea is that items[i] is viewModel coresponding to recordTitles[i] DOM element from Oleg's example.

applyCustomCss: function(){
	var gridData = this.getGridData();
	var items = gridData.getItems();
	var uiItems = $("div[column-name='ColorByProductType']");
 
 
	for (var i = 0; i &lt; items.length; i++){
		var height = $(uiItems[0]).css("height");
		var bgColor;
		var category = items[i].get("Product.SxGoodsCategory").value;
		if (category === SxProductConstants.GoodsCategory.Wine){
			var wineColor = items[i].get("Product.SxColor").value;
			if (wineColor === SxProductConstants.WineColor.Red){
				bgColor = "#cc0a0a";
			}
			else if (wineColor === SxProductConstants.WineColor.White){
				bgColor = "gold";
			}
			else if (wineColor === SxProductConstants.WineColor.Pink){
				bgColor = "pink";
			}
		}
		else if (category === SxProductConstants.GoodsCategory.Champagne){
			bgColor = "bisque";
		}
		else if (category === SxProductConstants.GoodsCategory.StrongAlcoholDrink){
			bgColor = "saddlebrown";
		}
		else if (category === SxProductConstants.GoodsCategory.Water){
			bgColor = "blue";
		}
		$(uiItems[i]).css(
			{"background-color": bgColor, 
			"border-radius": "50%",
			"vertical-align:": "middle",
			"margin-top": "7px",
			"margin-right": "2px",
			"width": height});
	}
},

And instead of oveeriding initQueryColumns method it is better to override getGridDataColumns

                getGridDataColumns: function () {
                   var baseGridDataColumns = this.callParent(arguments);
                   var gridDataColumns = {
                       "ModifiedBy.Type.Id": {path: "ModifiedBy.Type.Id"}
                   };
                   return Ext.apply(baseGridDataColumns, gridDataColumns);
               },

16:04 Jun 04, 2024

Сергій Сермакшев,

&lt is the html code for < symbol, it's a "feature" of the code editor here in the Community:)

As for ModifierType

Something like:

define("CaseSection", [], function() {
	return {
		entitySchemaName: "Case",
		messages: {},
		attributes: {},
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		methods: {
			onGridDataLoaded: function(response) {
				this.callParent(arguments);
				this.performStylesChange(response);
			},
 
			performStylesChange: function(response) {
				var processedItemsIndexes = this.checkResponseCollection(response);
				var recordTitles = document.getElementsByClassName("grid-primary-column");
				for (var i = 0; i &lt; recordTitles.length; i++) {
					for (var j = 0; j &lt; processedItemsIndexes.length; j++) {
						if (processedItemsIndexes[j] == i) {
							var element = recordTitles[i];
							element.style.fontWeight = 'bold';
						}
					}
				}
			},
 
			checkResponseCollection: function(response) {
				var responseItems = response.collection.getItems();
				var processItemsIndexes = [];
				for (var i = 0; i &lt; responseItems.length; i++) {
					if (responseItems[i].values.Status.displayValue == "New") {
						processItemsIndexes.push(i);
					}
				}
				return processItemsIndexes;
			}
		}
	};
});

Here I marked tickets in the New status in bold text:

So you can use the same approach in your task.

15:00 Jun 05, 2024

Oleg Drobina,

Thank you very much. With your help to solve this problem. It also gave me some insight into working with section entries via JavaScript.
Also, if you don't mind, tell me how to compare the "Contact Type" lookup value in the : "ModifiedBy" field. Something like "ModifiedBy.Type.Id". Thank you again.

11:42 Jun 06, 2024

Сергій Сермакшев,

You are welcome!

As for ModifiedBy.Type - the easiest way is to display this column in the section list.

Alternatively you can add the initQueryColumns method override to the section methods in the following manner:

initQueryColumns: function(esq) {
				this.callParent(arguments);
				esq.addColumn("Owner.Type", "OwnerType");
			},

What I did here is add the Owner.Type column in the Cases section esq (Case has an Assignee (which is the Owner column that references the Contact entity) and I need to check the contact type specified in this column). As a result

we have access to this OwnerType in the context of the onGridDataLoaded and performStylesChange execution. We can also use it for style recalculation. In your case it should be similar but using another column.

17:10 Jun 06, 2024

Oleg Drobina,

You are great. Everything worked out.

Show all comments

Question

Anyone have a Support Instance fully setup and customized that they would like to share?

7.11

Juston Jones

01:41 May 07, 2024

I'm struggling to find the best way to make Creatio Support more tech-friendly like our previous provider.

Our Consultant has done an amazing job, but I am pretty handy and can do a lot on my own. Just looking for inspiration!

Happy to share what we've done thus far as well!

0 comments

Show all comments

Question

Attachments in Cases for agents

8.0

Paulo Victor Figorelli

22:39 Apr 15, 2024

Hi, I was testing the case section and could not see attachements while logged in as a service agent, but when I tried as an admin I could see it.

Any idea about what I should change in order to make it available to my agents?

Best Regards

File attachments

Captura de tela 2024-04-15 163717.png

2 comments

Bogdan

11:53 Apr 16, 2024

Hello,

The issue is already fixed in version 8.1.2, so we recommend to update your application.

If you require the fix for 8.1.1 please contact support team on this matter.

Paulo Victor Figorelli

14:01 Apr 16, 2024

Bogdan,

Thank you, We are currently on 8.1.1.3635.

I will plan an update.

Show all comments

Question

Communication problems Service Creatio App - Self Service Portal

8.0

Filter component on a page

Joseph D

15:26 Apr 11, 2024

Hello everyone!

I'm wondering is there any chance to add a filter component to entity page?

And configure filter to dynamic entity schema, which is selected via combobox

Thank you

4 comments

Bogdan

10:13 Apr 15, 2024

Hello,

If I understand your business task correct, you can set up the filter for the list component itself:

Joseph D

13:23 Apr 15, 2024

@Bogdan

Thank you for you reply

But unfortunately we need to dynamically set up filter.

Case:

1. User opens our card (like setting entity)

2. User configures a filter to search for records to apply some logic (like conditions to execute some server-side logic)

Bogdan

15:59 Apr 15, 2024

Joseph D,

Thank you for clarifying. We don't have such ready examples of implementing your business task.

It could be achieved only through additional development.

Joseph D

16:09 Apr 15, 2024

Bogdan,

Thank you.

Is there any development tips? :)

Show all comments

Question

Mislav Rozić

10:12 Apr 04, 2024

Hello,

We are having issues establishing communication via Self Service Portal.

- Messages posted by a customer via Self Service Portal are not visible to agents via Service Creatio app.

- also vice versa, messages posted by agents are not visible to the customer on the Self Service Portal

- Customer can upload an attachment file on the portal, but it system shows it as uploaded by "Supervisor" (this is the only type of message that is visible on both sides)

We are using the demo environment and the issue persists on Classic UI.

Version: 8.0.10.4735

Did anybody else encounter such problems, is there a known solution or a workaround?

Thanks in advance and best regards,

Mislav Rozić

1 comments

Best reply

Bogdan

11:26 Apr 09, 2024

Hello,

We already have a support case on this matter. The solution has been already provided.

Bogdan

11:26 Apr 09, 2024

Hello,

We already have a support case on this matter. The solution has been already provided.

Show all comments

Question

Filtering the field Contact by [ContactCareer:Contact].Account

8.0

Віталій Поліщук

21:10 Apr 02, 2024

Hello. In the old interface, we had a filter that filtered the Contact field by the Contact's Career field. Accordingly, when the Account field is filled in, the system will display in the contact directory only those who have this Account in the Career. Here is the code:

"Contact": {

"FiltrationContactByAccount": {

"ruleType": BusinessRuleModule.enums.RuleType.FILTRATION,

"autocomplete": true,

"autoClean": true,

"baseAttributePatch": "[ContactCareer:Contact].Account",

"comparisonType": Terrasoft.ComparisonType.EQUAL,

"type": BusinessRuleModule.enums.ValueType.ATTRIBUTE,

"attribute": "Account"

I am currently trying to recreate this filtering in Freedom UI in a test application. Has anyone already implemented such functionality?

Here is the code for the test application:

define("UsrTestAPP_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {

   return {

       viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[

           {

               "operation": "merge",

               "name": "Feed",

               "values": {

                   "dataSourceName": "PDS",

                   "entitySchemaName": "UsrTestAPP"

               }

           },

           {

               "operation": "merge",

               "name": "AttachmentList",

               "values": {

                   "columns": [

                       {

                           "id": "5eaa61fa-469c-4905-9f83-b058775049e5",

                           "code": "AttachmentListDS_Name",

                           "caption": "#ResourceString(AttachmentListDS_Name)#",

                           "dataValueType": 28,

                           "width": 200

                       }

                   ]

               }

           },

           {

               "operation": "insert",

               "name": "UsrName",

               "values": {

                   "layoutConfig": {

                       "column": 1,

                       "row": 1,

                       "colSpan": 1,

                       "rowSpan": 1

                   },

                   "type": "crt.Input",

                   "label": "$Resources.Strings.UsrName",

                   "control": "$UsrName",

                   "labelPosition": "auto"

               },

               "parentName": "SideAreaProfileContainer",

               "propertyName": "items",

               "index": 0

           },

           {

               "operation": "insert",

               "name": "ComboBox_yee7dcu",

               "values": {

                   "layoutConfig": {

                       "column": 1,

                       "row": 2,

                       "colSpan": 1,

                       "rowSpan": 1

                   },

                   "type": "crt.ComboBox",

                   "label": "$Resources.Strings.PDS_UsrColumn3_r9ta6ih",

                   "labelPosition": "auto",

                   "control": "$PDS_UsrColumn3_r9ta6ih",

                   "listActions": [],

                   "showValueAsLink": true,

                   "controlActions": []

               },

               "parentName": "SideAreaProfileContainer",

               "propertyName": "items",

               "index": 1

           },

           {

               "operation": "insert",

               "name": "addRecord_wpani58",

               "values": {

                   "code": "addRecord",

                   "type": "crt.ComboboxSearchTextAction",

                   "icon": "combobox-add-new",

                   "caption": "#ResourceString(addRecord_wpani58_caption)#",

                   "clicked": {

                       "request": "crt.CreateRecordFromLookupRequest",

                       "params": {}

                   }

               },

               "parentName": "ComboBox_yee7dcu",

               "propertyName": "listActions",

               "index": 0

           },

           {

               "operation": "insert",

               "name": "ComboBox_sg63k40",

               "values": {

                   "layoutConfig": {

                       "column": 1,

                       "row": 3,

                       "colSpan": 1,

                       "rowSpan": 1

                   },

                   "type": "crt.ComboBox",

                   "label": "$Resources.Strings.PDS_UsrColumn2_05dsooo",

                   "labelPosition": "auto",

                   "control": "$PDS_UsrColumn2_05dsooo",

                   "listActions": [],

                   "showValueAsLink": true,

                   "controlActions": []

               },

               "parentName": "SideAreaProfileContainer",

               "propertyName": "items",

               "index": 2

           },

           {

               "operation": "insert",

               "name": "addRecord_j2jwfn4",

               "values": {

                   "code": "addRecord",

                   "type": "crt.ComboboxSearchTextAction",

                   "icon": "combobox-add-new",

                   "caption": "#ResourceString(addRecord_j2jwfn4_caption)#",

                   "clicked": {

                       "request": "crt.CreateRecordFromLookupRequest",

                       "params": {}

                   }

               },

               "parentName": "ComboBox_sg63k40",

               "propertyName": "listActions",

               "index": 0

           }

       ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

       viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[

           {

               "operation": "merge",

               "path": [

                   "attributes"

               ],

               "values": {

                   "UsrName": {

                       "modelConfig": {

                           "path": "PDS.UsrName"

                       }

                   },

                   "PDS_UsrColumn2_05dsooo": {

                       "modelConfig": {

                           "path": "PDS.UsrTestContact"

                       }

                   },

                   "PDS_UsrColumn3_r9ta6ih": {

                       "modelConfig": {

                           "path": "PDS.UsrTestAccount"

                       }

                   }

               }

           },

           {

               "operation": "merge",

               "path": [

                   "attributes",

                   "Id",

                   "modelConfig"

               ],

               "values": {

                   "path": "PDS.Id"

               }

           },



       ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

       modelConfigDiff: /**SCHEMA_MODEL_CONFIG_DIFF*/[

           {

               "operation": "merge",

               "path": [],

               "values": {

                   "primaryDataSourceName": "PDS"

               }

           },

           {

               "operation": "merge",

               "path": [

                   "dataSources"

               ],

               "values": {

                   "PDS": {

                       "type": "crt.EntityDataSource",

                       "config": {

                           "entitySchemaName": "UsrTestAPP"

                       },

                       "scope": "page"

                   }

               }

           }

       ]/**SCHEMA_MODEL_CONFIG_DIFF*/,

handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,

       converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,

       validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/

   };

});

I apologize right away if I phrased the question incorrectly, I'm not a programmer =(

1 comments