In this blog post, I will show you a trick that you can follow to create a good user experience for your end users in a Canvas App by auto-incrementing the height of controls that do not support "Auto Height" property. This will enable Power Platform Developers to enhance the intuitiveness of the application built on Canvas Apps.
Problem Statement
How to increase height of input controls based on the values entered by the users dynamically? How to auto-set height of controls based on data inside them? How to add responsiveness to your Canvas App?
Solution
There are a number of controls which exists out of the box in Canvas App Studio editor. Some of the controls have a property to control the automatic height like label and HTMLText.
In order to apply the same behavior on other controls like TextInput, RichTextEditor controls, you can follow the steps below. We are going to use RichTextEditor control as an example to increase the height based on the content added by users dynamically.
Note: The first decision is from the perspective of design. E.g. RichTextEditor control returns HTML as an output, if I try to use Label control for this requirement, the height of Label control will be different from the actual text, because RichTextEditor control return HTML which is not going to be of the same height. In this scenario, an HTML control will be the best option as it accepts HTML and shows it in the form of the actual text along with the formatting.
Step 1: Add the control which is going to work as the backend control. As per out example it is the HTML control.
Step 2: Add the same value for X and Width coordinate of the HTML text control as the RichTextEditor control.
Step 3: Set the Auto-height property of the control to true.
Step 4: Move the HTML control behind the Rich Text Editor control. You can use Reorder(Bring to Front, Bring Forward, Send Backward, Sent to Back) option to achieve this.
Step 5: Set the Height property of the RichTextEditor control as:
Max(200,HTMLTextControlName.Height + 120)Explanation: We are setting a minimum height here, which is 200. If there is no data, the control will have a height of 200. If the height of content and Top Menu bar(especially for rich text editor) is greater than 200, then it will be taken into account.
Here, 120 is added to height of the HTML Text, to support the header of Rich Text Control. You can increase or decrease this value based on the requirement.
You can test the configuration now, the height of rich text editor will be increased on the basis of its content. You can add this kind of configuration on a scrollable screen or a Form control, because there is a fixed height of Standard screen size.
Note: If this is something that you are going to use on multiple places, then I would recommended adding it as a Canvas Component.
This process can be followed to apply auto-height on other controls which does not support auto-height OOTB in Canvas Apps.
DEMO
In this post we saw how to use expressions to set the height of controls based on the content which is inside the control. This will help developers to design the canvas app in a more user-friendly way where there is no scroll bar to see the content.
I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika.