Want to know how you can set up your Wix database, display that content, and filter based on a dropdown. Find out how to use Velo code to transfer data from the backend to the frontend with a few lines of code. Then stay tuned for in-depth knowledge about this trick and the code behind it below.

Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

00:00 CN Intro

01:00 Setup of Website

01:45 Add Dataset Connections to Page & Repeater

06:02 Page Code for Dropdown & Repeater

13:30 Wix JSW Backend Code Functions

14:54 Wix JS Backend Code Functions

18:08 Wix Backend Function Output Tester

21:00 Preview Website & Perform onChange function

22:05 Outro

Code Snippet to follow along with the video:

Page Code

This loads the page code

import wixData from 'wix-data';
import * as app from 'backend/dev/examples/flow'

$w.onReady(async function () {//Display Database Content & Filter Wix Repeater Using Dropdown Items - Wix Tutorials

 
    let continents = await app.findContinents();//This await parameter is used to wait for functions to complete before running anything after it. 
 
    if (continents) {
        if (Array.isArray(continents)) {
            $w("#dropdown1").options = continents;
        } else {
            //error display
        }
    }
 
    $w('#dropdown1').onChange((event) => {
        //dropdown value is a filter for dataset linked to the repeater, so
        //set filter and show repeater
        try {
            $w("#columnStrip6").collapse();
            $w("#columnStrip4").expand();
            //event.target is the element. So it is the same as typing $w('#dropdown1').
            //get dropdown value
            let value = event.target.value; //$w("#dropdown1").value //You can use this for many event methods
            let options = event.target.options; //Another example of how you can use the event.target method to get information from the fired event on this element.
            //The Display Time is to show that the code is working in sequential order. This is helpful to see if things are running before a certain task is completed.
            console.log("Time 1 - Initial Start:", new Date());
 
            let filter = wixData.filter();
            if (value !== "-") {
                filter = filter.contains('continent', value) //.eq("fieldKey", value) //You can use the value to place into your filter
            }
            $w("#dataset1").setFilter(filter
                //filter code
            ).then(() => {
                console.log("Time 2 - Inside .then method:", new Date());
                console.log("Show Repeater", value, options); //shows message and the value that was selected inside the dropdown.
                if (value !== "-") {
                    $w("#columnStrip4").collapse();
                    $w("#columnStrip6").expand();
                } else {
                    $w("#columnStrip6,#columnStrip4").collapse();
                }
            })
            console.log("Time 3 - Original location of $w('#repeater1'):", new Date());
        } catch (err) {
            console.log(err, err.stack); //This will share with you what the error was when running the code and won't mess up any other code after the dropdown onChange event method.
        }
    })

    
});

Backend Code - JSW:

This code is the middle method of access. This will gather anything and everything from the backend JS file that you have in your backend code. The JS file is not retrievable from the front end, so we have to create a web module or JSW to act as a middle man to communicate in the backend what the end-user wants.

import * as gtf from 'backend/dev/examples/getFlow.js'

export function findContinents() {
   return gtf.activeContinents();
}

Backend Code - JS:

This backend code goes into my collection (database) to retrieve information on the specific continents laid out in my video.

import wixData from 'wix-data';

export function activeContinents() {
   return wixData.query("continents").eq("isActive", true).find().then((res) => {
        if (res) {
            if (res.items.length > 0) {
                let data = res.items.map((f, index, array) => {
                    return { "label": f.title, "value": f.title };
                })
                data.unshift({ "label": "-", "value": "-" });
                return data;
            }
        }
        throw "No items available";
    }).catch((err) => {
        return err;
    });

}

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2021: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!