Hi Gotita,
It is possible to make it a link:
$w.onReady(() => {
const resultsTable = $w('#resultsTable');
resultsTable.columns = resultsTable.columns.map(column =>
Object.assign(column, { linkPath: 'link-FamiliesProfiles-titleListing' })
);
});
Every column in a table may have its own link. The code above links all the columns to the same page.
Although, it is possible to configure column links like that, I would suggest taking a different approach:
- Add a Dataset to the page and connect it to FamiliesProfiles.
- Connect the table to the dataset and configure columns and their links in UI. This will do all the necessary column configuration for you (in this case you don’t need the code above in $w.onReady).
- Make the table hidden on load (select it and check Hidden on Load in Properties panel — if you don’t see the panel, enable it in the Editor’s menu Tools → Properties Panel).
- Update the handler for the search button’s click:
export async function SearchBotton_onclick(event, $w) {
const { value } = $w('#SearchBox');
if (value !== '') {
await search(value);
$w('#resultsTable').show();
}
}
async function search(query) {
await $w('#dataset1').setFilter(
wixData
.filter()
.contains('location', query)
.or(wixData.filter().contains('state', query))
.or(wixData.filter().contains('city', query))
.or(wixData.filter().contains('titleListing', query))
);
$w('#resultsTable').show();
}
With a dataset you may also consider switching to repeaters instead of showing the search results in a table: https://www.wix.com/code/home/repeaters
Regarding whether to add a search page or show the search results on the directory page. I would do the following: when the search button on the directory page is clicked, go to the search page and set the search term as a query string parameter:
import wixLocation from 'wix-location';
export function submit_click(event, $w) {
const { value } = $w('#searchBox');
wixLocation.to(`/family-directory-search?q=${encodeURIComponent(value)}`);
}
On the search page, read the parameter from the query string and if it is present search immediately:
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(async () => {
const { q = '' } = wixLocation.query;
$w('#SearchBox').value = q;
const resultsTable = $w('#resultsTable');
if (q !== '') {
await search(q);
resultsTable.show();
} else {
resultsTable.hide();
}
});
export async function SearchBotton_onclick(event, $w) {
const { value } = $w('#SearchBox');
if (value !== '') {
await search(value);
$w('#resultsTable').show();
}
}
async function search(query) {
await $w('#dataset1').setFilter(
wixData
.filter()
.contains('location', query)
.or(wixData.filter().contains('state', query))
.or(wixData.filter().contains('city', query))
.or(wixData.filter().contains('titleListing', query))
);
$w('#resultsTable').show();
}
In this case your search page becomes more functional: you can either open it directly and search there or come there by initiating search from the directory page.
Regards,
Yevhen
