Question
Output parameters from custom UI component based on a Classic UI page to Freedom UI page
16:13 Jan 17, 2025
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
2 comments
16:16 Jan 17, 2025
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
}20:44 Jan 31, 2025
Andrii Orlenko,
Unfortunately, it's really hard to understand where the issue is with such parts of the code. I can advise you debugging to see step by step where the data is missing or where the issue appears.
You may also create a new community question with a more general description of your needs to receive some examples.
Show all comments