Using the ClickToAct Event in PCF Controls

[Anonymous]

Hello,

My current engagement has implemented version 1.0 of the Channel Integration Framework (CIF) in order to integrate directly with an on-premise IC server (call controls). This allows users to manage interactions with customers and perform common call center actions directly from within Dynamics 365. We have added the OOB Channel Communication Control to the telephone1 field on our primary business entity so that we could enable ClickToAct. This event is raised and then handled within the call controls through the use of the Microsoft.CIFramework.addHandler("onclicktoact", ClickToActHandler) method provided in the CIF framework. This works great and has met the business requirement. My issue with this OOB Channel Communication Control is that it uses generic placeholder text that doesn't relate to our organization and can't be changed. We are also unable to apply any sort of phone number formatting to this control. My question is, will we ever be able to raise this event ourselves from within a PCF control? I think this would be great and would allow for full customization to meet business requirements. At the very least this OOB control should allow for a placeholder input and a formatting input if the ability to raise this event is out of the question for custom PCF development. Let me know what you think!

[DianaBirkelbach]

Not very sure if I understand right.

From a PCF component , you cannot raise events outside the component.

But you can change the value of the bound pcf properties, and that will trigger an "onChange" event. That can be also for a dummy property, that you can use as event. Can you make use of that?

Best regards,

Diana

[Anonymous]

Correct, however I am not speaking to the current capabilities of PCF controls. I am stating that the ability to raise the ClickToAct event from a PCF control would be useful and more than likely easy to implement on Microsoft's side. If you look at this blog post from Elina Peltokoski, you'll see exactly what I'm talking about. Elina navigates to the appropriate phone number field on the form editor and opens the related field properties popup modal. She then navigates to the controls tab (the same place custom PCF controls are bound to fields) and adds a control called "Channel Communication Control". This is an out-of-box control that you will find in any up-to-date Dynamics environment (can only be bound to phone number fields though). Opening this control gives you an identical properties form to what you see when setting input parameters on custom PCF controls. It shows the field the control has been mapped to and the ability to set a url for the location of an image. Even though this is out-of-box, it looks and feels exactly like a PCF control, and I'm guessing that's exactly what it is. If I am correct, then raising the ClickToAct event is already working inside PCF controls, and Microsoft just hasn't given us the ability to do this ourselves. Perhaps a Microsoft employee like @HemantG could provide input on the possibilities around this feature request, but I appreciate your attempt to help regardless, @DianaBirkelbach. 

If this functionality isn't something that can be released to the public, then I would at least suggest that Microsoft allow for a placeholder text input and an input that could accept regex for phone number formatting on the OOB Channel Communication Control.

Edit: the Microsoft doc for the event in question can be seen here and the second sentence says that this event can be raised from a custom control, but I have seen no examples on how to do this. The word "control" may not even be referring to a PCF control here.

[559186-6768 · Accepted solution]

Hi @Anonymous 

As you correctly point out "You can also write custom controls to raise the Channel Integration ClickToAct window event and pass any eventData as the business requirement."

This means it is "clearly" documented by Microsoft that you are encouraged to add this to your PCF control, so no worries on that point.

So how do you Trigger (or Dispatch) a Custom Window Event? You can refer to this reference for example https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Here is a code sample that works on my instance, btw, see the onclicktoact documentation for the meaning of the data in the custom event, you will need to programmatically derive some of these values for your PCF control.

                var data = {
                    "value": "15125088444",
                    "name": "new_number",
                    "format": "Text",
                    "entityLogicalName": "new_phone",
                    "entityId": "{623a50b9-d10e-eb11-a814-000d3a07be14}"
                };


//the name, entitylogicalname and entityid worked ok when "" in our testing, btw

var event = new CustomEvent("onclicktoact", { detail: data });
window.dispatchEvent(event);

Thank you and good luck!

/ AlternisConsulting.com

[559186-6768]

You can dispatch the documented onclicktoact window event with code similar to the following tested-good code:

var data = {
                    "value": "54214",
                    "name": "",
                    "format": "Text",
                    "entityLogicalName": "",
                    "entityId": ""
                };




var event = new CustomEvent("onclicktoact", { detail: data });
window.dispatchEvent(event);

the custom control provided is very limited. it doesnt work in quickviews, for example, or in many places your call center agents may hope to work from. I hope you can find creative use for it and if you add the control to your form, your browser will download the js that implements the default behavior. for example, you could also review the undocumented AgentClickToActControl.js for more insight into making some very nice PCF controls I might want to try myself.

[Anonymous]

Perfect! Thanks for the help. This is exactly what I needed.