Virtual object with external data

Dear Marcelo,

You can create a modal window, which will be displaying the needed data. General properties and behavior of modal windows are specified in the ModalBox and ModalBoxSchemaModulemodules of the NUI package. 

We do not have a exactly fitting example, though you can use and modify the following.

The algorithm of adding modal windows is:

1. Create a page for modal window. Use Base modal box page schema as a parent object:

 define("UsrMyModalPage", [], function() {
	return {
		attributes: {
			"TestText": {
				dataValueType: Terrasoft.DataValueType.TEXT,
				type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
				value: "Test value for modal"
			}
		},
		messages: {
		},
		methods: {
			init: function(callback, scope) {
				this.callParent(arguments);
			},
			getHeader: function() {
				return this.get("Resources.Strings.PageCaption");
			},
			onRender: function() {
				this.callParent(arguments);
				var moduleInfo = this.get("moduleInfo");
				var boxSizes = moduleInfo.modalBoxSize;
				var width = boxSizes.width;
				var height = boxSizes.height;
				this.updateSize(width, height);
			}
		},
		//Insert already existed Iframe
		diff: [
			{
				"operation": "insert",
				"parentName": "CardContentContainer",
				"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": 10}
				}
			}
		]
	};
});

2. Insert modal box as a dependency to the page where it should be called and bind button click to modal window open function:

define("ContactPageV2", [ "MaskHelper"],
	function(MaskHelper) {
	return {
		entitySchemaName: "Contact",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"name": "DonateButton",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"style": Terrasoft.controls.ButtonEnums.style.RED,
					"caption": "test",
					"click": {
						"bindTo": "donateButtonClick"
					}
				},
				"parentName": "RightContainer",
				"propertyName": "items",
				"index": 1
			}
		]/**SCHEMA_DIFF*/,
		messages: 
			{
				"GetModuleInfo": {
					direction: Terrasoft.MessageDirectionType.SUBSCRIBE,
					mode: Terrasoft.MessageMode.PTP
			}
		},
		attributes: {},
		mixins: {},
		methods: {
			subscribeSandboxEvents: function() {
				this.callParent(arguments);
				this.sandbox.subscribe("GetModuleInfo", this.getDonateModalBoxConfig, this,
					[this.getDonateModalBoxId()]);
			},
			donateButtonClick: function() {
				this.sandbox.loadModule("ModalBoxSchemaModule", {
					id: this.getDonateModalBoxId()
				});
			},
			getDonateModalBoxConfig: function() {
				return {
					"schemaName": "UsrMyModalPage",
					"modalBoxSize": {
						"width": "680px",
						"height": "400px"
					}
				};
			},
			getDonateModalBoxId: function() {
				return this.sandbox.id + "_DonateModalBox";
			}
		}
	};
});

You can add styles as well.

Hope you will find it helpful.

Regards,

Anastasia

Anastasia Botezat,

Hi Anastasia,

Thanks for the answer.  I tried to replicate what you reported, but my modal opens empty. Do you have any idea what it might be? Thanks.

Marcelo,

I have improved the code, so now it is only two schemas. Please check my first edited answer.

Regards,

Anastasia

Marcelo,

Hi Anastasia,

It worked! Now I need to know how to send my list values to Modal and add a close button in Modal. Thank you very much!

Marcelo,

Since you do not have data in the database, you can fetch it as you do it for the section. On the other hand, you can pass current context with its scope along to the modal while clicking on the button. Pick which approach you prefer more.

Regards,

Anastasia

Anastasia Botezat,

Do you have an example of how I can pass the context to modal? Thanks! 

Marcelo,

Check the article on sandbox messages. Draw your attention to the second parameter of the message, which can pass arguments.

https://academy.bpmonline.com/documents/technic-sdk/7-13/sandbox-module-message-exchange