The marquee element allows you to highlight important information by scrolling the content horizontally. Users can see the latest information without missing anything thanks to this constantly moving content. It is especially used for announcements, campaigns, or financial data.

Areas of Use

• Currency and cryptocurrency rates,
• Financial indicators (stock index, gold price, etc.),
• Campaign and announcement texts,
• News headlines, etc.

The marquee element is supported in web applications.

Currency Rates Scenario

In a financial application, real-time currency rates are displayed to the user using marquee. Currencies such as USD, EUR, GBP, JPY scroll horizontally. The user sees all rates without waiting for the screen.

Connecting the Data Source

1. Go to the Datasources module.
2. Click the + icon next to the Tables heading and name the table ExchangeRates.
3. Create the following table.

4. Then click SQL Actions and name the action ExchangeRates. You can also create it with C#.
5. Enter the following SQL command.

SELECT ‘USD’ AS Currency, ‘$’ AS Symbol, 35.77 AS RateUNION ALLSELECT ‘EUR’, ‘€’, 37.30UNION ALLSELECT ‘GBP’, ‘£’, 44.50UNION ALLSELECT ‘JPY’, ‘¥’, 0.25;

UI Design Module Operations

1. Add the Marquee element in the UI Design module.
2. Add Flex Grid + Label inside it and link the currency, symbol, and value.
3. Connect the data source from the Properties panel:
   
   • Datasource → ExchangeRates
4. Click the Add Action button on the right side of the application screen.
5. Then select Custom > ExchangeRates.

Using Properties in a Scenario Context

• Speed → Adjust the scrolling speed of currency information.
• Auto Fill → Ensures seamless flow between rates.
• Pause On Hover → Scrolling stops when the user hovers over “EUR 37.30 ₺”.
• Pause On Click → Scrolling stops when the user clicks on one of the rates.
• Gradient Color → Sets the shadow color on the right/left edges (e.g., #f5f5f5).
• Gradient Width → Adjusts the shadow thickness (e.g., 20px).

Properties to Configure in Flex Grid

• Datasource → Selects the source of the data to be displayed. Connects to the ExchangeRates table.
• No Data Found Message → Displays a message when no exchange rate is found in the data source. Example: “No current exchange rate information found.”
• Show No Data Found Image → Displays a backup image when no data is available. Finance icons or a simple image such as “no-data.png” can be added.
• Grid Layout (Flexibility) → Exchange rates are arranged side by side. Within Flex Grid, each row is designed to contain the Currency + Symbol + Rate trio.
• Responsive Layout → On mobile devices, each row can be set to a single column, while on tablets/desktops, it can be set to 2–3 columns. On small screens, USD / EUR appear one below the other, while on large screens, they can flow side by side.

Using Marquee + Flex Grid Together

• Marquee → Manages the scrolling effect (Speed, Auto Fill, Pause On Hover, etc.).
• Flex Grid → Lists content in an organized grid structure (datasource, column settings, no-data message).

In other words, without Marquee, Flex Grid works like a static currency table. When combined with Marquee, it becomes a “scrolling currency rate band.”

When the Scenario Step is Complete

• The user sees the USD – EUR – GBP – JPY rates in a continuously scrolling strip.
• The flow stops when the cursor hovers over it, allowing the user to read the desired value more comfortably.
• Gradient effects ensure that the data fades out aesthetically at the edge of the screen.
• The same flow pattern is maintained on both mobile and web.

Limitations

• Performance: Scrolling performance may decrease when too many exchange rates or content are added.
• Readability: If the Marquee Speed is set too high, the user may not be able to read the values; if set too low, it may become boring.
• Responsive Issues: If the number of columns is not set in Flex Grid, text may overlap on small screens.
• Empty Data Risk: If the datasource is empty and a No Data Found Message or visual is not defined, the user will see a blank screen.
• Gradient Usage: If the gradient width is set too high, content may become unreadable at the edges.

Tips and Best Practices

• Marquee Speed: Set the Speed value between 2000–4000 ms → this makes it both readable and fluid.
• Auto Fill: Be sure to enable this → there will be no gaps between content, and the flow will appear continuous.
• Pause On Hover: Essential for user experience with financial data → scrolling should pause when the user hovers over it.
• Gradient Design: Choose a gradient color that matches the app's theme colors, with a width between 10–30 px.
• Flex Grid Layout: Design currency cards to be single row – side by side. Use a single column on mobile and 2–3 columns on desktop.
• Fallback Message and Image: Be sure to add “No Data Found Message” and “No Data Found Image” → this eliminates the risk of a blank screen when there is no data.
• Optimize Content: Currency icons/images should be small in size (e.g., <50 KB SVG or PNG) → this maintains performance.