Blog

Text - How to display text with striked/crossed out formatting

Do you need to display crossed-out text in Power Apps? If so, this post walks through an example of how to carry out this task with the HTML text control.

App builders may encounter scenarios where they need to display crossed-out text, or text that's formatted with a struckthrough font. A typical use case scenario is implementing a 'to do' list. The answer is to use an HTML control to apply this formatting.

This post highlights how to apply this technique by creating a gallery of items. Against each item is a checkbox control. When the user checks the checkbox, the corresponding text will struck out.

Introduction - how to strike out text with HTML

The key to this technique is to use the HTML control and enclose the target with the <s> tag, as shown below.

"<s>This is the text to stikeout</s>"

At runtime, the text will appear struckout as shown beneath:


Walkthrough - How to strike out gallery text based on a checkbox value

To demonstrate, we'll build the following collection (colTodo) and use it as the data source for a gallery control.



Within the template item of the gallery, we add a checkbox control (chkDone) and an HTML Text control. We set the HtmlText property of this control to the following.

If(chkDone.Value, 
   "<s>" & ThisItem.Task & "</s>", 
   ThisItem.Task
)

The design time view looks like this:


We can now run the app and check the items in the gallery. The checked items will now appear struck out, as shown below.


Conclusion

This article described how to use the HTML control to strikethrough text in Power Apps. To demonstrate, we created a gallery with a checkbox against each row and configured the app to display the corresponding text with struck-out formatting.
  •   Categories: 
  • html
Previous
Next
Related posts