I am building a Quran app in Thunkable that allows users to select a Surah from a list and dynamically display its content (e.g., verses, images) on the same screen. Each Surah’s data is stored in a separate tab of a single Google Sheet. When a user clicks on a Surah from the list, the app should know which tab to reference to pull and display the correct data.
Key Requirements:
Main Screen (List of Surahs):
- You have a List Viewer or Data Viewer List on the main screen that displays a list of Surahs fetched from a Quran List tab in your Google Sheet.
- Each Surah in this list is linked to a specific tab in the Google Sheet that contains its content (e.g., verses, images, translations).
Dynamic Data Fetching:
- When a user clicks on a Surah, the app should recognize which tab in the Google Sheet to use for data retrieval.
- Each tab in the Google Sheet contains data specific to one Surah (e.g., all the verses and related images for that Surah).
- The name or identifier of the tab for each Surah is stored in the Quran List tab in a column alongside the Surah names.
Displaying Data on the Same Screen:
- Once the user selects a Surah, the app should open a display screen where it fetches and displays the data (e.g., verses and images) from the corresponding tab.
- The user should be able to navigate through the data (e.g., using “Next” and “Previous” buttons) to view all content related to that Surah.
How This Should Work:
User Interaction:
- A user sees a list of Surahs on the main screen.
- When a user clicks on a Surah, the app retrieves the tab name associated with that Surah.
Data Retrieval:
- The app uses this tab name to access the correct tab in the Google Sheet and fetches the Surah’s data (e.g., images, verses).
- This data is then stored in a variable to be displayed on the screen.
Displaying Content:
- The app shows the first item (e.g., verse or image) from the retrieved data.
- Users can click “Next” or “Previous” buttons to navigate through the Surah’s content without leaving the screen.
What to Ask Thunkable Experts:
Dynamic Data Source Switching:
- How can Thunkable handle dynamic switching between different tabs of a Google Sheet based on user input?
Data Viewer List Integration:
- How to set up the List Viewer so that it can pass data (e.g., a tab identifier) to another screen and use it as a reference to fetch data from a specific tab.
Optimization Tips:
- Best practices for ensuring the app remains responsive and loads data efficiently, especially when dealing with multiple Google Sheet tabs.
Example Workflow:
- User clicks on “Surat Al-Fatiha”.
- The app sets selectedSurah to “Surat_Al-Fatiha” (matching the tab name in the Google Sheet).
- The app navigates to a new screen and fetches data from the “Surat_Al-Fatiha” tab.
- The app displays the first verse or image, with navigation buttons to move forward or backward through the content.
Original Post
Expand to see original post
i am building a Quran app in Thunkable that allows users to select a Surah from a list and dynamically display its content (e.g., verses, images) on the same screen. Each Surah’s data is stored in a separate tab of a single Google Sheet. When a user clicks on a Surah from the list, the app should know which tab to reference to pull and display the correct data.
Key Requirements:
Main Screen (List of Surahs):
You have a List Viewer or Data Viewer List on the main screen that displays a list of Surahs fetched from a Quran List tab in your Google Sheet.
Each Surah in this list is linked to a specific tab in the Google Sheet that contains its content (e.g., verses, images, translations).
Dynamic Data Fetching:
When a user clicks on a Surah, the app should recognize which tab in the Google Sheet to use for data retrieval.
Each tab in the Google Sheet contains data specific to one Surah (e.g., all the verses and related images for that Surah).
The name or identifier of the tab for each Surah is stored in the Quran List tab in a column alongside the Surah names.
Displaying Data on the Same Screen:
Once the user selects a Surah, the app should open a display screen where it fetches and displays the data (e.g., verses and images) from the corresponding tab.
The user should be able to navigate through the data (e.g., using “Next” and “Previous” buttons) to view all content related to that Surah.
How This Should Work:
User Interaction:
A user sees a list of Surahs on the main screen.
When a user clicks on a Surah, the app retrieves the tab name associated with that Surah.
Data Retrieval:
The app uses this tab name to access the correct tab in the Google Sheet and fetches the Surah’s data (e.g., images, verses).
This data is then stored in a variable to be displayed on the screen.
Displaying Content:
The app shows the first item (e.g., verse or image) from the retrieved data.
Users can click “Next” or “Previous” buttons to navigate through the Surah’s content without leaving the screen.
What to Ask Thunkable Experts:
Dynamic Data Source Switching:
How can Thunkable handle dynamic switching between different tabs of a Google Sheet based on user input?
Data Viewer List Integration:
How to set up the List Viewer so that it can pass data (e.g., a tab identifier) to another screen and use it as a reference to fetch data from a specific tab.
Optimization Tips:
Best practices for ensuring the app remains responsive and loads data efficiently, especially when dealing with multiple Google Sheet tabs.
Example Workflow:
User clicks on “Surat Al-Fatiha”.
The app sets selectedSurah to “Surat_Al-Fatiha” (matching the tab name in the Google Sheet).
The app navigates to a new screen and fetches data from the “Surat_Al-Fatiha” tab.
The app displays the first verse or image, with navigation buttons to move forward or backward through the content.