Hello,

Please note that currently there is no possibility to set this up using the basic user tools, but we have registered this idea for our R&D team and they will review the possibility of implementation of such functionality in future releases.

Mira Dmitruk,

Thanks Mira

What exactly do you want to do when the button is clicked?

You can use my code as an example to implement your logic:

define("UsrSchema27d9d5e6Detail", [], function() {
	return {
		entitySchemaName: "UsrTestDetail",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[
			{
                "operation": "insert",
                "name": "LoadGridButton",
                "parentName": "Detail",
                "propertyName": "tools",
                "values": {
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    "caption": {"bindTo": "Resources.Strings.LoadGridButtonCaption"},
                    "click": {"bindTo": "onLoadGridButtonClick"},
					"enabled": {"bindTo": "isLoadGridButtonEnabled"},
                    "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT
                }
			},
			{
                "operation": "insert",
                "name": "LoadNextRecords",
                "parentName": "Detail",
                "propertyName": "tools",
                "values": {
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    "caption": {"bindTo": "Resources.Strings.LoadNextRecords"},
                    "click": {"bindTo": "onLoadNextRecordsButtonClick"},
					"enabled": {"bindTo": "isLoadNextRecordsButtonEnabled"},
                    "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT
                }
			},
			{
                "operation": "insert",
                "name": "ClearGridData",
                "parentName": "Detail",
                "propertyName": "tools",
                "values": {
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    "caption": {"bindTo": "Resources.Strings.ClearGridData"},
                    "click": {"bindTo": "onClearGridDataButtonClick"},
					"enabled": {"bindTo": "isClearGridDataButtonEnabled"},
                    "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT
                }
			}
		]/**SCHEMA_DIFF*/,
		attributes: {
 
			IsGridEmpty: {
                    dataValueType: this.Terrasoft.DataValueType.BOOLEAN,
                    value: true
			},
 
			NumberOfClicks: {
				dataValueType: this.Terrasoft.DataValueType.INTEGER,
				value: 0
			},
 
			NumberOfRecordsToDisplay: {
				dataValueType: this.Terrasoft.DataValueType.INTEGER,
				value: 10
			},
 
			CanLoadGridData: {
				dataValueType: this.Terrasoft.DataValueType.BOOLEAN,
				value: true
			},
 
			ObjectsCollection: {
				dataValueType: this.Terrasoft.DataValueType.COLLECTION,
				value: [
					{
						UsrName: "1111",
						UsrIntColumn: 1
					},
					{
						UsrName: "Test2",
						UsrIntColumn: 24
					},
					{
						UsrName: "Test3",
						UsrIntColumn: 34
					},
					{
						UsrName: "Test4",
						UsrIntColumn: 44
					},
					{
						UsrName: "Test5",
						UsrIntColumn: 54
					},
					{
						UsrName: "Test6",
						UsrIntColumn: 64
					},
					{
						UsrName: "Test7",
						UsrIntColumn: 74
					},
					{
						UsrName: "Test8",
						UsrIntColumn: 84
					},
					{
						UsrName: "Test9",
						UsrIntColumn: 94
					},
					{
						UsrName: "Test10",
						UsrIntColumn: 104
					},
					{
						UsrName: "Test11",
						UsrIntColumn: 114
					},
					{
						UsrName: "Test12",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test13",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test14",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test15",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test16",
						UsrIntColumn: 124
					},
					{
						UsrName: "Test17",
						UsrIntColumn: 124
					}
				]
			}
		},
		methods: {
 
			isClearGridDataButtonEnabled: function() {
				var numberOfClicks = this.get("NumberOfClicks");
				var canLoadMoreData = this.get("CanLoadGridData");
				return numberOfClicks != 0 && !canLoadMoreData;
			},
 
			isLoadGridButtonEnabled: function() {
				var numberOfClicks = this.get("NumberOfClicks");
				var canLoadMoreData = this.get("CanLoadGridData");
				return numberOfClicks == 0;
			},
 
			isLoadNextRecordsButtonEnabled: function() {
				var numberOfClicks = this.get("NumberOfClicks");
				var canLoadMoreData = this.get("CanLoadGridData");
				return numberOfClicks != 0 && canLoadMoreData;
			},
 
			processObjectsCollection: function(collection, numberOfRecordsToLoad, skipRecordsNumber) {
				var newCollection = Ext.create("Terrasoft.Collection");
				Terrasoft.each(collection, function(item, key) {
					if (key < numberOfRecordsToLoad && key >= skipRecordsNumber) {
						var model = Ext.create("Terrasoft.BaseViewModel", {
						rowConfig: {
							Id: {
								columnPath: "Id",
								dataValueType: Terrasoft.DataValueType.GUID
							},
							UsrName: {
								columnPath: "UsrName",
								dataValueType: Terrasoft.DataValueType.TEXT
							},
							UsrIntColumn: {
								columnPath: "UsrIntColumn",
								dataValueType: Terrasoft.DataValueType.INTEGER
							}
						},
						values: {
							Id: Terrasoft.generateGUID(),
							UsrName: item.UsrName,
							UsrIntColumn: item.UsrIntColumn,
						}
					}, this);
						newCollection.add(model.get("Id"), model);
					}
				});
				return newCollection;
			},
 
			processNumberOfClicks: function() {
				var numberOfClicks = this.get("NumberOfClicks");
				var numberOfRecordsToDisplay = this.get("NumberOfRecordsToDisplay");
				var numberOfRecordsToLoad = (numberOfClicks + 1) * numberOfRecordsToDisplay;
				var numberOfRecordsToSkip = numberOfClicks * numberOfRecordsToDisplay;
				this.set("NumberOfClicks", numberOfClicks + 1);
				var result = {
					NumberOfRecordsToLoad: numberOfRecordsToLoad,
					NumberOfRecordsToSkip: numberOfRecordsToSkip
				};
				return result;
			},
 
			processDataLoadRequest: function() {
				var offsetFetchValue = this.processNumberOfClicks();
				var numberOfRecordsToLoad = offsetFetchValue.NumberOfRecordsToLoad;
				var skipRecordsNumber = offsetFetchValue.NumberOfRecordsToSkip;
				var object = this.get("ObjectsCollection");
				var processedCollection = this.processObjectsCollection(object, numberOfRecordsToLoad, skipRecordsNumber);
				var processedCollectionLength = processedCollection?.length;
				var response = {
					collection: processedCollection,
					success: true,
					errorInfo: undefined
				};
				this.updateLoadedGridData(response, this.onGridDataLoaded, this);
				return processedCollectionLength != 10;
			},
 
			onClearGridDataButtonClick: function() {
				const gridData = this.getGridData();
				gridData.clear();
				this.set("NumberOfClicks", 0);
				this.set("CanLoadGridData", true);
			},
 
			onLoadGridButtonClick: function() {
				this.processDataLoadRequest();
				this.set("CanLoadMoreData", false);
			},
 
			onLoadNextRecordsButtonClick: function() {
				var result = this.processDataLoadRequest();
				if (result) {
					this.set("CanLoadGridData", false);
				}
			}
		}
	};
});

The code is simple to read, and everything should be clear. The number of records to load per LoadNextRecords button click is controlled in the NumberOfRecordsToDisplay attribute. The idea was to add 3 buttons:

1) LoadGridButton performs the initial data load. Becomes disabled once it's clicked.

2) LoadNextRecords loads the next 10 records from the ObjectsCollection attribute. It becomes disabled once all records are displayed.

3) ClearGridData performs data grid clear, and data loading can start from the beginning. It is enabled only when all records are loaded into the grid.

Oleg Drobina,

Thanks Oleg, it works.

Hello Viesturs,

I implemented the same code as yours and it works correctly. According to Creatio’s logic after “Show more” the system outputs next 10 records from DB by each click if they’re available. Here is my code:

define("BulkEmailPageV2", [], function() {
			return {
				entitySchemaName: "BulkEmail",
				    details: /**SCHEMA_DETAILS*/{
						"UsrSchema4edcd088Detail90da8858": {
							"schemaName": "Schemad7cb2755Detail",
							"entitySchemaName": "VwBulkEmailClickedLink",
							"filter": {
								"detailColumn": "BulkEmailHyperlink.BulkEmail",
								"masterColumn": "Id"
							}
						}
        }/**SCHEMA_DETAILS*/,
				messages: {},
				attributes: {},
				methods: {},
				modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
				dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
				diff: /**SCHEMA_DIFF*/[
					{
            /* Add a new element. */
            "operation": "insert",
            /* The element name. */
            "name": "UsrSchema4edcd088Detail90da8858",
            /* The configuration object of values. */
            "values": {
                /* The element type. */
                "itemType": Terrasoft.ViewItemType.DETAIL
            },
            /* The container element name. */
           	"parentName": "SettingsTabContainer",
            /* The property name of the container element for the nested element collection. */
            "propertyName": "items",
            /* The index of the element to add to the collection. */
            "index": 0
        },
				]/**SCHEMA_DIFF*/,
				rules: {}
			};
});

Could you check how many records are in your DB by this query, please:

select * from VwBulkEmailClickedLink
where ContactId in (select ContactId from BulkEmailTarget
where BulkEmailId = 'Your process id. For example: a0ae3a33-5863-4e7a-993e-5ecee7de7c79')

My detail view:

Best regards, Anhelina!