This may be a little simple but being new to coding, it is becoming a little overwhelming since I am having trouble finding clear details for my specific situation. I have created a membership database with a lot of member details. It is separate from the logged-in private user database because not all our members will go online to create a logged in user profile, and we must have a roster of active member details.
I have an Add Member form page that allows us to add new members to the database, and it works well. Now I am working on an Update Member form page for when we need to modify details. I have a drop-down selection that lists all the members’ full names based on the dataset created. We need to be able to select the name in the drop-down and then let it pull all that member’s details into the 39 different user input boxes of the form. This way we can then edit what we need and then push the update button to modify the record.
Most of everything I have found so far is related to member pages where the information is based on the member being logged in and updating their own info. This unfortunately is not what we need.
In addition to the drop-down list, I have added a Read & Write dataset for the database, and I have linked all the 39 input fields to the designated fields from the database. Based on what I have found, I think I need to have either an onChange event set up for the drop-down or a data query however I am stuck at figuring out what exactly is needed to auto-fill the input boxes.
Any help would be appreciated. Thanks!
Chad,
There are several ways to go about this. Here is some code that uses setFilter on a dataset. “Event.target.value”, in case you were wondering, is the value of the dropdown that was populated with the value of the fullName field.
export function dropdown1_change(event) {
$w('#Members').setFilter(wixData.filter()
.eq("fullName", event.target.value)
)
.then(() => {
console.log("Dataset is now filtered on " + event.target.value);
})
.catch((err) => {
console.log(err);
});
}
This approach requires that you use some other way of populating the dropdown other than the dataset that populates all of the input fields. Otherwise, when the filter is set to one member, the dropdown would then only have that member in it too. Since you are new to coding, simply add another members dataset to the page and call it MembersDropdown. It would be read-only, and it’s only purpose is to supply the names for the dropdown. To configure the dropdown, you only need to make choices in the “Connect a List” portion.
You may have some issues if you already have validation in place for the form, but there are ways of dealing with that.
Thank you Anthony. This is helping a lot especially with my understanding of code. So far, I got it partially working. I did create a 2nd dataset connected to my database specifically for the drop down list as you suggested. I added the code above and modified the naming parameters to match my data:
export function SelectMember_change(event) {
$w(‘#MembersAll’).setFilter(wixData.filter()
.eq(“fullName”, event.target.value)
)
.then(() => {
console.log("Dataset is now filtered on " + event.target.value);
})
.catch((err) => {
console.log(err);
});
}
Now I am running into an issue where only some of the data from the database is being retrieved / filtered to the input boxes when I select a name from the drop down. Some names selected will return the values as expected but then some will not and the input boxes will just grey out.
I checked the developer console for each change and it only showed that the data filter was applied successfully for each name selected with no errors. I also looked through my database entries and there was nothing in common between those names attempted that did not show up.
Your troubleshooting sounds right on. Still, the fact that some are not showing up with inputs “greyed out” points to some difference in the data for those.
Unfortunately, the setFilter function does not return a result that can be evaluated like many of the database functions do. In fact, testing this further, the fact that it gets to the “then” clause does not mean that it filtered it on a valid criteria. When I put in a bogus field name, and everything gets greyed out, it still says it filtered it on that individual. So, my bad. You might as well simplify it with the following code:
export function SelectMember_change(event) {
$w('#MembersAll').setFilter(wixData.filter()
.eq("fullName", event.target.value)
);
}
Back to the issue at hand regarding why some are not showing up. Would it be possible for you to share a screen shot of your collection. Maybe another set of eyes on it can spot what the issue is.
Thank you for the continued help on this. As an additional troubleshooting step (and one that I will probably keep for user ease) to narrow down anything out of the ordinary, I changed the form just slightly where the drop down of members’ full names remains but now requires pushing a button to retrieve the file. In addition to this, I added an additional line of code to my clear selected member button that I originally had to make sure any filtered name in the dataset that was chosen would be reset back to default / no filter. I was just making sure that the filter was not the problem. Unfortunately though, that was not the problem but at least it ruled it out I think. Here are some images of the different components.
Here is the start of the form with the drop down and buttons. I cannot get a screen shot of everything because of how big it is but it shows the first area that involves the naming parameters that are used for searching the database.
Here is the modified code (highlighted in yellow) related to the drop down and buttons.
Here is a small section of the database which has over 500 entries. The 2 highlighted in yellow are just 2 examples of the ones that return nothing and grey out the input boxes. The Full Name field is actually filled in using an afterQuery Hook. The code used for that is just below this.
Again, thank you for the help and hopefully maybe someone else will see something that could be the problem.
When testing this, I too am receiving inconsistent results on fullName data that passes the eyeball test. I wondered if having trimmed the concatenation in some cases and not others may be the cause. In other words, it can matter whether or not data is written with trailing spaces on the last name. However, I could not find any pattern with that and continued to receive seemingly random results with the setFilter command.
So, I decided to populate the dropdown through code and make the _id field the value and the fullName field the label for the dropdown list. The _id field always has 36 characters and there won’t be any issue with trailing spaces and so on. This does consistently filter the form data.
export function PopulateMembersDropdown(){
wixData.query("Members_All")
.limit(1000)
.ascending("lastName")
.find()
.then((results) => {
if(results.items.length > 0) {
//create array to house members and their IDs
let aMembers = [], item = '';
for (var i = 0; i < results.items.length; i++) {
item = results.items[i];
aMembers.push({ label: item.fullName, value:item._id});
}
$w('#SelectMember').options = aMembers;
}
});
}
export function RetrieveInfo_click(event) {
$w('#MembersAll').setFilter(wixData.filter()
.eq("_id",event.target.value)
);
}
@tony-brunsman Hmmm, I tried using the code above and I am not getting any results. At first, the drop down was still connected to the additional dataset as we had originally discussed previously but the retrieve button would not load any data for any record. From what I did understand about the populate code above, I thought that maybe I needed to remove the dataset connection from the drop down field and only allow the code to supply the drop down selections.
However, that does not seem to be the case either. Without the dataset connection, there is nothing in the drop down. When I inspected my database, the ID field was originally hidden from view. Though I did not think that would impact a background code, I went ahead and tried making it visible as well but still get nothing. I liked the idea of using the ID since every row in the database will always have a unique ID.
@stiger1177 Right, totally remove the dataset connection from data or lists like the following:
Is it returning any data? You can put a console.log(results) line right after the then statement in order to check it.
Check that I have the collection name and sort field spelled right and in the proper case. I ran the code on my collection to test it, and then changed the names when I posted the above message.
I checked the database collection name, the field name, and the dataset name. They were all correct but just in case, I retyped them as well. I am still getting nothing. The drop down does not even open up with anything. I tried adding a error log but I may not be doing it correctly since I keep getting a parsing error.
Well, after searching around some more, I did come across a post where a Wix mod had suggested a code to someone that was a little similar but his code had been placed within the onReady function. For the sake of it, I tried moving it to the onReady as well… and the drop down is now working and displaying the names again. However, I am back to trying to get the retrieve button working to pull the record via the _id into the form because it is not responding when pressed.
Sorry Chad, I left out a pretty vital point: that you should call that in the onReady function for the page. That’s what I had done while testing it. I composed that message in a hurry unfortunately.
I’m glad that you have the dropdown working.
@tony-brunsman No problem. Happily that is one down and now just go to figure out the retrieve button issue next. Because it is an onClick event… that does not go into the onReady field, correct?
@stiger1177 Right, no need to put the retrieve button code in the onReady.
Finally… I found some additional info in the forum that helped me figure out an alternate onClick code I could try to help filter the data. I am excited to say that it is all working now and showing all the records when retrieved. Thank you so much Anthony. Though there is still a lot for me to learn, each step of our trial and error has helped me understand a little more about each of the components (of course, some steps in the codes are still a little confusing). And because I am using a read/write dataset, it looks like I do not have to come up with a coded update button for when we make modifications to a member’s record.
I do have 2 final questions for the codes though. I noticed that the onReady code had a limit of 1000. Is this a maximum limit for the number of records retrieved? Could this be increased? I am wondering in case we eventually get closer to that total number. Right now, there are over 500 records combining both Active and Inactive members.
If this is a hard ceiling in the limit, then I wonder if I should include another drop down filter first to select between either Active or Inactive (there is a field in the database that designates this status) and then let it show only those type of members in the drop down list. I think this would be a cascading filter. If this is the case, how hard would it be to modify the code? I know the first drop down would only have those 2 written values with no links needed.
Here is the final code for the current setup where only 1 filter (drop down list of names based on ID field):
import wixData from ‘wix-data’;
$w.onReady( function () {
//TODO: write your page related code here…
wixData.query(“Members_All”)
.limit(1000)
.ascending(“lastName”)
.find()
.then((results) => {
if (results.items.length > 0) {
//create array to house members and their IDs
let aMembers = ,
item = ‘’;
for ( var i = 0; i < results.items.length; i++) {
item = results.items[i];
aMembers.push({ label: item.fullName, value: item._id });
}
$w(‘#SelectMember’).options = aMembers;
}
});
});
export function RetrieveInfo_click(event) {
let value = $w(“#SelectMember”).value;
let filter = wixData.filter();
$w(“#MembersAll”).setFilter(
filter.eq(“_id”, value)
);
}
The maximum is 1000 according to the documentation .
No problem with implementing what you want here. You would simply add a condition in the query:
wixData.query("Members_All")
.limit(1000)
.eq("status",$w(#Status).value)
.ascending("lastName")
.find()
.then((results) => { ...
Earlier, I tried adding the dropdown-populating code to the onMouseIn event of the dropdown. In other words, the dropdown list, with this approach, does not get filled until the user’s mouse hovers over the dropdown. For the 150 records added to the dropdown, it worked fine. For over 500 records, it should also load quickly enough to work. However, you will have to decide just how easy it is to find a name in the dropdown list when there’s that many in it. By the way, when the list is showing, typing the first letter of a name goes to the next one in the list that starts with that name. If that was used, the user may prefer the names to be in last name order instead of being in full name order.
I’m sure that your status dropdown name and/or the field name has a different name than the ones I use in the code block above. So, to make the above work, the onMouseIn function is the place to put the code because then you know whether the user chose “Active” or “Inactive”. Of course, that means the onReady code should be removed since it’s being handled in the onMouseIn.
The onMouseIn function was being finicky and extremely delayed for me when updating for some reason. There was something odd happening too where it would return the results for the opposite status (Choosing active would give inactive members and vice verse). Really strange. I tried the onChange function instead with the exact same code and it is now working great. There is very little delay in the query change and it is moving smoothly. I always want to try to somewhat “future-proof” things the best that I can to help minimize issues down the road. Obviously things can happen though. This will at least help since it will be awhile before hitting the 1000 mark for each type of status. Thank you so much for all the help.
In case others have a similar situation, here is the final code used:
First drop down list had basic status values of Active / Inactive. It would then have an onChange event added to populate the 2nd drop down list:
export function Status_change(event) {
//Add your code for this event here:
wixData.query(“Members_All”)
.limit(1000)
.eq(“memberStatus”, $w(‘#Status’).value)
.ascending(“lastName”)
.find()
.then((results) => {
if (results.items.length > 0) {
//create array to house members and their IDs
let aMembers = [],
item = ‘’;
for (var i = 0; i < results.items.length; i++) {
item = results.items[i];
aMembers.push({ label: item.fullName, value: item._id });
}
$w(‘#SelectMember’).options = aMembers;
}
});
}
Then a retrieve button was created with the following onClick event code:
export function RetrieveInfo_click(event) {
let value = $w(“#SelectMember”).value;
let filter = wixData.filter();
$w(“#MembersAll”).setFilter(
filter.eq(“_id”, value)
);
}
