ShowOnMap | Community Creatio

Question

23:14 Jun 10, 2020

Hello all,

I am trying to use the show on map function from the contact section page and add it to the actions on the contact record page.

I have added the function to the page schema and added it to the actions menu. However, when I load the page, the button works and displays the map but it doesn't display the caption string on the button.

Though oddly, when I reload the page, the string appears but the map then won't load.

What could be causing this?

3 comments

Oleg Drobina

19:13 Jun 12, 2020

Hello Kevin,

Caption is not displayed since once the edit page is reviewed in combined mode then localizable values are being received from the section schema. To resolve this problem you need to:

1) Add the same localizable value to the ContactSectionV2 schema as on the ContactPageV2 schema

2) Add this part of code to the contact page schema:

define("ContactPageV2",["ContactPageV2Resources", "MapsHelper", "MapsUtilities"],

       function(resources, MapsHelper, MapsUtilities){

   return{

       entitySchemaName:"Contact",

       modules:/**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,

       messages: {

           "GetMapsConfig": {

               mode: Terrasoft.MessageMode.PTP,

               direction: Terrasoft.MessageDirectionType.SUBSCRIBE

           }

       },

       businessRules:/**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,

       methods:{

           getActions: function() {

               var actionMenuItems = this.callParent(arguments);

               actionMenuItems.addItem(this.getButtonMenuItem({

                   "Tag": "showOnMap",

                   "Click": {"bindTo": "openShowOnMap"},

                   "Caption": {"bindTo": "Resources.Strings.ShowOnMapCaption"},

                   "Visible": true

               }));



               return actionMenuItems;

           },

           showOnMap: function(schemaName, items, callback) {

               var config = config || {};

               items = items || this.getesqedItems();

               var esq = this.Ext.create("Terrasoft.EntitySchemaQuery", {

                   rootSchemaName: "ContactAddress"

               });

               esq.addColumn(schemaName + ".Name");

               esq.addColumn("AddressType");

               esq.addColumn("Address");

               esq.addColumn("City");

               esq.addColumn("Region");

               esq.addColumn("Country");

               if(config.columnNameLongitude){

                   esq.addColumn(config.columnNameLongitude);

               }

               if(config.columnNameLatitude){

                   esq.addColumn(config.columnNameLatitude);

               }

               esq.filters.addItem(this.Terrasoft.createColumnInFilterWithParameters(schemaName, items));

               esq.getEntityCollection(function(result) {

                   var addresses = result.collection;

                   if (result.success && !addresses.isEmpty()) {

                       var mapsData = [];

                       var mapsConfig = {

                           mapsData: mapsData

                       };

                       addresses.each(function(item) {

                           var addressType = item.get("AddressType").displayValue;

                           var address = MapsHelper.getFullAddress.call(item);

                           var content = this.Ext.String.format("<h2>{0}</h2><div>{1}</div>", addressType, address);

                           var dataItem = {

                               caption: addressType,

                               content: content,

                               address: address,

                               gpsE: item.get(config.columnNameLongitude),

                               gpsN: item.get(config.columnNameLatitude)

                           };

                           mapsData.push(dataItem);

                       }, this);

                       callback.call(this, mapsConfig);

                   } else {

                       this.showInformationDialog(resources.localizableStrings.EmptyAddressDetailMessage);

                   }

               }, this);

           },

           openShowOnMap: function() {

               var items = [];

               items.push(this.get("Id"));

               this.showOnMap.call(this, this.entitySchemaName, items, function(mapsConfig) {

                   MapsUtilities.open({

                       scope: this,

                       mapsConfig: mapsConfig

                   });

               });

           }

}

3) Add the EmptyAddressDetailMessage localizable string to the ContactPageV2 schema

Best regards,

Oscar

LÉZORAY Nicolas

17:58 Jun 21, 2024

Dear Oscar,

I m trying to display the adresse on the map, but when i do the final step:

callback.call(this, mapsConfig);

i ve got the error:

message: Uncaught Error: Map container is already initialized.

Here's my code :

define("UsrNearestAccountsf7482dd9Page", ["MapsHelper", "MapsUtilities"], function(MapsHelper, MapsUtilities) {
	return {
		entitySchemaName: "UsrNearestAccounts",
		attributes: {},
        messages: {
            "GetMapsConfig": {
                mode: Terrasoft.MessageMode.PTP,
                direction: Terrasoft.MessageDirectionType.SUBSCRIBE
            }
        },
		modules: /**SCHEMA_MODULES*/{
			"Indicator7c02186a-07da-467a-90ed-cf5286772816": {
				"moduleId": "Indicator7c02186a-07da-467a-90ed-cf5286772816",
				"moduleName": "CardWidgetModule",
				"config": {
					"parameters": {
						"viewModelConfig": {
							"widgetKey": "Indicator7c02186a-07da-467a-90ed-cf5286772816",
							"recordId": "cb62f87b-52b6-4482-8283-344ec2f94e1a",
							"primaryColumnValue": {
								"getValueMethod": "getPrimaryColumnValue"
							}
						}
					}
				}
			},
			"Indicator32f96c54-6fbf-45be-b641-95268da60efc": {
				"moduleId": "Indicator32f96c54-6fbf-45be-b641-95268da60efc",
				"moduleName": "CardWidgetModule",
				"config": {
					"parameters": {
						"viewModelConfig": {
							"widgetKey": "Indicator32f96c54-6fbf-45be-b641-95268da60efc",
							"recordId": "cb62f87b-52b6-4482-8283-344ec2f94e1a",
							"primaryColumnValue": {
								"getValueMethod": "getPrimaryColumnValue"
							}
						}
					}
				}
			}
		}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
		methods: {
            getActions: function() {
                var actionMenuItems = this.callParent(arguments);
                actionMenuItems.addItem(this.getButtonMenuItem({
                    "Tag": "showOnMap",
                    "Click": {"bindTo": "openShowOnMap"},
                    "Caption": "openShowOnMap",
                    "Visible": true
                }));
 
                return actionMenuItems;
            },
            openShowOnMap: function() {
                var items = [];
                items.push(this.get("NearAccount"));
                this.showOnMap.call(this, "Account", items, function(mapsConfig) {
                    MapsUtilities.open({
                        scope: this,
                        mapsConfig: mapsConfig
                    });
                });
            },
 
            showOnMap: function(schemaName, items, callback) {
 
                var config = config || {};
                items = items || this.getesqedItems();
 
                var esq = this.Ext.create("Terrasoft.EntitySchemaQuery", {
                    rootSchemaName: "AccountAddress"
                });
 
                esq.addColumn("AddressType");
                esq.addColumn("Address");
                esq.addColumn("City");
                esq.addColumn("Region");
                esq.addColumn("Country");
                esq.addColumn("GPSE");
                esq.addColumn("GPSN");
 
                esq.filters.addItem(this.Terrasoft.createColumnInFilterWithParameters(schemaName, items));
                esq.getEntityCollection(function(result) {
                    var addresses = result.collection;
                    if (result.success &amp;&amp; !addresses.isEmpty()) {
 
                        var mapsData = [];
                        var mapsConfig = {
                            mapsData: mapsData
                        };
 
                        addresses.each(function(item) {
                            this.console.log('item: '+this.print_r(item));
                            var addressType = item.get("AddressType").displayValue;
                            var gpsE = item.get("GPSE");
                            var gpsN = item.get("GPSN");
                            var address = MapsHelper.getFullAddress.call(item);
                            var content = this.Ext.String.format("&lt;h2&gt;{0}&lt;/h2&gt;&lt;div&gt;{1}&lt;/div&gt;", addressType, address);
                            var dataItem = {
                                caption: addressType,
                                content: content,
                                address: address,
                                gpsE: gpsE,
                                gpsN: gpsN
                            };
 
                            this.console.log('dataItem:'+this.print_r(dataItem));
                            mapsData.push(dataItem);
 
                        }, this);
 
                        this.console.log('mapsConfig:'+this.print_r(mapsConfig));
                        callback.call(this, mapsConfig);
 
                    } else {
                        this.showInformationDialog("EmptyAddressDetailMessage");
                    }
                }, this);
            }, 
             print_r: function(obj) { //debug
              let cache = [];
              let str = JSON.stringify(obj, function(key, value) {
                if (typeof value === "object" &amp;&amp; value !== null) {
                  if (cache.indexOf(value) !== -1) {
                    // Référence circulaire trouvée
                    return;
                  }
                  // enregistrement de la valeur dans la collection
                  cache.push(value);
                }
                return value;
              });
              cache = null; // reset
              return str;
            }          
        },
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"name": "NearAccountaf54e816-a480-49e1-b827-362d9259418c",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 0,
						"layoutName": "Header"
					},
					"bindTo": "NearAccount"
				},
				"parentName": "Header",
				"propertyName": "items",
				"index": 0
			},
			{
				"operation": "insert",
				"name": "NearAddress0e195398-6b7e-4bed-81c7-4250803f37dd",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 1,
						"layoutName": "Header"
					},
					"bindTo": "NearAddress"
				},
				"parentName": "Header",
				"propertyName": "items",
				"index": 1
			},
			{
				"operation": "insert",
				"name": "Distanced9f7c441-62cf-4789-bad3-d9452054b13f",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 2,
						"layoutName": "Header"
					},
					"bindTo": "Distance"
				},
				"parentName": "Header",
				"propertyName": "items",
				"index": 2
			},
			{
				"operation": "merge",
				"name": "ChangesHistoryTab",
				"values": {
					"order": 0
				}
			},
			{
				"operation": "merge",
				"name": "MapTab",
				"values": {
					"order": 1
				}
			},
			{
				"operation": "merge",
				"name": "ESNTab",
				"values": {
					"order": 2
				}
			}
		]/**SCHEMA_DIFF*/
	};
});