Quick Reply PCF Control

Wouldn’t it be nice if we provide a way for staff to quickly enter a huge blob of repetitive statements with just a quick shortcut? We have these on our phones, why not bring it to the Power Platform?

Here it is in action

The Challenge

There was one particular challenge implementing this. I wanted a way to show the staff the available quick reply shortcuts instead of them raking their brain to remember all the shortcuts available for them to use. I wanted to use the simple HTML Data List for this purpose, without realizing that the Data List element only works with the simple Input Text and not the Text Area. But, as you can imagine making this field to just be an Input Text (Single line of Text) is a bad idea especially when I know that this field has a potential for multiple lines.

Office UI Fabric to my rescue

I remember seeing an Office UI Fabric component that switches from single to multiline text depending on the number of characters entered.

Viola! This is such a cool control and I wanted to leverage this. Okay, that means I need to learn React and use it with PCF. I liked this control so much and I took it on myself to do this in React and hence my first React based PCF control from the scratch was born. For the most part, it is a standard React control and if you are familiar with React, you might be able to follow it pretty easily. If you aren’t familiar with React, find an Office UI Fabric component to fall in love with and that will give you a reason to learn React. It’s nice!

To support this Quick reply component, I created a simple custom entity with 2 fields – Quick Text and Expanded Text to store the predefined quick reply shortcuts, so when the staff chooses the Quick Text, the PCF control retrieves the Expanded Text to update the text field.

If the text field has more than 100 characters, it automatically switches to the text area field. I have also used the WebAPI PCF feature in order to facilitate the above functionality.

Find the complete source code in the github.

Happy New Year!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s