Wix Editor: Using Velo by Wix for App Builder Apps

3 min read

This topic provides tips for writing Wix Velo code for App Builder widgets that you use in the Wix Editor.

For general information about Velo in the Editor see Velo by Wix Documentation.

APIs

The app developer may have added properties, events and functions to the app widgets. Those properties are exposed in the widget's settings panel, and the events appear in the widget's properties panel. The widget's properties, functions and events are all accessible through the $w API in the Code panel.

Tip

The widget has two sets of properties - those that appear in the Settings panel, that are specific to the widget, and those that appear in the Properties panel. In the Editor Code Panel, you can write code that references any of these properties.

In these screenshots from the counter example, you see the end date property displayed in the Settings panel, and properties such as Hidden on load in the Properties panel. The Properties panel is also where you find events that are specific to the widget, such as the oDaysAlert event shown here.

Example - the counter widget

The counter widget is a good example of the use of properties and events. Enter an end date and the widget counts down the seconds to that date.

This widget includes:

A Date and Time property called endDate for the date to count down to. You can set that in the What's the end date? field in the Settings panel.
The daysAlert event, which fires when the endDate property is less than 0 or greater than 99.
The dayZero event, which fires when the the counter hits 0 days..

You can select either of the events from the widget's Properties panel.

When you do, it adds code to the code panel for each event, as shown below. Use this in the Editor the way you'd use any other event, such as a click event.

1
2export function counter1_daysAlert() {
3 //Add your code for this event here: 
4}
5
6export function counter1_dayZero() {
7 //Add your code for this event here: 
8}

By adding the code shown below, when the daysAlert event is triggered, we show a text message that says, "Value must be more than zero and fewer than 99 days".

Set the text element that we added to our web page to display a message ("Change in <symbol> is greater than 5%").
Show the text element, since it was hidden on load.
Immediately refresh the quote by calling the refresh() method.
Change the refresh interval from the widget settings value to 1 minute.

Note the use of the widget's percentChangeThreshold and symbol properties.

1export function counter1_daysAlert() {
2 //Add your code for this event here: 
3     $w('#myAlert').text = "Value must be more than zero and fewer than 99 days, you input " + $w('#counter1') + " days."
4     $w('#myAlert').show()
5}

The widget and the mediaBox

It's important to differentiate between the widget, and the mediaBox that occupies the widget space, and defines where the widget's elements reside.

For example, when you select the counter example widget on a page (with DevMode enabled), you see its properties and events. The Properties panel has two tabs - one for the widget, and one for the mediaBox. Move back and forth between the tabs and you see that the events differ between the widget and the mediaBox. For example the counter widget provides only the daysAlert

and the dayZero events that the developer created, as compared to the standard set of events that the mediaBox has.

APIs

Example - the counter widget

The widget and the mediaBox

Did this help?