Velo: Working with the Velo Sidebar

The Velo Sidebar shows all of the files that make up your site, including pages, lightboxes, folders, files, packages, and database collections. Working in this sidebar, you can 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  that appears when you hover over the dynamic page's name.

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 the 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 could 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 don't want to repeat it on each page. You can write that function once in a public file and then call it from any page, or from any backend or public file 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, public or backend. 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 them 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 ellipsis icon  that appears when you hover over the folder name.
• You rename or delete a file by clicking the ellipsis icon  that appears when you hover over the file name.

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

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.

There are 2 types of pre-built packages that you can install from the Packages section of the sidebar:

• Velo Packages
• npm Packages

Velo packages can be divided into 2 categories:

• Built by Wix
• Built by you

You can install a package by clicking the plus icon that appears when you hover over the Packages section.

Once you've installed a package you can manage the package on your site in the Package Manager by clicking the settings icon that appears when you hover over the Packages section.

You can uninstall a package by hovering over the package you want to uninstall, click the Show More icon, and select Uninstall.

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 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 Management System (CMS).

You can add a new collection or work with external collections by clicking the plus icon that appears when you hover over the section name.

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

Developer Tools

The Developer Tools section contain the following sections:

Logs

The Wix Logs feature allows you to view information about site events. It records events, such as console logs, HTTP functions, and web module functions as log entries. 

You can view and track site events in real time or you can connect your site events to Google Cloud Logs, an external monitoring tool to perform log analysis and generate visual depictions of site data for you to gain meaningful insights. 

Monitoring

When using backend code with your site, you will want to monitor the code's performance to ensure the best experience for your site visitors. 

The Monitoring dashboard assists you with the following:

• Track the performance of your backend code over time.
• Detect when your site is not functioning as expected.
• Troubleshoot and determine the causes of a site not functioning smoothly.
• Ask for additional resources when needed.

Security

The Security section of the Developer Tools tab contains your Secrets Manager.

Sometimes you may need to add private information to your site's code. For example, you may require an API key for some 3rd-party service you choose to integrate with. You never want to expose your secrets to your page, site, or public code. Instead, you can use the Secrets Manager to safely work with secrets in your code. 

Automation

In the Automation section you can find the Triggered Emails feature. 

Triggered Emails allow you to send personalized messages to site visitors who have triggered a specific event.