How can i add more than one multi-currency field in the same page?

Hi Pedro,



I was able to come up with an example on Order page for fields Amount and Payment Amount. General idea is to duplicate logic for each field separately.



What I was not able to achieve is working with triangle as well (https://prnt.sc/qf6y2b), so I removed it. Also, as I am using Order page it has logic behind with Products detail which should be implemented for different currency fields, but I skipped it. In the custom section it should be all good.



Also note, that after adding new fields to the object, they will be empty. So to make it work, after adding fields you should fill them in using db script for example and then set default value for them (as in the article you mentioned) to make it filled in for all new records.



So here are the steps that I followed:

1. Created new fields in the object for Currency and Currency rate separately for each field. https://prnt.sc/qf6znu

2. Created a generator for field.

 

define("UsrMultiCurrencyEditViewGenerator", ["MultiCurrencyEditViewGenerator"], function() {
 
	Ext.define("Terrasoft.configuration.UsrMultiCurrencyEditViewGenerator", {
		extend: "Terrasoft.MultiCurrencyEditViewGenerator",
		alternateClassName: "Terrasoft.UsrMultiCurrencyEditViewGenerator",
 
		generateCurrencyButton: function(config) {
			var buttonConfig = {
				id: "multiCurrencyButton-currency" + config.name,
				className: "Terrasoft.Button",
				classes: {
					wrapperClass: ["currency-button"]
				},
				style: Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
				menu: {
					items: this.getPropertyBindingConfig(config, "currencyButtonMenuList")
				},
				enabled: true,
				markerValue: config.name + " MultiCurrencyButton"
			};
			return this.generateButton(buttonConfig);
		}
	});
	return Ext.create(Terrasoft.UsrMultiCurrencyEditViewGenerator);
});

3. Modified order page:

 

define("OrderPageV2", ["MoneyModule", "MultiCurrencyEdit", "MultiCurrencyEditUtilities",
"UsrMultiCurrencyEditViewGenerator"],
	function(MoneyModule, MultiCurrencyEdit, MultiCurrencyEditUtilities) {
	return {
		entitySchemaName: "Order",
		attributes: {
			"UsrAmountCurrencyRate": {
				"dependencies": [{
					"columns": ["UsrAmountCurrency"],
					"methodName": "usrSetAmountCurrencyRate"
				}]
			},
			"Amount": {
				"dependencies" : [{
					"columns": ["Amount"],
					"methodName": "usrRecalculateAmount"
				}]
			},
			"UsrPaymentAmountCurrencyRate": {
				"dependencies": [{
					"columns": ["UsrAmountCurrency"],
					"methodName": "usrSetPaymentAmountCurrencyRate"
				}]
			},
			"PaymentAmount": {
				"dependencies" : [{
					"columns": ["PaymentAmount"],
					"methodName": "usrRecalculatePaymentAmount"
				}]
			}
		},
		mixins: {
			MultiCurrencyEditUtilities: "Terrasoft.MultiCurrencyEditUtilities"
		},
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
		methods: {
			onEntityInitialized: function() {
				this.callParent(arguments);
				this.mixins.MultiCurrencyEditUtilities.init.call(this);
			},
			usrSetAmountCurrencyRate: function() {
				MoneyModule.LoadCurrencyRate.call(this, "UsrAmountCurrency", "UsrAmountCurrencyRate",
					new Date(), function() {
						var currency = this.get("UsrAmountCurrency");
						var division = currency && currency.Division;
						MoneyModule.RecalcCurrencyValue.call(this, "UsrAmountCurrencyRate",
							"Amount", "PrimaryAmount", division);
					}
				);
			},
			usrRecalculateAmount: function() {
				var currency = this.get("UsrAmountCurrency");
				var division = currency && currency.Division;
				MoneyModule.RecalcBaseValue.call(this, "UsrAmountCurrencyRate", "Amount",
					"PrimaryAmount", division);
			},
			usrSetPaymentAmountCurrencyRate: function() {
				MoneyModule.LoadCurrencyRate.call(this, "UsrPaymentAmountCurrency", "UsrPaymentAmountCurrencyRate",
					new Date(), function() {
						var currency = this.get("UsrPaymentAmountCurrency");
						var division = currency && currency.Division;
						MoneyModule.RecalcCurrencyValue.call(this, "UsrPaymentAmountCurrencyRate",
							"PaymentAmount", "PrimaryPaymentAmount", division);
					}
				);
			},
			usrRecalculatePaymentAmount: function() {
				var currency = this.get("UsrPaymentAmountCurrency");
				var division = currency && currency.Division;
				MoneyModule.RecalcBaseValue.call(this, "UsrPaymentAmountCurrencyRate", "PaymentAmount",
					"PrimaryPaymentAmount", division);
			},
 
			onPaymentAmountCurrencyMenuItemClick: function(menuItem) {
				var currency = this.get("CurrencyRateList").find(menuItem);
				this.set("UsrAmountCurrency", currency);
			},
			onAmountCurrencyMenuItemClick: function(menuItem) {
				var currency = this.get("CurrencyRateList").find(menuItem);
				this.set("UsrPaymentAmountCurrency", currency);
			},
			prepareCurrencyMenu: function() {
				this.mixins.MultiCurrencyEditUtilities.prepareCurrencyMenu.call(this);
				var currencyRateList = this.get("CurrencyRateList");
				if (!currencyRateList) {
					return;
				}
				var columnsList = ["Amount", "PaymentAmount"];
				this.Terrasoft.each(columnsList, function(column) {
					var menu = this.Ext.create(this.Terrasoft.BaseViewModelCollection);
					currencyRateList.each(function(item) {
						var menuItem = Ext.create("Terrasoft.BaseViewModel", {
							values: {
								Id: item.value,
								Caption: item.Symbol || item.displayValue,
								MarkerValue: item.Symbol || item.displayValue,
								Tag: item.value,
								Click: {"bindTo": "on" + column + "CurrencyMenuItemClick"}
							}
						});
						menu.addItem(menuItem);
					}, this);
					this.set(column + "CurrencyRateList", menu);
				}, this);
			},
		},
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "merge",
				"name": "Amount",
				"values": {
					"bindTo": "Amount",
					"primaryAmount": "PrimaryAmount",
					"currency": "UsrAmountCurrency",
					"rate": "UsrAmountCurrencyRate",
					"generator": "UsrMultiCurrencyEditViewGenerator.generate"
				}
			},
			{
				"operation": "merge",
				"name": "PaymentAmount",
				"values": {
					"bindTo": "PaymentAmount",
					"primaryAmount": "PrimaryPaymentAmount",
					"currency": "UsrPaymentAmountCurrency",
					"rate": "UsrPaymentAmountCurrencyRate",
					"generator": "UsrMultiCurrencyEditViewGenerator.generate"
				}
			}
		]/**SCHEMA_DIFF*/
	};
});

Results:

https://prnt.sc/qf723t



Triangle is removed. If you want to still have it - you would need to improve this sample further and check how to make it work.



Regards,

Dmytro