Canvas Apps Controls UI

Updates to the Power Teleprompter!

 

Updates to the Power Teleprompter
Updates to the Power Teleprompter

Introduction - Power Teleprompter

I recently shared a teleprompter that I built using Power Apps and shared it with the community. Got some good feedback and suggestions that I wanted to try to incorporate into the app. Read on to know more about these updates! The original version of the teleprompter can be found here.

Update 1 - Scrolling Text

The first feedback was from my friend Emmanuel GALLIS (Twitter, LinkedIn, Power Apps forums). His suggestion, in his own words, was "...right at the start, the text should start in the middle of the screen so the reader has enough time to read the first lines...".

This was a pretty easy one to incorporate and is probably something that should have been in version 1 itself. All I had to do was to change the Y position of the label displaying the text to start from middle of the screen instead of 0. This is how it looks now:

Updated scrolling start position
Updated scrolling start position

Update 2 - Teleprompter Mirror Mode

Carsten Groth (Twitter, LinkedIn) has been very supportive of my work. When I shared the teleprompter, he tagged a fellow Business Applications MVP Tomislav Karafilov (Twitter, LinkedIn). His feedback was to add a "mirror/glass" mode that would create a mirror image of the text to work like how some real teleprompters do. Seemed impossible at first but then I made some fundamental changes:

  • Instead of using a label to display the scrolling text, I decided to use a HTML text control so I could use some kind of CSS to flip the text
  • I then found the following HTML tag that does the trick: <bdo dir="rtl">"Your text here"</bdo>

I was using a text input control for users to input the text they wanted to see on the teleprompter. So the only challenge remaining was to convert the text entered by a user into HTML text. My initial thought was to simply add a button to launch one of the many free online text to html text converter websites. The user could then paste their text, convert it into html on the website and then paste back the html text into the app. But something about it didn't seem right. The fact that we had to rely on something outside of the Power Platform didn't seem correct. That's when one of my coworkers from Hitachi Solutions Europe, Jürgen Tomaszewski (Twitter, LinkedIn) suggested me to use a rich text editor as the input control instead of a text input control. This was an awesome idea since I could now use RichTextEditor.HtmlText to convert the text entered by users into html text! Voila! And that was the last missing piece of the puzzle!

This is how the new mirror mode looks like:

Teleprompter mirror mode!
Teleprompter mirror mode!

Note

One change worth noting is that changes in the parameters like font size, line height etc. are not reflected instantly as they used to in the 1st version. This was needed so I could still allow users to type in text without worrying about converting it into html. I then take that text and convert it into html based on the parameters selected by the user. So once you have typed in your text and selected the various parameter values, you can click on the Preview button to see how the teleprompter text will look like. Once it meets your needs, you can close the preview and start the teleprompter.

So hope this update makes the teleprompter even more useful for you all!

Power Teleprompter v2 app sample

Two versions (MSAPP file, and ZIP package for import) of this app are shared here.

Recent articles

  1. Lookup users the right way in Power Apps!
  2. Get rid of the back button in Power Apps studio!
  3. How to deep link into Teams from Power Apps

3 thoughts on “Updates to the Power Teleprompter!”

Leave a Reply