wixData.isReferenced Multiple Reference Field Checkbox Code Help

Ask the community
, ,
1

Hey Everyone,

I am hoping to get help with optimizing my code. I have multiple reference fields that are connected to 10 difference repeaters. Each one acts as a submission/dynamic form which a user signs up and fills out and then can go back and update.

I have a lot of redundant code (wixData.isReferenced, and wixData.queryReferenced) which is calling the network multiple times and is slowing down the page.

NOTE : it is important that the checkboxes be either inserted or replaced as they may be blank to start.

Additionally, the code doesn’t seem to capture all the checkboxes when selected. Let’s say I check every item displayed in the repeater and save, only maybe 1/3 or half of them get saved in the collection

Anyone have suggestions on how to optimize/improve?

$w.onReady(() => {
$w(“#dynamicDataset”).onReady(() => {
$w.onReady( function () {

        wixData.query("Members") 
            .eq("_owner", wixUsers.currentUser.id) 
            .find() 
            .then((results4) => {

let OwnerRegistered = results4.items;
let MemberID = OwnerRegistered[0]._id;
let MemberOwner = OwnerRegistered[0]._owner;

let Profile = $w(“#dynamicDataset”).getCurrentItem();
let ProfileID = Profile._id;

                $w("#DecorRepeater").forEachItem(($item, itemData, index) => {

let DecorCheckbox = $item(“#checkbox405”);
let DecorID = itemData._id

                    wixData.isReferenced("DesignProfile", "items", ProfileID, DecorID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
DecorCheckbox.checked = true
} else { DecorCheckbox.checked = false }
})

                    wixData.queryReferenced("DesignProfile", ProfileID, "items") 
                        .then((results11) => {

if (results11.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (DecorCheckbox.checked)
checked.push(DecorID);
wixData.replaceReferences(“DesignProfile”, “items”, ProfileID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (DecorCheckbox.checked)
checked.push(DecorID);
wixData.insertReference(“DesignProfile”, “items”, ProfileID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 

                $w("#RoomRepeater").forEachItem(($item, itemData, index) => {

let RoomsCheckbox = $item(“#checkbox406”);
let RoomsID = itemData._id

                    wixData.isReferenced("DesignProfile", "rooms", ProfileID, RoomsID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
RoomsCheckbox.checked = true
} else { RoomsCheckbox.checked = false }
})

                    wixData.queryReferenced("DesignProfile", ProfileID, "rooms") 
                        .then((results11) => {

if (results11.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (RoomsCheckbox.checked)
checked.push(RoomsID);
wixData.replaceReferences(“DesignProfile”, “rooms”, ProfileID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (RoomsCheckbox.checked)
checked.push(RoomsID);
wixData.insertReference(“DesignProfile”, “rooms”, ProfileID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 

                $w("#StyleRepeater").forEachItem(($item, itemData, index) => {

let StyleCheckbox = $item(“#checkbox407”);
let StyleID = itemData._id

                    wixData.isReferenced("DesignProfile", "style", ProfileID, StyleID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
StyleCheckbox.checked = true
} else { StyleCheckbox.checked = false }
})

                    wixData.queryReferenced("DesignProfile", ProfileID, "style") 
                        .then((results11) => {

if (results11.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (StyleCheckbox.checked)
checked.push(StyleID);
wixData.replaceReferences(“DesignProfile”, “style”, ProfileID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (StyleCheckbox.checked)
checked.push(StyleID);
wixData.insertReference(“DesignProfile”, “style”, ProfileID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 

                $w("#VibeRepeater").forEachItem(($item, itemData, index) => {

let VibeCheckbox = $item(“#checkbox408”);
let VibeID = itemData._id

                    wixData.isReferenced("DesignProfile", "vibe", ProfileID, VibeID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
VibeCheckbox.checked = true
} else { VibeCheckbox.checked = false }
})

                    wixData.queryReferenced("DesignProfile", ProfileID, "vibe") 
                        .then((results11) => {

if (results11.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (VibeCheckbox.checked)
checked.push(VibeID);
wixData.replaceReferences(“DesignProfile”, “vibe”, ProfileID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (VibeCheckbox.checked)
checked.push(VibeID);
wixData.insertReference(“DesignProfile”, “vibe”, ProfileID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 

                $w("#PriorityRepeater").forEachItem(($item, itemData, index) => {

let PrioritiesCheckbox = $item(“#checkbox409”);
let PrioritiesID = itemData._id

                    wixData.isReferenced("DesignProfile", "priorities", ProfileID, PrioritiesID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
PrioritiesCheckbox.checked = true
} else { PrioritiesCheckbox.checked = false }
})

                    wixData.queryReferenced("DesignProfile", ProfileID, "priorities") 
                        .then((results11) => {

if (results11.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (PrioritiesCheckbox.checked)
checked.push(PrioritiesID);
wixData.replaceReferences(“DesignProfile”, “priorities”, ProfileID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (PrioritiesCheckbox.checked)
checked.push(PrioritiesID);
wixData.insertReference(“DesignProfile”, “priorities”, ProfileID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 
                $w("#BaseColorRepeater").forEachItem(($item, itemData, index) => {

let BaseColorCheckbox = $item(“#checkbox403”);
let BaseColorID = itemData._id

                    wixData.isReferenced("DesignProfile", "baseColors", ProfileID, BaseColorID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
BaseColorCheckbox.checked = true
} else { BaseColorCheckbox.checked = false }
})

                    wixData.queryReferenced("DesignProfile", ProfileID, "baseColors") 
                        .then((results11) => {

if (results11.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (BaseColorCheckbox.checked)
checked.push(BaseColorID);
wixData.replaceReferences(“DesignProfile”, “baseColors”, ProfileID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (BaseColorCheckbox.checked)
checked.push(BaseColorID);
wixData.insertReference(“DesignProfile”, “baseColors”, ProfileID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 
                $w("#AccentColorRepeater").forEachItem(($item, itemData, index) => {

let AccentColorCheckbox = $item(“#checkbox404”);
let AccentColorID = itemData._id

                    wixData.isReferenced("DesignProfile", "accentColors", ProfileID, AccentColorID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
AccentColorCheckbox.checked = true
} else { AccentColorCheckbox.checked = false }
})
wixData.queryReferenced(“DesignProfile”, ProfileID, “accentColors”)
.then((results12) => {
if (results12.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (AccentColorCheckbox.checked)
checked.push(AccentColorID);
wixData.replaceReferences(“DesignProfile”, “accentColors”, ProfileID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (AccentColorCheckbox.checked)
checked.push(AccentColorID);
wixData.insertReference(“DesignProfile”, “accentColors”, ProfileID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 

                $w("#MaterialsRepeater").forEachItem(($item, itemData, index) => {

let MaterialsColorCheckbox = $item(“#checkbox411”);
let MaterialsColorID = itemData._id

                    wixData.isReferenced("DesignProfile", "materials", ProfileID, MaterialsColorID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
MaterialsColorCheckbox.checked = true
} else { MaterialsColorCheckbox.checked = false }
})
wixData.queryReferenced(“DesignProfile”, ProfileID, “materials”)
.then((results12) => {
if (results12.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (MaterialsColorCheckbox.checked)
checked.push(MaterialsColorID);
wixData.replaceReferences(“DesignProfile”, “materials”, ProfileID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (MaterialsColorCheckbox.checked)
checked.push(MaterialsColorID);
wixData.insertReference(“DesignProfile”, “materials”, ProfileID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 

                $w("#PatternsRepeater").forEachItem(($item, itemData, index) => {

let PatternsColorCheckbox = $item(“#checkbox410”);
let PatternsColorID = itemData._id

                    wixData.isReferenced("DesignProfile", "patterns", ProfileID, PatternsColorID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
PatternsColorCheckbox.checked = true
} else { PatternsColorCheckbox.checked = false }
})
wixData.queryReferenced(“DesignProfile”, ProfileID, “patterns”)
.then((results12) => {
if (results12.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (PatternsColorCheckbox.checked)
checked.push(PatternsColorID);
wixData.replaceReferences(“DesignProfile”, “patterns”, ProfileID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (PatternsColorCheckbox.checked)
checked.push(PatternsColorID);
wixData.insertReference(“DesignProfile”, “patterns”, ProfileID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 
                $w("#WhyHomeWellRepeater").forEachItem(($item, itemData, index) => {

let WhyColorCheckbox = $item(“#checkbox413”);
let WhyColorID = itemData._id

                    wixData.isReferenced("Members", "whyHomeWell", MemberID, WhyColorID).then((result3) => {

let isReferenced3 = result3;
if (isReferenced3 === true ) {
WhyColorCheckbox.checked = true
} else { WhyColorCheckbox.checked = false }
})
wixData.queryReferenced(“Members”, MemberID, “whyHomeWell”)
.then((results12) => {
if (results12.items.length > 0) {
///ON SAVE - REPLACE REFERENCES///
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (WhyColorCheckbox.checked)
checked.push(WhyColorID);
wixData.replaceReferences(“Members”, “whyHomeWell”, MemberID, checked)
.then(() => {

                                        }) 
                                        . **catch** ((error) => { 

                                        }); 
                                }); 

                            }  **else**  {

//ON SAVE - INSERT REFERENCES////
$w(‘#SaveProfile’).onClick((event, $w) => {
let checked = [];
if (WhyColorCheckbox.checked)
checked.push(WhyColorID);
wixData.insertReference(“Members”, “whyHomeWell”, MemberID, checked)
.then(() => {

                                        }) 
                                }) 
                            } 
                        }); 
                }); 
                $w("#SaveProfile").onClick((event, $w) => { 
                    $w("#SaveProfile").disable() 

                    wixLocation.to('/MyAccount/Home/' + MemberID) 

                }); 
            }); 
    }); 
});

});

@stcroppe @liran-kurtz-wix @sapirh @jenee-washington @yisrael-wix @yoav-wix @mikemoynihan99

2

[@Tarra Maxwell] Tarra can you share the published page that your code is on? Context is important to considering your question. Cheers

3

@stcroppe thanks for reaching out! This is a dynamic membership page. Please go to: https://www.dohomewell.com/ and signup - it will be “DESIGN PROFILE” link in your member toolbar header.

4

All - here are some screenshots of the form - each question/section is a different repeater which pulls items for 10 different collections (rooms, items, colors, etc)

984×555 141 KB

994×448 39.9 KB

998×456 44.4 KB

5

@tarrahopwood Hi Tarra: That helped with context. What you need to do is something called refactoring. To refactor the code you pull out anything that seems to be repeated into a function. Then use that function where the repeated code is. You adjust the way the function behaves by passing arguments that define the differences. I have refactored your code to show you a way to do this. I haven’t tested it so Caveat Emptor :wink: Hopefully you should be able to understand what I have done based on the comments I have added.

import wixLocation from 'wix-location';
import wixWindow from "wix-window";
import wixData from 'wix-data';
import wixUsers from 'wix-users';
let user = wixUsers.currentUser;
let userId = user.id;
let isLoggedIn = user.loggedIn;

// Generic collapseFold() function used to collapse a fold with a given index
function collapseFold(index) {
    $w('#fold' + index).collapse();
    $w('#arrowDown' + index).hide();
    $w('#arrowUp' + index).show();
    $w('#headBox' + index).style.backgroundColor = "#FFFFFF";
}

// Generic expandFold() function used to expand a fold with a given index
function expandFold(index) {
    $w('#fold' + index).expand();
    $w('#arrowDown' + index).show();
    $w('#arrowUp' + index).hide();
    $w('#headBox' + index).style.backgroundColor = "#CCEAEA";
}

// Loops through each fold index
// if the index argument matches then the fold is expanded
// other wise it is collapsed.
function toggleFold(index) {
 
    // update the folds
    [2, 3, 4, 5, 6, 7].forEach(idx => {
 
         // If the index matches the idx in our list we expand the fold
         // Otherwise we collapse it
         if (index === idx) {
             // Match - expand the fold using our generic expand fucntion
             expandFold(idx);
         } else {
             // No Match - collapse the fold using our generic collapse fucntion
             collapseFold(idx);
         }
    });
}

// Generic function that extracts the fold number from the clicked on target elementID
// With this value it calls toggle fold to update the UI
export function headBoxEvent(event) {
    // Get the target element id
    let id = event.target.id; // This should be headBox<number>
    let foldIndex = Number(id.replace("headBox", ""));
    toggleFold(foldIndex);
}

// All fold click handlers use the same event handler
// The event handler figures out which fold was clicked before
// Toggling them accordingly
// NOTE: the property dialogue boxes that are bound to these click functions could all
// be connected directly to the headBoxEvent function and all of these _click functions 
// can then be deleted
export function headBox2_click(event) {
    headBoxEvent(event);
}

export function headBox3_click(event) {
    headBoxEvent(event);
}

export function headBox4_click(event) {
    headBoxEvent(event);
}

export function headBox5_click(event) {
    headBoxEvent(event);
}

export function headBox6_click(event) {
    headBoxEvent(event);
}

export function headBox7_click(event) {
    headBoxEvent(event);
}

$w.onReady(() => {
    $w("#dynamicDataset").onReady(() => {
    $w.onReady(function () {

    wixData.query("Members")
    .eq("_owner", wixUsers.currentUser.id)
    .find()
    .then((results4) => {
        let OwnerRegistered = results4.items;
        let MemberID = OwnerRegistered[0]._id;
        let MemberOwner = OwnerRegistered[0]._owner;

        let Profile = $w("#dynamicDataset").getCurrentItem();
        let ProfileID = Profile._id;

        // Use a generic repeater function to load the information repeaters

        updateRepeaterElementWithCheckboxElement("DesignProfile", $w("#DecorRepeater"), "#checkbox405", "items", ProfileId);
        updateRepeaterElementWithCheckboxElement("DesignProfile", $w("#RoomRepeater"), "#checkbox406", "rooms", ProfileId);
        updateRepeaterElementWithCheckboxElement("DesignProfile", $w("#StyleRepeater"), "#checkbox407", "style", ProfileId);
        updateRepeaterElementWithCheckboxElement("DesignProfile", $w("#VibeRepeater"), "#checkbox408", "vibe", ProfileId);
        updateRepeaterElementWithCheckboxElement("DesignProfile", $w("#PriorityRepeater"), "#checkbox409", "priorities", ProfileId);
        updateRepeaterElementWithCheckboxElement("DesignProfile", $w("#BaseColorRepeater"), "#checkbox403", "baseColors", ProfileId);
        updateRepeaterElementWithCheckboxElement("DesignProfile", $w("#AccentColorRepeater"), "#checkbox404", "accentColors", ProfileId);
        updateRepeaterElementWithCheckboxElement("DesignProfile", $w("#MaterialsRepeater"), "#checkbox411", "materials", ProfileId);
        updateRepeaterElementWithCheckboxElement("Members", $w("#WhyHomeWellRepeater"), "#checkbox413", "whyHomeWell", MemberId);
        
        $w("#SaveProfile").onClick((event, $w) => {
            $w("#SaveProfile").disable();
            wixLocation.to('/MyAccount/Home/' + MemberID);
        });
    });
});


// Generic Repeater handler function. Will load the repeater element passed as an argument based on the value of the other arguments 
function updateRepeaterElementWithCheckboxElement(dataCollection, repeaterElement, checkBoxId, referenceItem, profileId) {
    // Make sure we have defined values to work with
    if (dataCollection && repeaterElement && checkBoxId && referenceItem && profileId) {    
        repeaterElement.forEachItem(($item, itemData, index) => {
            let Checkbox = $item(checkBoxId);
            let ItemID = itemData._id;
            wixData.isReferenced(dataCollection, referenceItem, profileId, ItemID).then((result3) => {
                let isReferenced3 = result3;
                if (isReferenced3 === true) {
                    Checkbox.checked = true;
                } else {
                    Checkbox.checked = false;
                }
            });
            wixData.queryReferenced(dataCollection, profileId, referenceItem)
            .then((results11) => {
                if (results11.items.length > 0) {
                    ///ON SAVE - REPLACE REFERENCES///
                    $w('#SaveProfile').onClick((event, $w) => {
                        let checked = [];
                        if (Checkbox.checked) {
                            checked.push(ItemID);
                        }
                        wixData.replaceReferences(dataCollection, referenceItem, profileId, checked)
                        .then(() => {
                        })
                        .catch((error) => {
                        });
                    });
                } else {
                    //ON SAVE - INSERT REFERENCES////
                    $w('#SaveProfile').onClick((event, $w) => {
                        let checked = [];
                        if (Checkbox.checked) {
                            checked.push(ItemID);
                        }
                        wixData.insertReference(dataCollection, referenceItem, profileId, checked)
                        .then(() => {
                        });
                    });
                }
            });
        });
    } else {
        // May want to do other error handling here
        console.log("updateRepeaterElementWithCheckboxElement: missing a value!");
    }
}

Hope this helps!

Cheers Steve
6

@stevesoftwareservice Steve thank you so much I really appreciate it! The code still functions the way i need it to in theory, however the page still takes a lot of time to load and still isn’t capturing all the checks properly. For example, i filled out every single checkbox and saved - but only about a 3rd registered and inserted into the collection - any suggestions?

7

@tarrahopwood HI there - well you have a lot going on Tarra and you have several code design challenges that go beyond the refactoring question :wink:

One area that is likely to be an issue is the way you are configuring the saveProfile handler. I helped another user with a misunderstanding over what the onXXX functions actually do. They do not execute the code you write they merely register the code for execution upon some event.

For example this code:

$w('#SaveProfile').onClick((event, $w) => {
    let checked = []; // <<<<<<<<<NOTE THIS ONLY EVER HAS ONE ITEM ADDED TO IT
    if (Checkbox.checked) {                                     |
        checked.push(ItemID); // <<<<<<<<<<<--------------------+
    }
    // If the reference already exists this may fail
    wixData.insertReference(dataCollection, referenceItem, profileId, checked)
    .then(() => {
    });
});

is NOT executed where you declare it. What it does is define a handler that gets called when the button with the ID “SaveProfile” is clicked. Now you have two places where you give a handler to call when this event is detected. This handler is essentially replaced every time the code is called as the repeater is built. This happens ten times over. So which handler is being set?

Again as you will see there is a lot of duplicated code with the minor exception of the use of insertReference instead of updateReference. So an opportunity to refactor the code exists. This is where you should ask yourself “what is the one thing I want SaveProfile to do when it is clicked?”. Then write a single function that does what you need and don’t embed it inside of a database action result :-). Handlers should ONLY be defined once, either as standalone functions hooked into the element using the property panel, OR in the $w.onReady() function as an onXXX function.

Lastly it seems that what you are trying to do is collect multiple reference items into an array called checked and save the collected items when the button is clicked? This is not what will happen. The checked array does not persist outside of the event handler. So you are only ever putting one value into the array not a collection as you might be expecting. That value is dependent on several other conditions earlier in your code and user behavior.

If you think you would benefit from my help (either to fix the code for you OR in a one-on-one code surgery online) drop me a chat message.

Cheers
Steve

8

@stevesoftwareservice Steve - thank you - I taught myself how to code so I am sure there are many problems wrong ! I will most likely take you up on that offer - I will let you know in the next 24 hours!