Custom lookup in Modal Window

Hi Akshaya, 

Thank you for your question! 

First of all, let's make sure that the custom module window is created correctly. Please follow the steps described below: 

1. Please go to Configuration section > choose "Add" > Additional > Schema of the Edit Page View Model. Here, set up the "Base entity page" as the parent object and save the changes. Now, you are able to edit this schema: choose Name, Title, and add the following code there (this will create a modal window only):

define("UsrMyModalPage", ["ModalBox"], function(ModalBox) {
	return {
		attributes: {
			"myEnum": {
				"dataValueType": Terrasoft.DataValueType.ENUM,
				"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
				"caption": "myEnum"
			},
			"myList": {
				"dataValueType": Terrasoft.DataValueType.ENUM,
				"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
				"isCollection": true
			}
		},
		messages: {
			"DataFromModal": {
				mode: Terrasoft.MessageMode.PTP,
				direction: Terrasoft.MessageDirectionType.PUBLISH
			}
		},
		methods: {
			init: function(callback, scope) {
				this.callParent(arguments);
			},
			onRender: function() {
			},
			onPageInitialized: function(callback, scope) {
				if (!this.get("myList")) {
					this.set("myList", this.Ext.create("Terrasoft.Collection"));
				}
				if (callback) {
					callback.call(scope || this);
				}
			},
			prepareMyList: function(filter, list) {
				if (list === null) {
					return;
				}
				list.clear();
				var columns = {};
				var value1 = {
					displayValue: "a123",
					value: "1"
				};
				var value2 = {
					displayValue: "b234",
					value: "2"
				};
				var value3 = {
					displayValue: "c345",
					value: "3"
				};
				columns[1] = value1;
				columns[2] = value2;
				columns[3] = value3;
				list.loadAll(columns);
			},
			 onMyValueChange: function(val) {
				if (val && val.displayValue) {
					console.log("you pick: ", val.displayValue);
				}
			}
		},
		diff: [
			{
				"operation": "insert",
				"name": "MyContainer",
				"propertyName": "items",
				"values": {
					"itemType": Terrasoft.ViewItemType.CONTAINER,
					"items": []
				}
			},
			{
				"operation": "insert",
				"parentName": "MyContainer",
				"propertyName": "items",
				"name": "MyGridContainer",
				"values": {
					"itemType": Terrasoft.ViewItemType.GRID_LAYOUT,
					"items": []
				}
			},
			{
				"operation": "insert",
				"parentName": "MyGridContainer",
				"name": "CloseButton",
				"propertyName": "items",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"style": Terrasoft.controls.ButtonEnums.style.BLUE,
					"click": {bindTo: "onCloseButtonClick"},
					"markerValue": "CloseButton",
					"caption": "OK",
					"layout": { "column": 0, "row": 1, "colSpan": 3 }
				}
			},
				{
		"operation": "insert",
		"name": "myEnum",
		"values": {
			"caption": "myEnum",
			"layout": {
				"colSpan": 12,
				"rowSpan": 1,
				"column": 0,
				"row": 2,
				"layoutName": "Header"
			},
			"controlConfig": {
				"className": "Terrasoft.ComboBoxEdit",
				"list": {
					"bindTo": "myList"
				},
				"change": {
					"bindTo": "onMyValueChange"
				},
				"prepareList": {
					"bindTo": "prepareMyList"
				}
			},
			"labelConfig": {},
			"enabled": true,
			"bindTo": "myEnum"
		},
		"parentName": "Header",
		"propertyName": "items",
		"index": 4
	}
		]
	};
});

2. Save your newly created Schema of the Edit Page View Model.

3. Now, please create Modal through "Add" > "Module" and set up the "Base entity page" as the parent object, save the changes, choose Name, Title, and add the following code:

define("UsrMyModalModule", ["ModalBox", "BaseSchemaModuleV2"],
		function(ModalBox) {
	Ext.define("Terrasoft.configuration.UsrMyModalModule", {
		extend: "Terrasoft.BaseSchemaModule",
		alternateClassName: "Terrasoft.UsrMyModalModule",
		/**
		 * @inheritDoc Terrasoft.BaseSchemaModule#generateViewContainerId
		 * @overridden
		 */
		generateViewContainerId: false,
		/**
		 * @inheritDoc Terrasoft.BaseSchemaModule#initSchemaName
		 * @overridden
		 */
		initSchemaName: function() {
			this.schemaName = "UsrMyModalPage";
		},
		/**
		 * @inheritDoc Terrasoft.BaseSchemaModule#initHistoryState
		 * @overridden
		 */
		initHistoryState: Terrasoft.emptyFn,
	});
	return Terrasoft.UsrMyModalModule;
});

4. Now please create the replacing client schema module for the section you would like to add the modal window to (let's consider "ContactPageV2" as the example and do not forget to set up the inheritance to the base schema):

define("ContactPageV2", ["ContactPageV2Resources", "GeneralDetails", "ModalBox"],
function(resources, GeneralDetails, ModalBox) {
	return {
		entitySchemaName: "Contact",
		messages: {
			"DataFromModal": {
				mode: Terrasoft.MessageMode.PTP,
				direction: Terrasoft.MessageDirectionType.SUBSCRIBE
			}
		},
		details: /**SCHEMA_DETAILS*/{
		}/**SCHEMA_DETAILS*/,
		methods: {
			subscribeSandboxEvents: function() {
				this.callParent(arguments);
				this.sandbox.subscribe("DataFromModal", function(arg) {
					console.log("msg from modal: " + arg.test);
				}, this, [this.sandbox.id + "_" + "UsrMyModalModule"]);
			},
			loadMyModal: function() {
				var sandbox = this.sandbox;
				var config = {
					heightPixels: 420,
					widthPixels: 750
				};
				var moduleName = "UsrMyModalModule";
				var moduleId = sandbox.id + "_" + moduleName;
				var renderTo = ModalBox.show(config, function() {
					sandbox.unloadModule(moduleId, renderTo);
				});
				sandbox.loadModule(moduleName, {
					id: moduleId,
					renderTo: renderTo
				});
			},
			onMyClick: function() {
				this.loadMyModal();
			},
			onEntityInitialized: function() {
				this.callParent(arguments);
			}
		},
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"parentName": "CombinedModeActionButtonsCardContainer",
				"propertyName": "items",
				"name": "MainContactButton",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"caption": "TESTCLICKFORYOURLOOKUP",
					"click": {"bindTo": "onMyClick"}
				}
			}
		]/**SCHEMA_DIFF*/
	};
});

5. Save the changes and hard-reload the page.

Please note this will create an empty dropdown you will be able to fill in through the schema in accordance with your business task.

Regards,

Anastasiia

Anastasiia Markina,

How can I prepare "myList" by calling a webservice?

Thanks

Toan Mai,

We don't have any practical example of this logic, but in general you need to create a business process (that can be called from the client schema) that will call a web-service that returns some data and then use this data to fill in the "columns" object in the "prepareMyList" method.

Best regards,

Oscar

Anastasiia Markina,

How to display a list instead of a combobox?



Thank you.

Solem

Solem Khan Abdusalam,

Please refer to https://community.creatio.com/questions/convert-comboboxedit-gridlist-o… where we will think on how to do it.

Best regards,

Oscar

Oscar Dylan,

Yes please. I'm a bit stock as of the moment.  Been doing trial and error with no success.



Thank you.