Simple ModalBox

Hi do you have example to do the other way around, passing information from contact page to modal box?

Fulgen Ninofranco,

Please find the example below, where on email field change, the modal box will display mobile phone of current contact.

attributes: {
    "Email": {
	dependencies: [
	    {
		columns: ["Email"],
		methodName: "showMobilePhone"
	    }
	]
    }
},
methods: {
    showMobilePhone: function() {
      var mobilePhone = this.get("MobilePhone");
      this.showInformationDialog("Is contact mobile phone " + mobilePhone + " correct?");
    }
}

In case you need to retrieve value for other contact, not the current one, please consider using ESQ i to the Contact object in the method. 

showInformationDialog method can display strings as well as values of localizable strings.

Regards,

Anastasia

S.Kobizka/Anastasia,

I am trying the code in this post to create a modal dialog. I've used the code exactly as posted in this article, without changes, for this test. The ModalBox dialog shows, the client schemas UsrMyModalModule and UsrMyModalPage both load and hit my breakpoint, but the elements in the diff of UsrMyModalPage do not show, the modal dialog is empty. I assume it is possibly because of the type of schema I chose for the UsrMyModalPage. The article says:

Create a MoalBox page - "Model schema of the page view" without specifying the parent schema

What exactly is a "Model schema of the page view". I've tried as a Module, as a "Schema of the Edit Page view Model" (which produces an error about "schema identifier not found" when saving), and also as a Module with "BaseModalBoxPage" as the parent, all with the same results.

Any ideas what I might be doing wrong? Or can you clarify what "Model schema of the page view" is exactly?

Thanks!

Ryan

Ryan Farley,

Hello Ryan,



In order to create a modal box you need:



1. Create a  "Schema of the Edit Page View Model" https://prnt.sc/pxaga3.

Parent object - "Base modal box page schema"  https://prnt.sc/pxagv1

2. Code of the modal box:

define("UsrSampleModalBox", [], function() {
	return {
		attributes: {
			"TestText": {
				dataValueType: Terrasoft.DataValueType.TEXT,
				type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN
			}
		},
		messages: {
		},
		methods: {
			init: function(callback, scope) {
				this.callParent(arguments);
				this.usrInitModuleInfo();
			},
			usrInitModuleInfo: function() {
				var moduleInfo = this.get("moduleInfo");
				this.set("TestText", moduleInfo.TestText);
			},
			getHeader: function() {
				return this.get("Resources.Strings.PageCaption");
			}
		},
		//Insert already existed Iframe
		diff: [
			{
				"operation": "insert",
				"name": "MyContainer",
				"parentName": "CardContentContainer",
				"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",
				"propertyName": "items",
				"name": "TestText",
				"values": {
					"bindTo": "TestText",
					"caption": "Test text",
					"layout": {"column": 0, "row": 0, "colSpan": 20}
				}
			}
		]
	};
});

3. Call a modal box from the page. I used Account page as an example:

define("AccountPageV2", ["UsrSampleModalBox"], function() {
	return {
		entitySchemaName: "Account",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		methods: {
			getActions: function() {
				var actionMenuItems = this.callParent(arguments);
				this.addModalBoxMenuItem(actionMenuItems);
				return actionMenuItems;
			},
			addModalBoxMenuItem	: function(actionMenuItems) {
				actionMenuItems.addItem(this.getButtonMenuItem({
					"Caption": {"bindTo": "Resources.Strings.ModalBoxMenuItemCaption"},
					"Tag": "openModalBox"
				}));
			},
			openModalBox: function() {
				this.sandbox.loadModule("ModalBoxSchemaModule", {
					id: this.sandbox.id + "_UsrSampleModalBox",
					instanceConfig: {
						moduleInfo: {
							schemaName: "UsrSampleModalBox",
							TestText: "sample parameter value"
						},
						initialSize: {
							width: 800,
							height: 450
						}
					}
				});
			}
		},
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/
	};
});

4. Results:

https://prnt.sc/pxai25

https://prnt.sc/pxai8j





Please note, that sample also shows how you can pass parameters and work with them. Parameter  - TestText, and initialSize with size parameters of modal box.

Dmytro Smishchenko,

Is there any way to pass a callback function to the modal box which can be executed when a button is pressed, e.g. a "save message" button which saves the current record and executes a business process?



Thanks,

Harvey

Hello Harvey, 



Please check this screenshot to see how the ModalBox's "show" method works: 



You can call a callback- function which will be called after closing the modal box in this way:



ModalBox.show(modalBoxConfig, function() { // the code here will work once the box is closed }, this);



Kind regards,

Roman

Roman Brown,

Thanks Roman, our use case required that we have a different callback for just closing the ModalBox than pressing the button of interest on the ModalBox (a 'save' button) so we ended up slightly modifying the Business Process and calling it from the ModalBox code using the ProcessModuleUtilities module, but will keep this in mind for future.

Thanks,

Harvey