Dynamically Pull Data from Collection List and Display Elsewhere on Page

Hi all,

I’ve tried to explain as best my situation and problem so anyone can assist me as easily as possible.

The situation is that I have a table of data called “Prayer Timetable

  • I have created the table by generating a grid 1 row x 12 columns.

  • And then, I filled in the values of each row dynamically via a collection list.

  • Each row of data is a separate item in the collection list.

  • There are 31 rows of data / collection list items.

  • The titles of the table (Date,Fajr, Jamaat, Sunrise etc.) are not part of the collection list, only the data values (which are times).

  • Each collection list item simply contains text field headings that match the title of each column. The values of the text field headings are the times under each column title.

What I would like help with is that I want to display the text field values (timings) on another table called “Timetable Widget” when the current date matches the value of the first column in the “Prayer Timetable” (Date).
Meaning that every day, the date on this widget should change automatically to today’s date, and the timings for each prayer to change automatically on the widget as per today’s date. So, let’s say today was the 10th January 2024, the Heading on the widget would read Wed 10 Jan and the timings for each prayer would automatically display in the widget for the 10th Jan i.e. the record for Wed 10 Jan.

I hope I have properly explained what the situation and problem is. If not, I’d be happy to clarify anything if it would help!

Thank you


Here is my public share link: Webflow - Widget Project Site
(how to access public share link)

Hi James, where are you running into problems?

The Timetable widget is simply a collection list filtered to data = today, so you will have only the one record with its times. From there you can easily pull that content and display it how you like.

Note you’ll use a slightly different layout approach here since each prayer is a row, rather than each day being a row, but the principles are exactly the same, use DIV blocks for your rows, and DIV inline-blocks for your column cells.

Hi Michael,
Thank you for taking out the time to respond.
To clarify, I mean that every day, the date on this widget should change automatically to today’s date, and the timings for each prayer to change automatically on the widget as per today’s date.

So, let’s say today was the 10th January 2024, the Heading on the widget would read Wed 10 Jan and the timings for each prayer would automatically display in the widget for the 10th Jan i.e. the record for Wed 10 Jan.

(I’ve updated the OP with above clarification)

I hope that helps

You just use a collection list filtered to today, it will show just today’s date.
I’d make sure your site’s timezone is set correctly for your audience as well.

Note I’ve never tested this to see if it updates precisely at midnight, so if you need to be especially accurate, I’d test that out. Custom code is always an option if you need to make that even more precise ( collection list filtered to 3 days - yesterday through tomorrow, but JS only shows one of the 3 depending on the user’s system clock ).

Thanks so much bud, followed your steps and found the solution.
Cheers

1 Like