Create Marquee Scrollable Text in Power Apps

Enhance User Engagement with Dynamic Scrolling Text in Power Apps

Effectively communicating important announcements, notifications, and alerts within your Power Apps can significantly boost user engagement and ensure critical information is seen. One visually appealing and common method for achieving this is through a Marquee Scrollable Text effect, where text continuously moves across the screen, capturing attention.

What is Marquee Text?

Marquee text is a design element where text scrolls continuously across a display. It's particularly useful for:

• Company announcements
• System maintenance alerts
• Dashboard notifications
• Promotional messages
• In-app instructions

Implementing Marquee Text in Power Apps: A Step-by-Step Guide

Creating this effect in Power Apps is straightforward and involves combining a Label control with a Timer control.

Step 1: Add a Label Control

First, add a Label control to your Power App screen. This label will display the scrolling text.

• Text Property: Set this to your desired announcement or message. For example: "Welcome to CRMONCE! Stay updated with the latest Power Apps and Dynamics 365 tips."
• Name: Rename the label to something descriptive, like lblMarquee.

Step 2: Add a Timer Control

Next, insert a Timer control onto your screen. This control will drive the animation.

• Duration: Set this to a value that controls the speed of the scroll. A lower number means faster scrolling. For instance, try 50 milliseconds.
• Repeat: Set to true so the timer continuously restarts.
• AutoStart: Set to true to begin the scrolling as soon as the app loads.
• Visible: Set to false to hide the timer control from the user's view.

Step 3: Initialize a Variable for Position

We need a variable to track the horizontal position of our label. Initialize this variable in the OnStart property of your App object or within the OnVisible property of the screen where the marquee is located.

• Formula: Set(varXPosition, App.Width). This sets the initial position of the text to the right edge of the app's width, so it starts off-screen.

Step 4: Animate the Text Movement

Now, we'll use the Timer control to update the X position of the label. Select the Timer control and set its OnTimerEnd property to the following formula:

• Formula: Set(varXPosition, If(varXPosition < -lblMarquee.Width, App.Width, varXPosition - 5)). This formula checks if the label has scrolled completely off the left side of the screen (i.e., its left edge is further left than its own width). If it has, it resets its position to the right edge of the app (App.Width). Otherwise, it moves the label 5 pixels to the left (varXPosition - 5) with each timer tick. Adjust the - 5 value to control the scrolling speed.

Step 5: Position and Style the Label

Finally, configure the X property of your lblMarquee label to use the variable we created, and apply styling as desired.

• X Property: Set this to varXPosition.
• Styling (Optional):
  • Color: Color.White
  • Fill: Color.DarkBlue
  • FontWeight: FontWeight.Bold
  • Size: 16

Benefits of Using Marquee Text

• Improved User Engagement: Dynamic text naturally draws the eye.
• Highlights Important Information: Ensures key messages are noticed.
• Modern UI Experience: Adds a polished, professional look to your app.
• Better Communication: Facilitates timely updates and announcements within the application.
• Professional Appearance: Contributes to a sophisticated application design.

Conclusion

Implementing marquee scrollable text in Power Apps is a simple yet highly effective technique. By leveraging the combination of a Label control for content and a Timer control for animation, you can create dynamic scrolling messages that keep your users informed and significantly enhance the overall user experience of your application.