A marquee is a dynamic element that allows you to display content—such as important announcements, real-time exchange rates, or featured promotions—in a horizontal scroll bar that moves smoothly, ensuring it doesn’t go unnoticed by users while saving screen space.
If you want to highlight important announcements, real-time exchange rates, or featured campaigns in your app in a way that users won’t miss, the most dynamic solution is to use the Marquee element. With this element, you can save screen space by having your content scroll smoothly across the screen in a horizontal strip.
First, in the Data Sources section, use the C# Functions area to create your code named DailyExchangeRate. Go to the UI Design module and use Add Action to add a Recurring Action that will retrieve exchange rates from a data source; enable the TriggerOnPageInit option so it runs when the page loads. Then, use Add Action in the pop-up window to define the action. Next, drag the Marquee element onto the page. In the Properties panel, enable the “Auto Fill” and “Pause On Hover” properties to fill the spaces in the Marquee element and allow the user to pause and examine the text when they hover over it with the mouse. Configure the “GradientColor” and “GradientWidth” settings so that the text fades out with a smooth transition from the edges.
Connect the action from the DataSource field on the right to a FlexGrid element that you’ll drag into the Marquee, and use a Panel element added inside it to convert the incoming data into card layouts. To keep it aligned on your screen, change the Width value to 200 in the Styling section. Change the background to white in the Style section. Set the Radius value to 15 in the Border section. Place a Vertical Stack inside the Panel and add Label elements to it. Set the “Field to Display” for the top Label field to “CurrencyName” and the bottom field to “Value.”
When you click the “Preview” button, you’ll see an eye-catching band where your data flows seamlessly and elegantly in a single row.
