You may want to give your site visitors the ability to search the contents of a collection and then display those results on a page. You’ll need to use some code to that.
Take a look at this Forum post and you can see how Yoav helped walkingbillboards add this functionality to their site.
Hello,
I have a dynamic page, which displayed data extracted from database, based on user input, perfectly! Now, this database also has a document field, how do I connect this data being displayed in table element with the document filed so that it can be downloaded?
The table element here is not connected with the database and is accessed and displayed through code only, as explained in varoius examples in forum.
Following is the code am using
import wixData from ‘wix-data’;
//1. The collection to be search is named ‘JudgmentNotes’.
//2. The field in the collection to be search is named ‘held’.
//3. Search button’s ID is ‘searchButton’.
//4. Table component is ‘resultsTable’
//5. Search input component’s ID is ‘searchInput’
export function searchButton_onClick(event) {
//create a variable that will hold the search value.
//get that value from the search input component.
let searchValue = $w(‘#searchInput’).value;
//build a query for the 'JudgmentNotes' collection
wixData.query('JudgmentNotes')
//add a 'contains' condition to the query.
//have the query look in the 'held' field.
//instruct it to look for the search value the user typed.
.contains('held', searchValue)
//actually run the query
.find()
//when the query returns:
.then(res =>
{
//get the items found from the result set
//place the results in a variable called 'foundItems'
let foundItems = res.items;
//now find the table component and make it display the results.
$w('#resultsTable').rows = res.items;
});
}
//-----------------------
export function partySearch_onclick(event) {
//Add your code for this event here:
//create a variable that will hold the search value.
//get that value from the search input component.
let searchValue = $w(‘#partyInput’).value;
//build a query for the 'JudgmentNotes' collection
wixData.query('JudgmentNotes')
//add a 'contains' condition to the query.
//have the query look in the 'title' field.
//instruct it to look for the search value the user typed.
.contains('title', searchValue)
//actually run the query
.find()
//when the query returns:
.then(res =>
{
//get the items found from the result set
//place the results in a variable called 'foundItems'
let foundItems = res.items;
//now find the table component and make it display the results.
$w('#resultsTable').rows = res.items;
});
}
With the ‘title’ Field Key, I need the ‘document’ Field Key connected.
Please guide, how to go about it.
Hi Anupam ,
You can’t have the doc appear as a field in the table, but you can make one of the columns link to the doc which will initiate a download.
To do this you need to define the “linkPath” property of one of your columns to be the field in your collection where you save the uploaded document.
This is the code I used to make it work on my site. In my case I have a table with only one column and set it up to display the name of the uploaded document. I made that name clickable by setting its linkPath to the doc field in my collection where the doc is saved.
This code overwrites the table and column settings in the editor, so you will need to define the properties for all your columns in the code. You can learn more about that here .
In my case I used a dataset to populate the table afterwards, but you could also use a query like you did above.
$w.onReady(function () {
$w("#table1").columns = [
{
id: "col1",
dataPath: "docName",
label: "Doc Name",
width: 100,
visible: true,
type: "string",
linkPath: "doc"
}
];
$w("#dataset1").onReady( () => {
let totalItems = $w("#dataset1").getTotalCount() - 1;
$w("#dataset1").getItems(0,totalItems).then( (result) => {
let items = result.items;
console.log(items);
$w("#table1").rows = items;
});
});
});
Hello Jeff,
Thanks for the response!
I tried the way you told, but couldn’t succeed! Seems am missing something.
I’ll be obliged if you could please help me modify my query code (shared in message above) , to get first column, i.e. ‘Party Name’ linked to another field ‘Document’
Following is the structure of dataset:
Column - Party Name; Type - Text; Field key - title
Column - Court; Type - Text
Column - Referrence; Type - Text
Column - Date; Type - Text
Column - Citation; Type - Text
Column - Held; Type - Text
Column - Document; Type - Document; Field key - document
Dataset name - JudgmentNotes
Table name - resultsTable
Thanking in anticipation.
Anupam Dubey
Hey Jeff,
Problem solved. I was making a silly mistake.
Thanks for guiding.
Jeff,
Is there a way to have one of your columns be a hyperlink? I have an idea that the table from the dataset will be websites, for this to work I will need to make it a clickable link that opens in a new browser. Do you know if code could make the fields in a column be able to be a hyperlink?
This is the code I am using.
import wixData from ‘wix-data’;
//For full API documentation, including code examples visit Velo API Reference - Wix.com
$w.onReady(function () {
//TODO: import wixData from ‘wix-data’;
});
export function searchButton_onClick(event) {
wixData.query(‘mychurch’)
.contains(‘churchName’, $w(‘#input1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
});
}
This is the table, I want the last column (store website) to be websites with clickable links
Hey Shanette,
Yup, you can do what you want pretty easily. Look at my reply to Anupam above where I describe how to set the table columns using the columns property. If you look at that reply I used the linkPath property to define where the column links to and to link it to a doc. You want to link to a URL so all you need is to have one of the fields in your collection be of type URL. Then set the linkPath of that column to be the URL field in your collection.
The code will look something like this:
$w.onReady(function () {
$w("#table1").columns = [
{
"id": "col1",
"dataPath": "url",
"label": "Link",
"width": 100,
"visible": true,
"type": "url",
"linkPath": "url"
}
];
});
Note that in the code above the dataPath is also the URL field so the column will display the URL. If you want to column to display something else, just use a different field from your collection as the dataPath.
For example, let’s say you have an item in your collection where the URL field links to facebook. The URL field will have http://facebook.com. If you use the above code then that URL will be displayed in the table. But if the same item has a “Name” field with the name of the link (Facebook) and you want to just have the word “Facebook” be the clickable link, use the “name” field as the dataPath.
-Jeff
OK I got it to work perfect - BUT only in “Preview mode” which is kinda weird. I published it and then the link isnt there if I visit the site externally… but when I preview it it works… do you know why??
Here are screenshots
Preview has the link
This is the external view… the link isnt there 
I dont know how to fix it.
import wixData from ‘wix-data’;
//For full API documentation, including code examples visit Velo API Reference - Wix.com
$w.onReady(function () {
//TODO: import wixData from ‘wix-data’;
});
export function searchButton_onClick(event) {
wixData.query(‘mychurch’)
.contains(‘churchName’, $w(‘#input1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
});
}
$w.onReady(function () {
$w(“#table1”).columns = [
{
“id”: “col1”,
“dataPath”: “churchName”,
“label”: “Name”,
“width”: 100,
“visible”: true,
“type”: “text”
} ,
{
“id”: “col2”,
“dataPath”: “pastorName”,
“label”: “Pastor Name”,
“width”: 100,
“visible”: true,
“type”: “text”
},
{
“id”: “col3”,
“dataPath”: “city”,
“label”: “City”,
“width”: 100,
“visible”: true,
“type”: “text”
},
{
“id”: “col4”,
“dataPath”: “shopNow”,
“label”: “Shop”,
“width”: 100,
“visible”: true,
“type”: “url”,
“linkPath”: “url”
} ,
];
});
Hey Shanette,
Did you sync your collections and check your permissions?
https://support.wix.com/en/article/checklist-publishing-a-site-with-collection-content
OMG!!! It works!! Im almost in tears ! Thank You sooo much!!
Thanks for all the marvellous advice 
I have a question: I want my table to appear after the user has clicked the button. I managed to ‘collapse’ it on load but i can’t for the life of me make it reappear. Any guidance would be gratefully accepted.
Hi Victoria,
In the Properties panel select the Hidden on Load checkbox. Then add a clickEvent to your button. The code in that function should look like this:
$w("#yourTable").show();
-Jeff
Thanks Jeff