Join the Webstudio community

Updated 2 months ago

CMS not displaying correct data

At a glance

The community member is creating a page with projects using Baserow CMS, and the project directory is displaying correctly. However, the data within the pages are all showing the data from item [0]. The community member has tried looking at the Baserow template but cannot figure it out. Other community members suggest that the issue is that the community member is requesting all Baserow items regardless of the current slug, and this needs to be modified to filter the records by the current slug. One community member provides a link to a video that covers this issue.

The community member also asks for help with adding pagination to the project page, so they can navigate to the next slug in the Baserow database. The community member has tried various approaches but is still unable to get it working. Another community member suggests that the community member needs to bind the HTML embed to an expression and wrap the entire expression with backticks, but also notes that referencing a variable within a variable is not possible outside of the Resources section.

Useful resources
Hiya, I'm fairly new to this so probably missing something obvious. I'm creating a page with a bunch of projects using Baserow CMS, the project directory is displaying correctly. I've linked the links to go to the correct slug and they are going to the right pages but the data within the pages are all showing the data from item [0]? I've gone back and forth looking at the baserow template but can't figure it out - can someone help! Many thanks 🙌 https://p-6dd5d5c9-aac4-45f2-babf-03251371e000.apps.webstudio.is/?authToken=b52d90ec-6bb6-4cdb-af0c-ee9337962182&mode=preview
Attachments
Screenshot_2024-11-28_at_11.44.21.png
Screenshot_2024-11-28_at_11.44.11.png
Screenshot_2024-11-28_at_11.43.40.png
J
S
13 comments
Hey problem is you are requesting all baserow items no matter the current slug
Attachment
image.png
this needs to be modified to filter your records by the current slug
somewhere around here i go over it but id watch the whole video https://youtu.be/oAaGTsHt-aE?si=LYPMkMWHGXuDq_Dn&t=1522
Ahh thank you @John Siciliano , super helpful. You're a star! ⭐
@John Siciliano If I can please pick your brain for another quick one? 😅 I'm trying to add pagination to the project page so you can press "next" and it takes you to the next slug in baserow database. I've read your unooficial guide to expressions and I've tried a few things below but nothing quite working right - any tips here?
'/project/' + Baserowdata.data.results[0 + 1]["field_3041588]

'/project/' + Baserowdata.data.results[currentIndex + 1]["field_3041588"]

Baserowdata.data.results[0]["field_3041588"] + 1

'/project/'${ +(system.search.page || 1) + 1 }
Where in the project is it? Easier for me to understand it there
Hey @John Siciliano Sorry I should have said - its in any directory item page. I have a back and next button to navigate between projects but can't figure it out! https://p-6dd5d5c9-aac4-45f2-babf-03251371e000.apps.webstudio.is/?authToken=fbaffa53-b444-49ca-8ae5-0c2c76be6549&mode=preview Thanks
You don't need the quotes inside backticks. That'll at least get the linking working properly
Attachment
Screenshot_2024-12-07_at_10.34.12_AM.png
With quotes its outputting like this which is how I found it
Attachment
Screenshot_2024-12-07_at_10.34.39_AM.png
So i've been trying to get this to work for so long now but totally stumped! 🤯

I’m trying to use an HTML embed to dynamically generate “Next” and “Previous” buttons for navigating through items in a dataset (allProjects). The dataset is connected to Webstudio as a Resource data variable, and it fetches data from an external API (Baserow). The data variable works when previewed in the Webstudio Data Viewer, and the data structure looks correct.

You can see the html embed on the share link to see what i'm trying here https://p-6dd5d5c9-aac4-45f2-babf-03251371e000.apps.webstudio.is/?authToken=d71a77f5-fcca-49c6-8fa1-cd4ef6645f0b&mode=preview

I keep getting the following error in the browser console:
Uncaught ReferenceError: $ws$dataSource$allProjects is not defined

What I’ve Tried:
  1. I verified that allProjects is set up as a data variable in Webstudio and fetches the correct data when tested in the Data Viewer.
  2. I tried using $ws$dataSource$allProjects directly in the embed but it isn’t recognized.
  3. I also confirmed that the variable is scoped for the page and not local to another component.
My Qs:
  1. How can I correctly reference Webstudio data variables (like allProjects and currentSlug) in an HTML embed?
  2. Is there a specific way to make $ws$dataSource variables accessible within embedded scripts?
  3. If this approach isn’t viable, what would you recommend for passing data variables into an HTML embed?
You need to bind your html embed to an expression and wrap the entire expression with backticks
You can't do this though. This is referencing a variable within a variable. Only place that's possible is within Resources. All good though you can just reference this one from system var
Attachment
Screenshot_2024-12-09_at_6.14.50_PM.png
Add a reply
Sign up and join the conversation on Discord