Hi Community,
I am currentyl working on CTI integration with Creatio. I have two questions regarding cross communication between custom attached Angular component with Creatio inside a client module. Everything here is related to Freedom UI.
- Is there any way to elegantly handle outputs from Angular component instead of listening to attribute changes? What I mean is that I want to map my output to a designated custom handler as I can do it with clicked event. So basically something happens on Angular component side like incoming call, I handle it by emitting an event that will trigger some operation/handler like opening side page with webphone and a specific contact page filtered by the phone number.
- I have a case where I need to invoke some method in Angular component. I was hopinh to achieve that by Inputs and invoking the Angular methods in @Input setter. Moreover the invocation must happen from a different client module ex. click phone number on contact page should invoke an Angular component method that resides on different page.
I hope there is some way to handle it with Creatio without having to do some workarounds with JS.
Thanks for reading and help in advance.
Like
Hi,
Thank you for providing the detailed context about your CTI integration — it really helps to understand your scenario.
At the moment, Freedom UI does not provide a built-in mechanism to directly map Angular component @Output events to custom Creatio handlers or to invoke Angular component methods from another client module through @Input without implementing some custom glue code. The standard way to handle this today is to pass data via bound attributes between the Angular component and the Freedom UI view model, and then use request handlers in the page schema to react to those changes.
That said, as a theoretical workaround, you could establish a small shared event bus (for example, a global JavaScript object or a lightweight RxJS Subject) that both your Angular component and Creatio’s Freedom UI page logic can access. This would allow the Angular side to emit structured events (e.g., incomingCall), and for any Freedom UI module to subscribe and react accordingly — effectively bridging the gap until native event mapping is supported.
Jakub Wieczorek,
Thanks for answering. Really appreciate that.
To the first question, I've found a way to handle incoming output events from custom Angular. I do think that's the best so far. It's about emitting variables via @Output decorator and handling them on creatio side with something like shown below. I think it might fit the use case of inbound callings.
@Output() @CrtOutput() someEvent = new EventEmitter<string>(); //creatio handling in the attributes someEvent: { request: usr.eventHandler; }
Now about the second with outbound calling, I have been having an idea (I think exactly like yours) to handle cross client module communication by just using process method with type: crt.OpenSidebarRequest and passing an input attribute to the custom Angular component, therefore invoking the input setter method. There in the setter I could invoke calling methods to the iframe. The problem is that I'm not sure how to programmaticaly override onClick event on phone numbers in Creatio. Do you have any brilliant ideas?
Lastly to your workaround. It could work, but sounds kinda complicated with my little JS knowledge. I don't know, where I would have to as you said establish a bus or RxJS subject globally for both Creatio and Angular component. If the above solutions, that I mentioned would work, it would be way better for me, then using that workaround, which I said know little about.
Tuan,
You could likely use Javascript's built in Broadcast Channel API for sending events/messages between contexts. It's easy to use and I've used it in Creatio in both Freedom UI and classic. Only downside of using the broadcast channel is that it passes messages that share the same storage context, meaning, if the user has multiple tabs open, all the tabs will get the message you're sending (which might be good/ok for a CTI solution?). Just thought I'd mention for another option to consider.
Ryan
Ryan Farley,
Well, I think that could be the solution to my problem with cross communication between client module and Angular component instead of passing attribute from one client module to another client which holds the Angular custom component. Thanks for the advice. Just thinking if it's the best idea or if there are any other bus like APIs.