Hi Community!

 

How can I bind the selected row of a list to a property in the ViewModel, or even how can I execute custom code (custom handler) when the row is changed?

Thanks advance!
Ignacio

Like 0

Like

1 comments
Best reply

Hi,

 

Here is a simple code with an example of how to retrieve selected records:

{
            request: "crt.HandleViewModelAttributeChangeRequest",
            handler: async (request, next) =>  {
              if (request.attributeName === 'GridDetail_9ib3s20_SelectionState') {
                const gridDetailSelectionState = await request.$context.GridDetail_9ib3s20_SelectionState;
                if (gridDetailSelectionState) {
                   let selectedRows = await request.$context.GridDetail_9ib3s20_SelectedRows || []
;
                  console.log(selectedRows);
                }
              }
              return next?.handle(request);
            }
          }

It's triggered when the record is selected in the list and retrieves all selected rows in the list. If you need to retrive currently selected record you may add the following line

 

const lastRowSelected = request.$context.GridDetail_9ib3s20_ActiveRow;

 

Also don't forget to change GridDetail_9ib3s20 to your list.

Hi,

 

Here is a simple code with an example of how to retrieve selected records:

{
            request: "crt.HandleViewModelAttributeChangeRequest",
            handler: async (request, next) =>  {
              if (request.attributeName === 'GridDetail_9ib3s20_SelectionState') {
                const gridDetailSelectionState = await request.$context.GridDetail_9ib3s20_SelectionState;
                if (gridDetailSelectionState) {
                   let selectedRows = await request.$context.GridDetail_9ib3s20_SelectedRows || []
;
                  console.log(selectedRows);
                }
              }
              return next?.handle(request);
            }
          }

It's triggered when the record is selected in the list and retrieves all selected rows in the list. If you need to retrive currently selected record you may add the following line

 

const lastRowSelected = request.$context.GridDetail_9ib3s20_ActiveRow;

 

Also don't forget to change GridDetail_9ib3s20 to your list.

Show all comments

Hi team! 

I need to have columns in the data grid with 60px width and no more than that. 
The minimum currently allowed I think is 114px. 
Setting a smaller width in grid code is not working, no matter the value I set to the column width, it shows with 114px width.

 

 

Also if final user tries to reduce the width dragging the column border, is stuck at that predefined min value. 

 

Any idea how to redefine that? is it possible?

 

Thanks!

Like 0

Like

1 comments

Hello,

Unfortunately, this is not possible to change the column width. We will submit this idea to our development team, and it might be implemented in future releases. Stay tuned for the updates, and thank you for helping us to improve our products!

Show all comments

Is it possible to display columns in a datagrid without making them clickable links?

Like 0

Like

6 comments

Instead of adding the lookup column to the grid layout, expand that to get the display value to add to the grid instead. For example, instead of adding "Account", click the plus button then select Account, the choose the Name column to add to the grid, then it won't be clickable.

Ryan

Ryan Farley, thank you for your answer.

 

In the grid, the button + must be active to allow users to add necessary columns. Therefore, I need to display the main account on the grid without a link.

Hi!

 

You can make this detail editable. In this mode, all columns in the detail won't be clickable.

More details about editable details here:

https://academy.creatio.com/docs/8.x/no-code-customization/8.0/customization-tools/ui-and-business-logic-customization/page-layout/create-new-detail

 

Best regards,

Kate

Kate Karpik,

Hi Kate Karpik,

I need to do this in Freedom UI. Are there any features in Freedom UI for datatables similar to the showValueAsLink feature available for fields on a page?

Ryan Farley,

 

Thanks Ryan, and in case the column isn't a lookup, I mean the default Name column always was clickable, but I need in some cases not be clickable, is it possible (Freedom UI)

 

Thank in advance

Julio

 

Lia,


I'm curious as to have did you approach this? I have plans on doing something like this as well.

Show all comments

Hello,
I have some questions about lists in Creatio Freedom UI.

1. Is there any way to make a field read-only on a list while allowing it to be edited from the form page? I tried to use object-level business rules, but I couldn't disable the field only on the list. Fields are not available in the page-level business object on the list view.
2. Is it possible to add a custom validation for some fields on the list?
3. Is it possible to handle every field change, like on a form page? Some of my fields are being calculated live on the form page, using `crt.HandleViewModelAttributeChangeRequest`. I'd like to do the same on the list page or at least make those fields read-only on the list page.
4. I found a crt.SaveRecordsRequest request during debugging that allows me to review user changes before saving. But when I try to open a mini page using request.$context.executeRequest, nothing happens.
5/ Do you know of any more helpful requests related to lists? I found some more, like `crt.SaveDataRequest`, but it seems to have a restricted scope, so I can't add my own handler for it.
 

Like 1

Like

2 comments

Hey,
1.Yes you can deselect the inline editing of records option in the designer page for the detail.
2.Yes it is possible through code - but can you pls elaborate on what you mean by custom?
3.No you can't do the live calculation on the list page

Hello Eryk,
Thank you for your question!

Regarding your forth question. The following code should work
handler implementation code
Note that you also need to add @creatio-devkit/common library to your module dependencies as well as pass parameter it's function.
import deps and pass parameter to function
You can find some examples of how to open a page in custom handler here.

Regarding you fifth question. Could you please clarify and provide example on how you are implementing your logic? 
 

Show all comments

Hi, I tried to make a grid caption in two lines, first I added a
tag to the title of the header

 

 

but the second line was hidden somewhere behind the table elements.
Then I added my own CSS (a copy of InnerListedGridHtmlGeneratorCSS.css)

added padding-bottom: 60px to the fixed-captions-wrap class and it made it two-line, but
now it overlaps the first lines of the list.

 


Can you advise me on how to fix this or any other way to make the labels span two lines?

 

 

.fixed-captions-wrap-width(@scrollWidth) {
    .fixed-captions-wrap {
        width: calc(~"100% - @{scrollWidth}");
    }
}
.grid.grid-listed.inner {
    @fixed-header-height: 37px;
    padding-top: @fixed-header-height;
    .listed-grid-line:not(:last-child) {
        border-bottom: 1px solid #e5e5e5;
    }
    .fixed-captions-wrap .grid-captions {
        box-shadow: 0 1px 1.9px 0.1px rgba(0, 0, 0, 0.28);
    }
    .listed-grid-line {
        display: flex;
    }
    .grid-listed-row {
        margin: 0;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .fixed-captions-wrap {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        height: @fixed-header-height;
        overflow: visible;
        background-color: white;
        width: 100%;
        padding-bottom: 60px;
    }
    .grid-captions.fixed-header {
        position: absolute;
        padding-top: 9px;
        padding-bottom: 5px;
        font-size: 13px;
    }
    label {
        font-size: 1em;
    }
    .grid-scroll {
        overflow: auto;
    }
    .grid-bottom-spinner-space {
        position: relative;
    }
}
Like 1

Like

1 comments

Hello Andrii,

 

Basic capabilities don't allow the column to multiline properly. Yes, the <br> tag can be added, but this will make the title overlap the top border of the detail that is between the records and column titles. The only possible way is to play with CSS, but unfortunately we don't have any specific example for it.

Show all comments

Hi there, can someone assist me please? I am trying to display the account logo on the opportunities landing page. When I try to add it to the tile view I can't seem to find the logo field. The closest I could find is [Opportunity] > [Account] > [Account Logo] 

 

Please assist. Thanks. 

 

Like 0

Like

2 comments

hi Nemanja Stabic,

 

In this case, do you want to add an image field in the Opportunity section? Here is the academy article that helps this case Add image field in record page.





BR,

Bhoobalan Palanivelu

Hi Bhoobalan, 

 

Thanks for the response. I have looked at the article you shared and it’s not quite what I am looking for. I am looking to add the logo of the Account on the Opportunities landing page i.e. the page with the grid/ tile view. Is there a way to do this?

Show all comments

Hello Creatio Community,

I have an editable list, and I want that one of its columns "Product" be displayed as a link. So that when its clicked it redirects automatically to the Product section.

How can this functionality be achieved ?

Does this involve overriding the addColumnLink: function ?

Thank you,

Petrika

Like 0

Like

2 comments
Best reply

Hi Petrika,



The below code will make the lookup column act as a link as to how it inherits the behaviours during a normal detail.



This is the actual logic to make the lookup a link in the detail Grid (Editable detail).



if (entitySchemaColumn.dataValueType === this.Terrasoft.DataValueType.LOOKUP{

                            config.showValueAsLink = true;

                        }

 

Add this method in your corresponding detail code,

getCellControlsConfig: function(entitySchemaColumn) {
					debugger;
						if (!entitySchemaColumn) {
							return;
						}
						var columnName = entitySchemaColumn.name;
						var enabled = (entitySchemaColumn.usageType !== this.Terrasoft.EntitySchemaColumnUsageType.None) &amp;amp;&amp;amp;
								!this.Ext.Array.contains(this.systemColumns, columnName);
						var config = {
							itemType: this.Terrasoft.ViewItemType.MODEL_ITEM,
							name: columnName,
							labelConfig: {visible: false},
							caption: entitySchemaColumn.caption,
							enabled: enabled
						};
						if (columnName === "MyColumn") {
							config.enabled = false;
						}
						if (entitySchemaColumn.dataValueType === this.Terrasoft.DataValueType.LOOKUP{
							config.showValueAsLink = true;
						}
						if (entitySchemaColumn.dataValueType !== this.Terrasoft.DataValueType.DATE_TIME &amp;amp;&amp;amp;
								entitySchemaColumn.dataValueType !== this.Terrasoft.DataValueType.BOOLEAN) {
							config.focused = {"bindTo": "Is" + columnName + "Focused"};
						}
						return config;
					},





BR,

Bhoobalan Palanivelu.

Hi Petrika,



The below code will make the lookup column act as a link as to how it inherits the behaviours during a normal detail.



This is the actual logic to make the lookup a link in the detail Grid (Editable detail).



if (entitySchemaColumn.dataValueType === this.Terrasoft.DataValueType.LOOKUP{

                            config.showValueAsLink = true;

                        }

 

Add this method in your corresponding detail code,

getCellControlsConfig: function(entitySchemaColumn) {
					debugger;
						if (!entitySchemaColumn) {
							return;
						}
						var columnName = entitySchemaColumn.name;
						var enabled = (entitySchemaColumn.usageType !== this.Terrasoft.EntitySchemaColumnUsageType.None) &amp;amp;&amp;amp;
								!this.Ext.Array.contains(this.systemColumns, columnName);
						var config = {
							itemType: this.Terrasoft.ViewItemType.MODEL_ITEM,
							name: columnName,
							labelConfig: {visible: false},
							caption: entitySchemaColumn.caption,
							enabled: enabled
						};
						if (columnName === "MyColumn") {
							config.enabled = false;
						}
						if (entitySchemaColumn.dataValueType === this.Terrasoft.DataValueType.LOOKUP{
							config.showValueAsLink = true;
						}
						if (entitySchemaColumn.dataValueType !== this.Terrasoft.DataValueType.DATE_TIME &amp;amp;&amp;amp;
								entitySchemaColumn.dataValueType !== this.Terrasoft.DataValueType.BOOLEAN) {
							config.focused = {"bindTo": "Is" + columnName + "Focused"};
						}
						return config;
					},





BR,

Bhoobalan Palanivelu.

Thank you Bhoobalan Palanivelu,

 

It works perfectly.

Show all comments

Hi community,

 

I'd like to add button on a active row in a data grid :

 

For that I found posts on the community that explain how to achieve that :

https://community.creatio.com/questions/alteradd-row-buttons-newly-crea…

https://community.creatio.com/questions/add-button-row-section

https://community.creatio.com/articles/add-button-active-row-detail

https://community.creatio.com/questions/override-section-open-record-bu…

 

I tried to follow them. Here is my code :

define("ContactSectionV2", ["ProcessModuleUtilities"], function(ProcessModuleUtilities) {
	return {
		entitySchemaName: "Contact",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"name": "BtnRowCreateCandidature",
				"parentName": "DataGrid",
				"propertyName": "activeRowActions",
				"values": {
					"className": "Terrasoft.Button",
					"style": Terrasoft.controls.ButtonEnums.style.BLUE,
					"tag": "DataGridCandidature",
					"caption": { "bindTo": "Resources.Strings.BtnRowCreateCandidatureCaption" },
					"hint": { "bindTo": "Resources.Strings.BtnCreateCandidatureHint" },
				}
			}
		]/**SCHEMA_DIFF*/,
		methods: {
			onActiveRowAction: function(buttonTag, primaryColumnValue){
				this.callParent(arguments);
				switch(buttonTag){
					case "DataGridCandidature":
						this.myCustomFunction(primaryColumnValue);
						break;
				}
			},
			myCustomFunction: function(primaryColumnValue){
				this.showInformationDialog(primaryColumnValue);
			},
		}
	};
});

But for some reasons, the newly created button never showed up.

Is this the right way to create a button in a datagrid row ?

 

Best regards,

 

Julien Gunther

Like 1

Like

2 comments
Best reply

Hello Julien,

 

I've used the following approach:

define("ContactSectionV2", ["ContactSectionV2Resources"], function(resources) {
	return {
		entitySchemaName: "Contact",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[
			{
        		"operation": "insert",
        		"name": "DataGridActiveRowTestButtonAdding",
				"parentName": "DataGrid",
				"propertyName": "activeRowActions",
        		"values": {
                                "className": "Terrasoft.Button",
                                "style":this.Terrasoft.controls.ButtonEnums.style.BLUE,
                                "markerValue": "TestButtonAddingAction",
                                "tag": "call",
                                "caption": resources.localizableStrings.TestButtonAddingRowButtonCaption
        		}
			}
		]/**SCHEMA_DIFF*/,
		methods: {
			onActiveRowAction: function(buttonTag, primaryColumnValue) {
				switch (buttonTag) {
					case "call":
						this.testClick(primaryColumnValue);
						break;
					default:
						this.callParent(arguments);
						break;
				}
			},
			testClick: function(recordId) {
				this.console.log("The button is clicked!");
			}
		}
	};
});

Using localizable resources of the schema. It seems that in your code the module doesn't load the localizable string for "BtnRowCreateCandidatureCaption" key. In my code the string value was loaded and the button is present in active row:

Best regards,

Oscar

Hello Julien,

 

I've used the following approach:

define("ContactSectionV2", ["ContactSectionV2Resources"], function(resources) {
	return {
		entitySchemaName: "Contact",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[
			{
        		"operation": "insert",
        		"name": "DataGridActiveRowTestButtonAdding",
				"parentName": "DataGrid",
				"propertyName": "activeRowActions",
        		"values": {
                                "className": "Terrasoft.Button",
                                "style":this.Terrasoft.controls.ButtonEnums.style.BLUE,
                                "markerValue": "TestButtonAddingAction",
                                "tag": "call",
                                "caption": resources.localizableStrings.TestButtonAddingRowButtonCaption
        		}
			}
		]/**SCHEMA_DIFF*/,
		methods: {
			onActiveRowAction: function(buttonTag, primaryColumnValue) {
				switch (buttonTag) {
					case "call":
						this.testClick(primaryColumnValue);
						break;
					default:
						this.callParent(arguments);
						break;
				}
			},
			testClick: function(recordId) {
				this.console.log("The button is clicked!");
			}
		}
	};
});

Using localizable resources of the schema. It seems that in your code the module doesn't load the localizable string for "BtnRowCreateCandidatureCaption" key. In my code the string value was loaded and the button is present in active row:

Best regards,

Oscar

Oscar Dylan,

 Thank you very much it works !

Show all comments