Jump to content
View in the app

A better way to browse. Learn more.
FMForums.com

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Create a news ticker

Cable
in FileMaker Pro 18

Featured Replies

I have a FileMaker solution that powers an internal "TV network". It runs over Intel Compute Sticks which have FileMaker installed on them and are connected to TVs mounted to the wall throughout the facility. A FileMaker script runs through various layouts and steps thru records on each layout. This lets us show a calendar, weather report (in a web viewer), company news, birthdays, customer feedback, employee recognition, and pictures.

I would like to add a news ticker to the solution, like you'd see on CNN scrolling across the bottom.

I have a table with the news stories in it. Since you can't run more than once script at the same time, I have a script set on the server to step through the news stories. For each story it uses "set field" to put the story in the field one letter at a time, then cuts off the left side when it gets too long. I then set the solution to open a floating document window at the bottom to display the layout that has the new field on it.

In theory, it should then appear that the story scrolls across the screen. It doesn't really work. It is jumpy and sometimes just doesn't show at all.

This is the gist of the script for the ticker:

Loop
Set Variable [$message; Value: (news story)]
Set Variable [$letter; Value: 1]

Loop
Set Field [Data::News;Right(Data::News;68) & Middle ($message; $letter; 1)]
Commit Records/Requests
Refresh Window []
Pause/Resume Script [Duration (seconds): .05]
Set variable [$letter; Value: $letter+1]
Exit Loop If [length($message) < $letter]
End Loop

Set Field [Data::News;Right(Data::News;68) & "     |     "]
Commit Records/Requests
Go to Records/Requests [(If ( Get(RecordNumber ) = Get(FoundCount);1;Get(RecordNumber ) + 1)]
End Loop

I've tried it with various pause durations, with/without the refresh, and with/sithout the first Commit. Nothing works the way I want.


Has anyone successfully implemented such a thing?

 

 

I believe a web viewer would be the ideal tool for this.

    • Thanks 1
    • Author

    Ok, that helped. I went with this code I found:

      

    "data:text/html," & "

<!DOCTYPE html>
<html>
<head>
<title>News Ticker Demo</title>
<style>
  @keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
  }
  .tcontainer{
    width: 100%;
    overflow: hidden;
  }
  .ticker-wrap {
    width: 100%;
    padding-left: 100%;
    background-color: #FFFFFF;
  }
  .ticker-move {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 30s;
  }
  .ticker-move:hover{
    animation-play-state: paused;
  }
  .ticker-item{
    display: inline-block;
    font-size: 3rem;
    padding: 0 2rem;
  }
</style>
</head>
<body>
  <div class=\"tcontainer\">
    <div class=\"ticker-wrap\">
      <div class=\"ticker-move\">
        <div class=\"ticker-item\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class=\"ticker-item\">Aliquam consequat varius consequat.</div>
        <div class=\"ticker-item\">Fusce dapibus turpis vel nisi malesuada sollicitudin.</div>
        <div class=\"ticker-item\">Pellentesque auctor molestie orci ut blandit.</div>
      </div>
    </div>
  </div>
</body>
</html>


"

    Now, what would be the best way of replacing the "latin" placeholder text with news? My problem is that there can be anywhere from 5-200 news stories to put into the ticker and that the number of stories can change during the day. At first I thought I'd just brute force it and loop thru all the news stories and put them into one text field to scroll but I'm hoping there's a more "mathy" way of doing it...

    2 hours ago, Cable said:

    what would be the best way of replacing the "latin" placeholder text with news?

    There are several options to consider. Much depends on how often you need to do this. If it's only now and then, then looping is not a bad choice, because it puts all the required logic in a script and avoids adding fields and relationships to the schema.

    Otherwise you could add a calculation field to the News table that wraps each story in a div element, and get them using either the List() function over a relationship or a summary field defined as List of [the calculation field].

    • Like 1
    • Author
    18 minutes ago, comment said:

    There are several options to consider. Much depends on how often you need to do this. If it's only now and then, then looping is not a bad choice, because it puts all the required logic in a script and avoids adding fields and relationships to the schema.

    Otherwise you could add a calculation field to the News table that wraps each story in a div element, and get them using either the List() function over a relationship or a summary field defined as List of [the calculation field].

    I'm going to try that. Attempt 1 failed but I think I was just trying to cram too much into one (I was putting all the stories in one div instead of breaking them out). Thx.

    • Author

    It worked! I also wrote a calc to tweak the speed based on the total length of news items so it will dynamically adjust as stories are added during the day. Appreciate the help.

    • 4 months later...
    • Newbies

    Hey Cable,

     

    Do you think you can share your code here.  It will really help noobs like me.

     

    Thanks a lot

    Create an account or sign in to comment

    https://fmforums.com/topic/104991-create-a-news-ticker/
    Go to topic listing

    Similar Content

    Important Information

    By using this site, you agree to our Terms of Use.

    I accept

    Configure browser push notifications
    Chrome (Android)
    1. Tap the lock icon next to the address bar.
    2. Tap Permissions → Notifications.
    3. Adjust your preference.
    Chrome (Desktop)
    1. Click the padlock icon in the address bar.
    2. Select Site settings.
    3. Find Notifications and adjust your preference.