Question

Output parameters from custom UI component based on a Classic UI page to Freedom UI page

Hi there

I implemeted custom UI component (OsmMapsModule) and injected it on Freedom Ui list page using this article Implement a custom UI component based on a Classic UI page | Creatio Academy

Now I need to get feedback from that component on the page to trigger some logic on Freedom UI, bu fail to do so. Here is my code.

define("ClvObjectMapModule", ["ClvObjectMapModuleResources", "@creatio-devkit/common", "Base7xViewElement", "MaskHelper", "ClvJsConsts", 
							  "ckeditor-base", "Leaflet", "css!Leaflet"], 
function(resources, sdk, Base7xViewElement, MaskHelper, ClvJsConsts) {
 
    /* Declare a "ClvObjectMapModule" class. */
    class ClvObjectMapModule extends Base7xViewElement {
 
		_mapRecordClickedId;
		get mapRecordClickedId() {
			return this._mapRecordClickedId;
		}
		set mapRecordClickedId(value) {
            this._mapRecordClickedId = value;
        }
		...
 
		// Here I make change and want it propagate to Freedom UI page.
 
		_clvOpenPage(config) {
			this.mapRecordClickedId = config.recordId;
		}
    }
 
    /* Register the component. */
    customElements.define('clv-objectmap', ClvObjectMapModule);
 
    /* Register a component as a visual element. */
    sdk.registerViewElement({
        type: 'clv.ObjectMap',
        selector: 'clv-objectmap',
        inputs: {
			mapRecordClickedId: {}
		},
		// This is not documented and I just guessed it might work like for example inputs work.
        outputs: {
			mapRecordClickedId: {}
		}
    });
 
    return Terrasoft.ClvObjectMapModule;
});
Like 0

Like

1 comments

And here is code in Freedom UI

"MapRecordClickedId": {
	"modelConfig": {}
},
...
{
	request: "crt.HandleViewModelAttributeChangeRequest",
	handler: async (request, next) => {
 
 
// I want this handler to be triggered but it just does not when I make changes in custom component
 
		if (request.attributeName === "MapRecordClickedId" && sdk.isGuid(request.value)) {
			const handlerChain = sdk.HandlerChainService.instance;
			await handlerChain.process({
				"type": 'crt.OpenPageRequest',
				"schemaName": "ClvObject_FormPage",
				"modelInitConfigs": [{
					"recordId": request.value,
					"action": sdk.ModelInPageAction.Edit
				}],
				$context: request.$context
			});
		}
 
		return next?.handle(request);
	}
},
...
{
	"operation": "insert",
	"name": "ClvObjectMap",
	"values": {
		"type": "clv.ObjectMap",
		"mapRecordClickedId": "$MapRecordClickedId",
		"styles": {
			"width": "-webkit-fill-available"
		}
	},
	"parentName": "ClvMapContainer",
	"propertyName": "items",
	"index": 0
}
Show all comments