A simple yet very flexible PCF control to display text with custom style using HTML tags or CSS styles on a Unified Interface Form in Model Driven Apps on Common Data Service (CDS) / Dynamics 365 / Power Platforms. The control could also be used for displaying lengthy text such as questions / instructions / information that cannot be displayed using out of the box label control.
Text could be displayed with custom formats using HTML tags / CSS styles. The control allows customizer to add longer text than out of the box label control or section label. A maximum of about 800 characters in total can be added. The number 800 includes any HTML tags added to the text. PCF configuration page only allows 160 characters. To get around that limit, this control has 5 text input properties (Text Part 1-5), allowing you to add about 800 characters. Text entered in Part 1-5 are all combined into one long string. The text is rendered using a span tag and the span is added to a div container. And the text itself is set using innerHTML property of the span element, making it easy to add html tags with the text to format or set the style.
Both managed and unmanaged versions of the solution are released and they can be found on releases page of this repository. Please follow the link below to get to release page.
The control currently only binds to a "Single Line of Text" and the control can be added to the form by going into Controls tab of the field property and clicking on Add Control button as shown below.
Once you added the control, you can set the text and style as shown in the screenshot below.
The above output was produced by the following configuration
Text Part 1: <span style="font-weight:bold"> Messages could be displayed with <span style="color:red">custom formats.</span></span> to get user's attention,
Text Part 2: The control allows you to add longer text than out of the box label control or section label.
Text Part 3: A maximum of about 800 characters in total can be added. The 800 includes any HTML tags added to the text. PCF configuration page only allows 160 characters.
Text Part 4: However, there are 5 properties - Text Part 1-5, allowing you to add about 800 characters.
Text Part 5:
Text Style: color:black
Div Container Style: background-color:#e6ffe6;
The above output was produced by the following configuration
Text Part 1: Please make sure you <strong> talk to the customer </strong> before hand. Please <span style="color:red"> remember </span> to send the documents 2 days
Text Part 2: before the actual call. They can also be asked to send email to <span style="color:blue">customerservice@testcompnay.com </span>
Text Part 3: And if they would like to call us on the phone, please give them <span style="color:black">customer service number 011334444</span>. Calls made with
Text Part 4: full preparation have most of the time ended in great <strong><span style="color:green">success </span> </strong>, so please make sure you prepare well.
Text Part 5: if you would like to remind yourself of the terms and conditions, please go to the following link <a href="https://www.google.co.uk/">Bing </a>
Text Style:
Div Container Style: