Populating a dropdown from a calculated field (Hook)

Ask the community
, ,
1

Hi

does anyone know how to populate a drop down box from a calculated field generated by a hook?

Example: i have a hook running that takes the first and last name of members and joins them as a full name which is working fine.

However in a form i have i want my drop down box to populate from this full name field but you can’t connect it via the six way as you cannot see the calculated fields in the datasets.

I’m pretty good at working with calculated fields to generate in a normal text box in my form but i cannot seem to get the drop down to work. here’s the code I’m using right now hoping that it would use drop down to show full names then once selected put the associated email address of that member into my text box.

$w.onReady( function () {
$w(“#dietsDataset”).onAfterSave(sendFormData);
$w(“#memberProfile5”).onReady(() => {
populateCalculatedFields();
} );
$w(“#memberProfile5”).onCurrentIndexChanged( (index) => {
populateCalculatedFields();
} );
} );
function populateCalculatedFields() {
const currentItem = $w(“#memberProfile5”).getCurrentItem();
$w(“#fullName”).value = currentItem.fullName;
}

export function fullName_change(){
if ($w(“#emailAddress”).collapsed) {
$w(“#emailAddress”).expand();
}
let dropdownvalue = $w(‘#fullName’).value;
$w(‘#memberProfileemaill’).setFilter(wixData.filter().eq(“fullName”, dropdownvalue))
$w(‘#memberProfilefirstname’).setFilter(wixData.filter().eq(“fullName”, dropdownvalue))
}

hoping someone can help.

2

Bump anyone know how to do this?

3

Hi Fraser,

It looks like your onReady needs to be restructured a bit. Effectively, as it stands now, populateCalculatedFields can only fire in the onAfterSave function because of the way you have your function calls “wrapped”. I don’t think that’s your intention. You need to move the following line down and close it off properly and not have any other function calls wrapped inside of it.

$w(" #dietsDataset ").onAfterSave(sendFormData);

4

@tony-brunsman this seems to work

import wixData from ‘wix-data’;

//On clickj event on the drop doen button
export function longNamedropdown_click(event) {
fullNamedropdown()
}

//Fullname calculated field in the MemberProfile5 database, this is the code to create a unique drop down list.
function fullNamedropdown() {
wixData.query(“MemberProfile5”)
.limit(1000)
.ascending(“fullName”)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#longNamedropdown”).options = buildOptions(uniqueTitles);
});
//Maps unique items from “fullName” column which is a hook calculated field
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.fullName);
return [… new Set(titlesOnly)];
}
//Builds the drop down list from unique values using current labels and titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}