to the Wix Team: Please help! Where are the incremental tutorials on JavaScript

Hello Wix Team or anyone savvy enough to comment.

Where are the incremental tutorials on how to understand and use JavaScript to add additional functionality that pretty much every site deserves it?

Your videos are quite fast and assume that we all know JS as you do.

Would it be possible for you to slow down and add incremental videos as you build a site.

For instance - there’s a 6-min video on how to create a search and drop down menu connected to a dataset. The video is good but is too fast and doesn’t explain why you’re doing what you’re doing.

Take the video above in break it down into separate videos and build on top of the previous videos and explain line by line what you’re doing and make reference on where we can get additional information in case we have questions

Such as:

  1. Create a dataset and write a code in JS to search its contents.

  2. Now create a drop-down menu to show all its contents.

  3. Now highlight the drop-down menu based on where you are with your mouse.

  4. Now add an up/down scroll bar.

  5. Now add an 2nd drop-down menu based on the results of the first drop-down menu

  6. Keep adding additional functionality

Please let me know if this can be done.

Thanks,

Alex

Hi Alex:

Wix Code is targeted at developers so there is an implicit assumption that folks that use it are familiar with Javascript. That being said, in some cases it is hard to avoid wix code with the rich set of resources Wix delivers.

What is your javascript experience? If you don’t have any then it is a good idea to find good educational resources such as w3schools. w3schools has a free javascript training/reference site that can help you get familiar with some of the basics.

I like your suggestion and it is something for Wix to consider. In the meantime is there a specific problem you need to solve on your site related to searches and drop down use?

Thanks Stcroppe! Can you please take a look at the site we created www.fpdl.com.br I guess you can see it as being part of Wix. We pretty much copy/paste the code from your video and made it work. I only needed one database but now are using 2 databases just to mimic your video. Kinda silly but we couldn’t figure it out how to keep it to just one database. I studied JS a couple of years back but always found too much theory and little applicability. If you create these tutorials with focus on applicability - you would be grabbing a bunch of new customers that need database, backend, others… but doesn’t need to know crazy JS. Just a thought! Thanks Alex

@pairolalex actually I’m not part of Wix but ill have a look and see what you are doing.

@Alex Pairol Check out this example page that I created a little while back.

What it does is creates a drop down list based upon a specific column in a dataset used by the rest of the page.

The example provides a class called dropDownData that is used to manipulate the dataset and return a dropdown value list based upon a specific column (property key) in a dataset. The constructor takes the dataset returned from wix-dataset.getItems() call. The getItems call asks for all items in the dataset by setting the range for getItems to 0 - wix-dataset.getTotalCount().

When a specific column for a drop down is needed the object created from the class uses named helper functions (e.g.servicesList()) which call the column filter function uniqueColumnListForField(field) with the name of the column to be used for the drop down.
This function returns an array of option objects that can be assigned directly to the dropdown options property.

Hope this answers your question.
Steve

@stcroppe Steve, as I have expressed elsewhere, I like your contributions. But, unless I am very much mistaken, your answer to this question is a good illustration of the disconnect of the developer and the great majority of Wix Code users.
As with every product, your installed base is your biggest target market. And, without trying to offend anyone, Wix installed base are not developers. That´s the disconnect.
“Class”, “key”, “named helper functions”, it´s gibberish to most people, I fear. What they are looking for is a big bible (you know, the ones we used to buy 20 years ago, 500-1000 pages long) which takes a pretty complex project as its goal and then, step-by-step, chapter-by-chapter, takes you by the hand, every time introducing a new problem and a solution. At the end, you were at 80% and the other 10-15, you figured out with trial-and-error (since there was no Internet in those days, just Compuserve).
Judging from your contributions, you would be the ideal person to take on such a project.
And for nostalgia, I´ll throw in the floppy disk with non-working example code;-)

1 Like

@giri-zano Hi Giri
I understand and I think part of the problem is that when anyone attempts to dive into code at any level they need to learn the basics. I often direct folks to spend sometime going through the w3schools tutorials (they are free) to build a basic Javascript foundation.

Using Wix Code is not just a simple case of cutting and pasting example code and trying to make it fit your target function. Yes in some, perhaps many cases, this will work. But then there will come a need for tweaks and enhancements. Or more importantly debugging assistance where someone has cut and paste code but not really understood how to wire it up.

I know that Wix is keen to look at how to bridge the gap and with specific problems it is easier to provide mini tutorials on how to do something or fix a problem. A large part of that is first trying to understand the problem being raised in a post sufficiently to help with a solution. Alex’s post above is a good example. It is challenging to really understand the problem.

It turns out he wants to save on data collection resources and use a single data collection to drive his drop downs. The link I provided tries to explain, using a working example and the code, how to achieve his objective.

Thanks for the kind works and recommendation perhaps Wix heard you.

Thanks folks! A little guidance on JS would really a good way forward. JS algorithms are good but they don’t have an immediate applicability. I’d rather learn theory then apply into a real situation, then move to next lesson and so on…

Hi Alex:

OK here’s a little theory and practise :-).

You can always create multiple tables from one table or one table from multiple tables using a variety of techniques. I’ll walk through one here and then I’ll let you extrapolate if you want to.

Variables
So first of all let’s talk about javascript variables. A variable in Javascript is basically named memory and can hold a variety of things from primitives like numbers and booleans to more complex things like functions, strings and objects. For this discussion we will think about an array and an object.

Object
Objects, in simple terms, are a collection of key, value pairs. Think of the key as the name of some thing and the value is what that name refers to. Some javascript references will use the term name value pair also. The value can be data like a number or a string, or it can be another object or a function. So the phrase “my name is Steve” essentially establishes a key value pair key=‘name’ value ‘Steve’.

An object is defined in a variety of ways but the simple way is to use literal notation, open curly brace { to start the object definition and close curly brace } to end the definition. Key value pairs are then added to the object using a colon : to separate key from value and a comma , to separate each key/value pair definition. So we can define a member object like so:

let member = { name:"Steve" };

Property
Simply put a property is a key/value pair. The property name is the key name the property value is the value. So in the above example the name property of member is

name:"Steve"

Array
Simply put an array is a list of variables. Arrays do not have a name context for each variable they hold so arrays are expected to hold collections of the same type of variable.

An array can be defined in a number of ways but the simplest way is to use literal notation. Open square bracket [ starts the array definition and closed square bracket ] ends the definition. Between the brackets you simply list out the values using primitives or variables. So if I have several members I can define a variable that holds a collection of member objects like this

let members = [  {name:"Steve"}, {name:"Peter"}, {name:"Robert"} ];

Data Collection
Data Collections have a schema which defines the different types of data the collection can hold. In Wix each column has two names one is the display name that you see in the Editor or dashboard view the other is the property name when used in code. These can be the same but often are not. If we were to consider a member collection then we would possibly have Name as our display name and name as our property name.

column name === property name === key

column value === property value === value
When dealing with data collections (databases) data is generally described in terms of rows and columns (like a spreadsheet).

  • Each column contains the values of the property for a given column name.

  • Each row defines an item in the collection.

  • Each item is made up of properties

So if we want to represent the members we have in a data collection then it will look like this

         Name  
         "Steve"
         "Peter"
         "Robert"

wix-data API
When you make a call to the wix data api to access data from the data collection (or indeed using the dataset) the results are returned as either a single object (wix-data.get) or as an array of items (wix-data.find query result). These results are straight forward to connect:

collection row === item === object
collection column === property === key/value pair
multiple collection rows === multiple items === array of objects

Working with Objects
Once you have an array of objects you can start to manipulate them and use them in a variety of ways. Let’s assume we have a members collection that looks like this

 Name       Role 
 "Steve"    "Cook"
 "Peter"    "Waiter"
 "Robert"   "Bar person" 

When retrieved from the data collection we would have an array of objects like this:

let members = [  
           {name:"Steve", role:"Cook"}, 
           {name:"Peter", role:"Waiter"}, 
           {name:"Robert", role:"Bar person"} ];

For our drop down element we need to pick the column from the data collection that we want to use as our options. Well All we need to do is create an array containing the option objects that the DropDown expects to see. An option is a simple object with two properties a label property and a value property. The label property has the key label and the value has the key value so an option object look like this:

let option = {label:"label name", value:"value"};

So to create a dropdown option list containing member roles we need to do the following:

  1. Create an empty dropdown options array

  2. For each member object

  3. Load the member role property
    
  4. Create an option object where the label value is set to the role value and the value value is also set to the role value
    
  5. Add the new option object to the options array
    

Create an empty dropdown options array
This is simple

let options = [];

For each member object
Now if you start to use javascript then you need to get familiar with looking up the APIs for the data or services that you want to use. Now we know that our members are objects in an array so how do we figure out how to look at each object in the array? Well you need to look at the javascript array API or find a tutorial. The Mozilla Developer network (MDN) is referenced a lot in the Wix Code API docs. I often point to w3schools as a learning aid they deal with arrays here. If you go here and search for Array you will find this page. Once you have a sense of what you can do with an array you will find the forEach() function. We use this with our members array to work on each object it contains.

Closure function
Now forEach (as with many functions like this) a closure is required. Closures can be a complex topic so to simplify a closure is simply a function that gives you control over data that the function you are using gives you access to.

So how does forEach use it’s closure function? Well it simply executes a javascript for loop that reads the next object in the array and calls the closure function giving it the object. When the closure function is finished it gets the next object and calls the closure again.

for (let i = 0 ; i < array.length; i++) {
    closure(array[i]);
}

Closures can be either an anonymous function (it doesn’t have a name) or a named function. Let’s use an anonymous function because that way we can access the variables we need from the calling function. The anonymous function will perform steps 3, 4 and 5.

Anonymous functions use the following syntax

(arguments) => {
} 

OR

function(arguments) {
}

essentially think of function() as being the same as () =>

Load the member role property
We access the property value of an object by simply adding the key name to the variable that contains the object. So if we have a member object called member and we want the value for the role from that object we simply do this

let role = member.role;

Create an option object where the label value is set to the role value and the value value is also set to the role value
Now that we have the role value we need to create our option object using the key/value pairs we discussed above.

let option = {label:role, value:role};

Add the new option object to the options array
Here we need to go to our Array API and find out how to add something to an Array. Again there are several ways we can do this but the easiest is to use the push() function. This simply adds a new item to an existing array like this:

options.push(option);

Once we have the options array we can then tell the dropdown what it is supposed to be displaying:

dropdown.options = options;

Finished Example
So here is the example code for what we have just walked through. Essentially we retrieve all member records from a data collection that we will call Members.
We read all of the member roles from the member list we get as our result.
For each member record we have we create an option object that we add to a new array for the dropdown.
We assign the options array to the drop down

wixData.query("Members").find()
.then((results) => {   // Anonymous closure ;-)
    let members = results.items; // An array
    let options = []; // Empty options array
    members.forEach((member) => { // Anonymous closure ;-)
        let role = member.role;
        if (role) {
            let option = {label:role, value:role };
            options.push(option);
        }
    });
    $w('#dropdown1').options = options;
});

Hopefully this helps those folks who are new to javascript and provides some context to getting a solution. My aim is to teach how to fish not give out free fish :wink:

Let me know if this helps or could be done in a better way!

Cheers
Steve

3 Likes

Excellent! I smell a book coming …

This is awesome! Now we’re talking!!! Thanks a bunch