Search
Oct 8, 2018

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

10 comments103 views

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

Oct 8, 2018

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.

https://www.w3schools.com/js/default.asp

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?

Oct 8, 2018

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

Oct 8, 2018

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

Oct 9, 2018

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

https://stcroppe.wixsite.com/steveonsoftware/example-code/wix-dataset-filtering-multiple-columns

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

Load more replies
Oct 10, 2018

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...

Oct 11, 2018

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 ;-)

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

Cheers

Steve

Oct 11, 2018

Excellent! I smell a book coming ...

Oct 11, 2018

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

Log In to Comment
Get in on the conversation.
Sign Up Today
Not a member yet? Join our community to post and comment.