Using Async/Await in Corvid

Ask the community
, ,
1

I am in the works of coding a product configurator for my website. I am 90% done, but I am having one issue. When the user selects an option from a repeater, I store the information for the button they selected in an array. The customer then moves on to the next choice section by hitting the next button, and the repeater changes to display the new choices, but the problem is if the customer wants to return back to the previous selection and change their mind. When they navigate back to the previous section, The button they previously selected to make their choice does not show up as “Selected” like it should. However, I have found that if the navigation button is clicked a second time, the correct label on the selected button appears. From my knowledge, this appears to be an asynchronous code problem. When the filter is called to update the choices for the selection repeater, I am assuming that it is runs asynchronously, and therefore the code underneath is run before the filter has completed. This explains why the label property cannot be set the first time, because the property does not exist under the correct button is actually displayed from the repeater. It seems as though my solution to this should be to use an await function to pause the rest of the code until the filter has completed. However, after reading multiple documentation for Promises, Callbacks, Async and Await, I am still stuck. Any help on this will be greatly appreciated.

// FUNCTION THAT RUNS AND SETS THE SELECTION REPEATER TO THE CORRECT FILTER, AS WELL AS CALLING TOGGLE COVER TO MAKE THE OPTION REPEATER BUTTONS APPEAR SELECTED
function setOption() {
// Filter is run to update the selection repeater
$w("#selectionDataset").setFilter(wixData.filter()
      .eq("partType", (optionArray[currentOptionSort-1])));

// Correct Button Information is stored in a temporary array. The Button is called that needs to be have the label "Selected" and so the label is set to just that.      
tempButtonSelection[currentOptionSort-1].label = "Selected";

//The short of the problem is I think I need to have a promise created with the filter, so that the label is not set to "Selected" until the filter has finished running. 

// Unrelated Aesthetic Function
toggleCover(optionArray[currentOptionSort-1], currentOptionSort);
}
2

First, here’s a simple explanation of Promises and async code:
Promises, Promises

For a more detailed explanation, including some database code examples:
Corvid: Working with Promises

As you correctly state, the setFilter() function returns a Promise and you will have to handle the returned Promise. See the code examples in the setFilter() documentation.