Working with the Velo Sidebar

Learn how to work with the Velo sidebar.

We'll cover the following

The Velo Sidebar shows all of the files that make up your site, including pages, lightboxes, folders, files, packages, and database collections. This sidebar allows you ro perform a variety of actions that affect your site as detailed below.

The sidebar displays different content depending on which Sidebar button you select.

To hide the sidebar, hover over it and click the hide button on the right side of the sidebar. To show the sidebar after it’s hidden, click any of the sidebar buttons.

Page code

The Page Code section of the sidebar contains the following sections:

Main pages

Your site’s regular pages appear immediately beneath the Main Pages section title. You can change a page’s settings by clicking the Settings icon that appears when you hover over the page’s name. You can set any page — other than your site’s home page — as a dynamic page.

Dynamic pages

If you’ve created any dynamic pages, all the pages with the same prefix are grouped together in the same section.

You can add a new dynamic page to a group by clicking the Settings icon that appears when you hover over a section’s name.

You can change a page’s settings, such as its URL and SEO data, remove its dynamic connections to make it a regular page, or delete it by clicking the Settings icon.

Router pages

If you’ve created a router, all the pages associated with that router’s prefix will be grouped together under the Page Code’s Router Pages section of the Velo Sidebar. For example, if you created a router with the prefix myrouter, the router pages are grouped together under Myrouter Pages (Router).

Each individual router page is given a default name that is used in your router’s code. You can change the name if you want. Your visitors cannot see the page name.

You can change a router’s prefix (which also changes the names of the associated functions that are implemented in the routers.js file), and/or you can add a new page to a router. Do this by clicking the ellipsis icon that appears when you hover over the title of the grouped router pages. Choose either Change Router or Add Page to Router.

You can change a page’s settings, rename it, delete it, or remove it from a router to make it a regular page by clicking the ellipsis icon that appears when you hover over the name of the router page.

You can add a new router by clicking the plus icon that appears when you hover over the Main Pages section header in the Velo Sidebar.

App-specific pages

Some apps, like those that add Members functionality to your site, add special pages to your site. These pages appear in their own section under Page Code.

Lightboxes

If you’ve added a lightbox to a page on your site, it appears in the Lightboxes section of the sidebar. This section only appears if you’ve added at least one lightbox to your site.

You can add a new lightbox using the Add menu in the Editor.

When you select an existing lightbox in the sidebar, the Editor enters Lightbox Mode.

Global (Site)

Elements in the Editor can appear either on a specific page or on all of your site’s pages. You put code for specific pages in that page’s code file. Code that you want to run on all the pages in your site should be in the masterPage.js file. You can have code that you want to run on all the pages of your site for these reasons:

  • Code for elements set to appear on all pages: When an element appears on all your site pages and you want to add functionality to it that will be consistent across your site, add that code in the Site tab. When you use the Properties panel to add an event to your element that appears on all pages, the code for that event is automatically placed in the masterPage.js file.
  • Code in your site that isn’t related to a particular element: If you have code that relates to all the pages of your site but doesn’t relate to an element set to show on all pages, add it to masterPage.js.

If you have an element that appears on all pages, but you want to add code to it that is specific to one page, add the code to the Page code for that page.

Code files

The Code Files section contains the following sections:

Public

You may have a function that you need to use in multiple pages and you will not want to repeat it on each page. You can write that function once in a public file and then call it from any page as needed. The Public section is where you put JavaScript files that contain the code you want to use on any page in your site.

You need to export functions from public files and then import them in the files where you want to use them. When you add a new .js file to the Public section, it contains comments that provide instructions and examples for exporting and importing functions. You can refer to those comments for more information.

As your site’s functionality grows, it may be easier to keep your code organized in files that you call as you need in your page code. You can divide your public files into folders to further organize them.

  • You add a new file or folder to the Public section by clicking the plus icon that appears when you hover over the section name.
  • You add a new file to a folder or delete a folder by clicking the ellipses icon that appears when you hover over the folder name.
  • You rename or delete a file by clicking the ellipses icon that appears when you hover over the file name.

Note: Your page and site code, which are also publicly accessible, do not appear in the Public section.

Backend

The Backend section of the sidebar lists files that are not publicly accessible from your site. Since the backend code isn’t visible, you can place sensitive information in the Backend that might otherwise be a security risk. You can create JavaScript files, web modules, and other files for use in the backend, and you can organize these files in folders.

There are several special JavaScript files that may be present in your site’s Backend section. For example, the data.js file contains the code for data hooks, and the routers.js file contains the code for routers and data binding router hooks. These files are added automatically when you work with these features.

You can also add a Jobs Scheduler file to schedule recurring jobs and an events.js file to handle backend events.

  • You add a new file or folder to the Backend section by clicking the plus icon that appears when you hover over the section name.
  • You add a new file to a folder or delete a folder by clicking the ellipses icon that appears when you hover over the folder name.
  • You rename or delete a file by clicking the ellipses icon that appears when you hover over the file name.

Packages (npm)

You can install node packages from the Packages (npm) section of the sidebar.

Sometimes you need to add complex functionality to your site that has already been implemented by someone else. You can use a code library that suits your needs and incorporate it into your own code. Each reusable library of code is known as a package.

  • You can install a package by clicking the plus icon that appears when you hover over the Packages (npm) section name.

  • Once you’ve installed a package, you add more packages or manage your packages in the Package Manager by clicking the Settings icon that appears when you hover over Packages (npm).

  • You can uninstall a package by clicking the Settings icon .

Search your code

Click the magnifying glass sidebar button to open Search Your Code and search all the code files on your site. You can search with options to match case, match the whole word, or use regular expressions.

Databases

The Database section of the sidebar contains your Content Collections. Click a collection to open it in the Content Manager.

You can add a new collection or work with external collections by clicking the plus icon.

You can add a new dynamic page based on a collection, update a collection’s permissions, remove a collection, or add and remove hooks to a collection by clicking the icon that appears when you hover over a collection name.

When you add certain Wix Apps to your site, database collections are automatically added to your site. These collections appear in your sidebar. Wix app collections contain information about the items in your Wix app. Collections for each app are grouped together in the sidebar and are read-only. You can edit the collections in the relevant App manager in your Dashboard.

Note: You may need to save or publish the site and refresh your browser to view the Apps collections in the Database.