Appboard/2.4/builder/widgets/scrolling text

The Scrolling Text Widget provides a scrolling ticker for showing information in a dynamic and animated banner display. The concept of the Scrolling Text Widget is similar to the HTML "marquee" tag as demonstrated below:

<marquee behavior="scroll" direction="left">Here is an example of text presented in a scrolling Marquee</marquee>

How To Create a Scrolling Text Widget

For instructions on creating a Widget, see the general instructions in Adding Widgets. The Scrolling Text Widget type is located under the Communications category on the Widget selection screen.

How To Configure a Scrolling Text Widget

1. Follow the instructions above to create the basic "Scrolling Text" Widget.
2. Enter the following information on the Data tab:
   • Widget Type: Scrolling Text
   • Data collection: Select the name of the Data Collection that will provide the data to be displayed in the Ticker.

   Note: For convenience, buttons are provided for Adding or Editing a Data Collection.

   • Widget Name: Enter a name to display for the Widget when it is shown on a Board.
3. Enter the following information on the Visualization tab:
   • Label Field: Check the box to include this optional field. This will display a label prior to each value in the ticker display. Select the name of the field from the Data Collection that is providing these labels.
   • Value Field: Select the name of the field from the Data Collection that is providing the text to be displayed in the Ticker.
   • Color: Select the default font color to be used for the text in the Ticker. This setting applies to both the Label and Value items. The Alpha number can be adjusted to determine the color's opacity.
   • Background Color: Select the text background color to be used in the Ticker. The Alpha number can be adjusted to determine the color's opacity.
   • Value Color Filter: Click Add to create a Color Filter Rule that will determine the coloration of each scrolling text Value Field item based on application of a filter rule. The text color of the Label Field will always be the default Color selection for the Widget.
   • Speed: Use the slider to indicate how quickly to scroll the text in the display.
   • Items Shown:
     • Show Single Items: Select this option to only show one Label and Value on the screen at a time. When one Value scrolls off the Ticker, the next Value will scroll on to the Ticker.
     • Show All Items: Select this option to scroll all of the items immediately after one another. Multiple Values and Labels could potentially be displayed at the same time.
       • Separator Character: When "Show All Items" is selected, this character will be inserted after each item to distinguish it from the following item.
       • Padding: When "Show All Items" is selected, this value will control how much space is inserted between each item and the separator character.
   • Font Size: Controls the size of all of the scrolling text in the display. The font name is always AppBoard's default font (Arial)
4. Click Next to proceed to the Options tab.
5. Provide additional configuration on the Options tab. For details on the available Options, see Options.
6. Click Finish.
7. In the Builder Modes panel, select Builder and navigate to the appropriate Board to observe the new Scrolling Text Widget.

A Sample Scrolling Text Widget

Users should be notified that they can pause the text from scrolling at any time by mouse-over (moving the pointer on to the Widget area). This can be helpful if there is critical information that they need to process before it scrolls out of the display.

Notes Regarding System Performance

• The Scrolling Text Widget will use additional CPU resources on the client due to the animation.
• The "Show All Items" mode uses more CPU than the "Show Single Items" mode.
• The "Show All Items" mode should be limited to Data Collections of 50 rows or less. More than this may lead to unacceptable CPU usage and poor UI response in the Builder.

Sample Data

Perform the following steps to create a Scrolling Text Widget using sample data provided with Appboard:

1. Follow the instruction on the Sample Chart Data page to create sample Data Collections.
2. Select any of the Data Collections to use as the Data Collection for the Scrolling Text Widget.
3. Select any field in the Data Collection to use as the Text Field for the Scrolling Text Widget.