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.

Like 1

Like

9 comments
Best reply

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

 

&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.

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? 

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.

 

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

 

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.

Oleg Drobina writes:

i <

Thank you. For some reason, it complained about "i &lt;" 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.

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

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

 

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

 

&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.

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.

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

 

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. 

Oleg Drobina,

You are great. Everything worked out.

Show all comments

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! 

Like 1

Like

0 comments
Show all comments

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

Like 0

Like

2 comments

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.

Bogdan,

Thank you, We are currently on 8.1.1.3635.

I will plan an update.

Show all comments

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

Like 0

Like

4 comments

Hello,



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

@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)

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.

Bogdan,

 

Thank you.

Is there any development tips? :)

Show all comments

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ć

Like 0

Like

1 comments
Best reply

Hello,



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

Hello,



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

Show all comments

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 =(
Like 0

Like

1 comments

Hello,

 

This is something similar to the discussion here https://community.creatio.com/questions/filtering-lookup-freedom-ui-hel…

 

What should be done:

 

1) The same filter built using the dashboard filtration

2) Use the filter part that will be autogenerated in the schema and add it to the LoadDataRequest request handler

Show all comments

Hello all,

 

Is there a way to add an Iframe to a Freedom UI page? I found the documentation here that details how to add one but it only seems to describe how to add to a Classic UI page.

Like 0

Like

1 comments

Hi,

 

We have a situation where we work with a partner on our support service and therefore when we add their email address to our case we generate a circular communication that keeps both our cases open. The following is the workflow:

  1. Open case
  2. Add our partners support@ email address to case, so all three parties see communications
  3. Case resolved
    1. Partner service desk platform closes the case
    2. Our platform (Creatio) sends an email asking for feedback on the case to both the case contact (customer) AND the partner
  4. This causes the partners system to automatically reopen the case on their end

How can we at step 3.2 prevent the partner email being sent?

thanks

 

Mark

Like 0

Like

1 comments

Hello,

 

Thank you for your question! 

With the basic tools of the application, it is impossible to filter to whom exactly to send an email with a request to evaluate the work. However, you can achieve this by customizing the basic process of sending a feedback request to a contact in a case (Reevaluate case level request process).

Show all comments

Hello,

 

 

Please let us know if there is any documentation that can help us create a radio button on Freedom UI

 

Thank you,

-Georges

 

Like 1

Like

2 comments
Best reply

Hello!



As a workaround, you can use the Checkbox fields:https://academy.creatio.com/docs/8.x/no-code-customization/customizatio…

Hello!



As a workaround, you can use the Checkbox fields:https://academy.creatio.com/docs/8.x/no-code-customization/customizatio…

Hello,

 

Thank you for your support.

 

Thank you,

-Georges

Show all comments

Hello,

 

Please we need the method of how we can create a custom handler on button click to create a loader after some actions are completed for example:

we have a button to trigger a business process, save the record, and show a message but the message takes a lot of time to show so we need to create a loader until the message shows, please let us know how we can do this.

 

Thank you,

-Georges

Like 0

Like

1 comments

I'm not sure that I understood your needs. 

I haven't tested it, but I believe that something like this would work.

define("UsrYour_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/,
	function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
	return {
		viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
			{
				"operation": "insert",
				"name": "YourButton",
				"values": {
					"type": "crt.Button",
					"caption": "Your button caption",
					"color": "accent",
					"size": "large",
					"iconPosition": "only-text",
					"visible": true,
					"clicked": {
						"request": "usr.YourCustomRequest"
					},
					"clickMode": "default"
				},
				"parentName": "ActionButtonsContainer",
				"propertyName": "items",
				"index": 0
			}
		]/**SCHEMA_VIEW_CONFIG_DIFF*/,
		viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{}/**SCHEMA_VIEW_MODEL_CONFIG*/,
		modelConfig: /**SCHEMA_MODEL_CONFIG*/{}/**SCHEMA_MODEL_CONFIG*/,
		handlers: /**SCHEMA_HANDLERS*/[
			{
				request: "usr.YourCustomRequest",
				handler: async (request, next) =&gt; {
					request.$context.maskService.showBodyMask();
					await //your logic
					request.$context.maskService.hideBodyMask();
					return next?.handle(request);
				}
			}
		]/**SCHEMA_HANDLERS*/,
		converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
		validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
	};
});

 

Show all comments