add database index options

It could be very useful to be able to connect the ‘dropdown’ in the ‘user input’ options to the database as an alternative to the ‘table’ and ‘gallery’ options, functioning as an index to reach the dynamic pages.

Hi Keren,

You can do that using a bit of code.

In each collection that has dynamic pages, there is an automatic field with a link to the dynamic pages. You can see this field in the database view, and clicking on the field properties you can find this field name. Let’s call it DYNAMIC_LINK for now.

In the onReady event of the page, you can access the collection to read all the items and set them to the drop down options. In the onChange of the drop-down navigate to the dynamic page.

This will look like -

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

$w.onReady(() => {
wixData.query(‘COLLECTION’)
.find()
.then(res => {
let options = res.items.map(item => {
return {label: item.title, value: item.DYNAMIC_LINK };
});
$w(‘#DROPDOWN’).options = options;
});
});

export function DROPDOWN_onChange() {
wixLocation.to($w(‘#DROPDOWN’).value);
}

Thanks for yor reply.

I didn’t manage to get this to work
I am not so familiar with code…practically have no knowledge in js.
Hope Wix will create this function in future for designers that are not developers.
The dynamic pages are agreat feature but we need to give the customer more ways to approche the pages and filter/sort what they want to see.

The ‘table’ option is good but is not so good on the mobile
The ‘gallery’ option is missing the option ‘open link on current page’ which I find is very useful

@Yoav, I would like to try this but not making much progress:
I have a database called ‘MAPR_Students’ & a field in the d/b called ‘name’ which I would like to use as the dropdown field. My DROPDOWN has an ID of ‘selecton1’ I don’t know how to find the substitute for ‘DYNAMIC_LINK’

Here’s what my code looks like:

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

$w.onReady(() => {
wixData.query(‘MAPR_Students’)
.find()
.then(res => {
let options = res.items.map(item => {
return {label: item.title, value: item.DYNAMIC_LINK };
});
$w(‘#selection1’).options = options;
});
});

export function DROPDOWN_onChange() {
wixLocation.to($w(‘#selection1’).value);
}

This is the error dialog I get in preview
" Cannot find module ‘MAPR_Students’ from ‘public/pages’
Loading the code for the MAPR_Students (All) page. To debug this code, open lautx.js in Developer Tools.
There was an error in your script
TypeError: e is not a function "

Changed the first line of code to " import wixData from ‘wix-data’; "

And I now get this error:
“Loading the code for the MAPR_Students (All) page. To debug this code, open lautx.js in Developer Tools.
Wix code SDK error: The value parameter of item at index 0 that is passed to the options method cannot be set to the value . It must be of type string.”

BTW, it would be a good move to setup a knowledge base for questions which have an answer - like this question from Keren rather than it being buried in ‘feature Requests’ section.

Edit: I see there is a Q&A section which would be where this should go - can the topic be moved there?
This is something I would like to be able to do on my own Wix Forum - move comments to group them together into a new topic

Hay John,
the problem you face is caused because of this line -

return {label: item.title, value: item.DYNAMIC_LINK };

as you specified, you do need to replace DYNAMIC_LINK with a value - a field name that is the field, in your collection, storing a link to the dynamic page of this database item. This is the field that we auto generate for a dynamic page. You can get the field name by selecting the field in content manager, opening the field properties and coping the field name.

Thanks, Yoav - that works now - good to know these techniques!!

Edit: Oops - it seemed to work but only returns the contents of the ‘item’ field not the field I substituted for ‘dynamic-link’

What I had done instead was to use a table with pagination so students can be scrolled through & when a student row is selected, a side panel of their details appears - works great & without any code needed :slight_smile:
but I would like to be able to use this dropdown technique to select students ‘Area of Interest’ & use this to filter the table

I have it working now for displaying the ‘name’ field with this code:
return {label: item.name, value: item.name };
I use this code {label: item.interests, value: item.interests }; to return the ‘Interests’ field in the dropdown

What is ‘item’? Does that have to be replaced with something?

Hi, Sunil,
What are you trying to achieve?
Roi.