Display specific record for a text field.

Ask the community
, ,
1

Hi there,

I’ve been struggling to get my head around doing this after hours of research and in theory it’s quite simple; all I need to do is display data from a specific record in a database - in this case, the ‘desksAvailable’ for each ‘roomID’.

Below is some sample data from the database.


and here is an example of where the data from each record will be applied (for a simple hotdesk booking system):

749×518 22.3 KB

I’ve tried using the “Connect to Data” feature and pieces of code I found from forums for each [no of desks] text field, but that only showed the ‘desksAvailable’ value for the first roomID (as expected).

The room title in each box e.g. “Room 1” will remain static but the “Book Desk” buttons will be specific to each room.

If possible, I’d also like to create a condition where if there are no desks available for a room, the box background color turns red and hides the “Book Desk” button.

I’m used to doing this sort of thing in PHP, but not JS/Wix Code.

Any guidance would be greatly appreciated!

2

Hey James,

Welcome to the Wix Code forums. You’ll love the transition from PHP to Wix Code - believe me!

Using a Repeater is perfect for what you’re trying to do. You can read the article About Repeaters for a general overview and Displaying Dynamic Content in a Repeater for more details.

There is a nice video on How to use repeaters in Wix Code by Andreas Kviby from Wix Show , and another video, How to use Repeater on Wix Code from Nayeli at Totally Codable . For details on using a repeater in your code, look at the $w.Repeater API docs.

Have fun,

Yisrael

3

Hi Yisrael,

The repeater worked perfectly, thanks! - even got the “Book Desk” buttons to disappear when no desks are available.

For those wondering:

I created a repeater and removed the default template and then created a single box with all the necessary elements inside e.g. Room title, no. of desks available, “Book Desk” button.

I then connected the repeater to the dataset, then connected each element inside the box to the appropriate field in the dataset i.e [no of desks] => desksAvailable.

After clicking preview, more boxes were automatically added based on the number of records in the dataset (i.e the number of rooms) with the template design I created and had the correct info in each box for each room.

Here is the code I used to make the “Book Desk” button disappear if no desks are available.

//Hide "Book Desk" button if no desks are available 
$w("#hotdeskRepeater").onItemReady( ($w, itemData, index) => { 
if(itemData.desksAvailable != "0") { 	// If the number of desksAvailable is NOT 0 
    $w("#bookdeskButton").show();		// Then show the "Book Desk" button 
   
} 
else {      
    $w("#bookdeskButton").hide();		//Else hide the button 
}

});

Sorted!

4

Yay! Great job! And glad I was able to help.