Reference a relational field in a repeater

Hello,

I’ve made a repeater to display search results. The wixData.query searches DatabaseA. But in the repeater, while I want text and links to come from DatabaseA (people), I want the images to come from DatabaseB (photos). DatabaseB is related to DatabaseA via the ‘name’ reference field in DatabaseB, which draws people’s names from the ‘title’ field in DatabaseB.

How can I get and display the correct image?

Big thanks

You have to options: Both need to create 2 data sets on the page. Data set A which provides all the primary links and dataset B that provides the secondary links.

  1. Use conditions.
    if ($w(‘#input id displaying field key from first database’).value === ’name field key in second database’) {
    $w('#image input id’).value = ’photo field key in second database’;
    make sure that your field keys for the names are slightly different.
    Field Key A could be nameA
    Field Key B could be name B
    The value of the name has to equal field key B exactly.

  2. Create 2 data sets. Link the fields to database a that you want and link the fields to database b that you want. Make sure that both are managed and sorted using the name field A-Z.
    The repeater in this case can be attached to database a as long as it is sorted properly it should line up as the repeater wil also be a to z by name.

Let me know what works for you.

thanks I"ll try this and let you know…

Here is my code currently:

import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;

$w.onReady(function () {
$w(“#repeaterResults”).onItemReady(($w, dataItem, index) => {
let linkToDynamicPage = dataItem[“link-RefugeeVoices-title”];
$w(‘#buttonResults’).onClick(() => {
wixLocation.to(linkToDynamicPage);
});
});
$w(‘#repeaterResults’).onItemReady( ($w, itemData, index) => {
$w(“#buttonResults”).label = itemData.title;
});
});

export function button4_click(event, $w) {
let searchValue = $w(‘#input2’).value;
wixData.query(‘1RefugeeVoices’)
.contains(‘interviewSummary’, $w(‘#input2’).value)
.or(wixData.query(‘1RefugeeVoices’).contains(‘title’, $w(‘#input2’).value))
.or(wixData.query(‘1RefugeeVoices’).contains(‘placeOfBirth’, $w(‘#input2’).value))
.find()
.then(res => {
$w(‘#repeaterResults’).data = res.items;
$w(“#repeaterAB”).hide();
$w(“#repeaterResults”).show();
} );
}

export function button38_click(event, $w) {
$w(“#repeaterResults”).collapse();
$w(“#repeaterAB”).show();
$w(“#button38”).hide();

}


I also need to know how to put a dynamic link to the image.src element I’ll have to add to the repeater…

Many thanks!

Can I see your url? Also you can link the dynamic page by pressing the link button. If the page is set up to show the item name it should work. Remember the link button not the data set button

here’s the page URL: https://susannakleeman.wixsite.com/refugeevoices/interviewees

very unfinished. MOst of the images not up yet and I am using placeholders. I’m asking for help in the search results repeater. Search for ‘Berlin’, for example. The page already has the two datasets loaded, the second photo database filtered to show the relationship with the first database.

I agree I could set up a link button and make it go to a dynamic page but I don’t quite know how to do this and fear it might confuse users to have too many buttons…

Big thanks!

Hi,
First off, What a great site! This sounds like a tremendously important project.
I am confused at what you are trying to achieve. This looks fine. Why didn’t you include an image field in dataset A for the thumbnail? I think it would be easier for you to:

  1. Export your 2 datasets as CSVs
  2. Add an image field in your A Dataset label it “Thumbnail”
  3. Copy which ever column you wish from dataset B to populate A.
  4. Re upload A in the live dataset editor
  5. Link the image to the thumbnail field.
    if this info is coming through a form just add an upload file field to the form.

The second easiest option is the 2 datasets on one page sorted by name.

It seems like you are trying to make use of a lot of code which is not a bad thing, but wix has set up fairly easy link buttons for this kind of stuff.

I just want to make sure that you are utilizing these buttons and things correctly. Using my own database here is what you should be looking at:

This is what should pop up with your repeater. As you know, that disk stack on the right is the button used to link your repeater to Dataset A.


This is what you should see when you press the image in the repeater. Again, the disk in green is the data set you can link to. This is where B can be linked. Use this to create the link button you want as well.

When you press the disk you should be able to choose the dataset of choice. Then if you scroll down you should see this.

  1. Image source should be the field in your chosen dataset
  2. Link connects to can be any link in website. Dynamic pages are always on top and can be sourced from whatever database.

Then you can manage data sets. Click the dataset for the manage to appear.

Scroll to the end to sort.

Wix database is supposed to be coding minimal. If you still want to add conditional fields after these suggestions come back here and I’ll modify your code.

Thanks so much, you are so kind. There is nothing I want more than to avoid code but the repeater I’m referring to here is a repeater that only appears once a user has done a search. From my (limited) understanding because the repeater is constructed ‘on the fly’, populated by search results, I have to define the repeater in code, instead of connecting it to data via WIX’s (wonderful) visual interface.

I know well that the best option is no doubt to just include the thumbnail in my database of Interviewees. I’ll probably do that! I’ve tried your page dataset idea but it doesn’t seem to work: the images don’t appear (and they DO appear in the basic repeater that’s there when the page first loads, instead of this second repeater that only appears to show search results). More than anything, having got a certain way with the code I’m just curious about how to call related data. But I recognise I’m just making more work for myself!

Biggest thanks, you’ve been very helpful.

My repeater does the same thing and is connected to the dataset. You can take a look because I think you are trying to achieve a very similar thing. You can still connect your dataset and hide your repeater.
https://www.sleepyhollowtarrytownchamber.com/business-directory

This is a page, where my repeater is hidden and connected to the dataset.
https://www.sleepyhollowtarrytownchamber.com/jobs

Hidding something is unrelated to its connection to a dataset and what results come up.
It seems like filters through data input fields might also be a good way to approach it as well.
The dataset needs to get conected to the repeaters.

I definitely don’t want anyone struggling through this.

Nice site! Thanks v much. I’m going to take your first recommendation and add the thumbnail to the first database. Much easier!

Really appreciate you taking the time to talk me through this. All the best and have a great day.