I added virtual Detail and after filling the object it displays all records. On not Virtual details recoreds are displayed with amount of 10 and after clicking "Show More" it shows another 10. Bassicaly I want the same  logic for my Virtual Detail. I tried to set "RowCount" to 10 but it did not work.

Is it possible to add record limitation as it works in  not virtual detail with rowcount 10

 define("UsrFinancialAccountsVirtualDetail", ['ContactPageV2' ], function(ContactPageV2) {
	return {
		entitySchemaName: "UsrFinancialAccountsVirtualObject",
		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"},
                    "style": Terrasoft.controls.ButtonEnums.style.TRANSPARENT
                },
 
			},
 
		]/**SCHEMA_DIFF*/,
		attributes: {
			IsGridEmpty: {
                    dataValueType: this.Terrasoft.DataValueType.BOOLEAN,
                    value: true
			}
		},
		methods: {
     		sortColumn: this.Terrasoft.emptyFn,
            loadGridData: this.Terrasoft.emptyFn,
			      getRowCount: function() {
					return 10;
				  },
 
            init: function() {
                this.callParent(arguments);
                this.set("IsGridEmpty", true);
                this.set("IsGridDataLoaded", true);
 
            },
			onLoadGridButtonClick: function() {
				var _branchVirtualObject = this;
				this.set("MaskId", Terrasoft.Mask.show({timeout: 0}));
				var baseSecret = Terrasoft.SysSettings.cachedSettings.baseSecret;
    			var baseUrl = Terrasoft.SysSettings.cachedSettings.baseUrl;
 
				jQuery.ajax({
                        type: "GET",
 
                        url: `**************************************`,
                        headers: {
                            "Content-Type": "application/json",
                            "Accept-Language": "ru-RU"
                        },
                        dataType: "json",
                        success: function(getAccountsResponse) {
							if(getAccountsResponse.status.code == 1 && getAccountsResponse.data.accounts){
								let accountsData = getAccountsResponse.data.accounts
								 _branchVirtualObject.parseDataToDetail(accountsData)
								 _branchVirtualObject.showInformationDialog(getAccountsResponse.status.message)
								Terrasoft.Mask.hide(_branchVirtualObject.get("MaskId"));							
 
							}else{
								_branchVirtualObject.fallbackOnError(getAccountsResponse.status.message)
								Terrasoft.Mask.hide(_branchVirtualObject.get("MaskId"));
							}										
                        },
                        error: function(getCardsResponse) {
                           Terrasoft.Mask.hide(_branchVirtualObject.get("MaskId"));
							_branchVirtualObject.fallbackOnError("Error")   						
                        },                      
                    });				
			},
				fallbackOnError: function(message, response) {
				this.hideBodyMask();
				this.showInformationDialog(message, null, { style: Terrasoft.MessageBoxStyles.RED });
				console.log(message);
			},
			parseDataToDetail:function(cardsData){				 
				var data =[];				
				cardsData.map(x => {
					const tempObj = {
						UsrAccountId: x.accountId,
						UsrIndex: x.index,
						UsrBalance: x.balance,
						UsrStatus: x.status,
						UsrCurrency: x.currency,
						UsrType: x.type,
						UsrBankAccountNumber: x.UsrBankAccountNumber,						
					}	;					
					data.push(tempObj)
				})				
				var newCollection = Ext.create("Terrasoft.Collection");
				Terrasoft.each(data, function(item, key) {
					var model = Ext.create("Terrasoft.BaseViewModel", {
						rowConfig: {
							UsrId: {
								columnPath: "UsrId",
								dataValueType: Terrasoft.DataValueType.GUID
							},					
							UsrAccountId: {
								columnPath: "UsrAccountId",
								dataValueType: Terrasoft.DataValueType.TEXT
							},
							UsrIndex: {
								columnPath: "UsrIndex",
								dataValueType: Terrasoft.DataValueType.GUID
							},
							UsrBalance: {
								columnPath: "UsrBalance",
								dataValueType: Terrasoft.DataValueType.TEXT
							},
							UsrStatus: {
								columnPath: "UsrStatus",
								dataValueType: Terrasoft.DataValueType.TEXT
							},	
							UsrCurrency: {
								columnPath: "UsrCurrency",
								dataValueType: Terrasoft.DataValueType.TEXT
							},
							UsrType: {
								columnPath: "UsrType",
								dataValueType: Terrasoft.DataValueType.TEXT
							},
							UsrBankAccountNumber: {
								columnPath: "UsrBankAccountNumber",
								dataValueType: Terrasoft.DataValueType.BOOLEAN
							},
 
 
 
						},
						values: {
							UsrId: Terrasoft.generateGUID(),
							UsrAccountId: item.UsrAccountId,
							UsrIndex: item.UsrIndex,
							UsrBalance: item.UsrBalance,
							UsrStatus: item.UsrStatus,
							UsrCurrency: item.UsrCurrency,
							UsrType: item.UsrType,
							UsrBankAccountNumber: item.UsrBankAccountNumber,
						}
					}, this);
					newCollection.add(model.get("Id"), model);
				});
				var response = {
					collection: newCollection,
					success: true,
					errorInfo: undefined,
				};
 
				this.set("IsGridLoading", false);
                 this.set("IsGridDataLoaded", true);
				 this.set("IsGridEmpty", false);
				this.set("IsDetailCollapsed", false);
				this.set("RowCount", 10);
				this.updateLoadedGridData(response, this.onGridDataLoaded, this);
 
 
			},
 
		}
 
	};
}); 
Like 0

Like

2 comments

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.

Show all comments



I have made a custom detail using existing object Click through links with email in the BulkEmail section in order to see what Contacts clicked on what links of this Bulk email.

To achieve that in BulkEmailPageV2 code i changed detailColumn default value to BulkEmailHyperlink.BulkEmail as here is no direct refference to Bulk email in object Click through links with email.

        details: /**SCHEMA_DETAILS*/{
            "UsrSchema4edcd088Detail90da8858": {
                "schemaName": "UsrSchema4edcd088Detail",
                "entitySchemaName": "VwBulkEmailClickedLink",
                "filter": {
                    "detailColumn": "BulkEmailHyperlink.BulkEmail",
                    "masterColumn": "Id"
                }
            }
        }/**SCHEMA_DETAILS*/,

At first sight everything looks good, though i noticed that I cannot get extended list of records by pressing Show More button in that new detail. As result of Show More i receive only additional 2-5 records (depending on which column records are sorted by) and Show more option after second or third click dissapears.

What i missed here? any ideas?

Like 0

Like

1 comments

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!

Show all comments