Wix Blocks: Testing Your Widget's API Properties
2 min
In this article
- Access properties - syntax
- Defining onPropsChanged()
Wix Blocks is currently open to a limited number of users.
When your widget is installed on a site, it comes with a default Settings panel, which includes any properties that you defined in your API (Learn more about using your Widget API when editing a site). Use Blocks's Test API Properties to see how these properties look on a site:
To test your widget's API properties:
- Click Preview.
- Click Test API Properties when you are in preview mode.
Access properties - syntax
Use the following syntax to access your Widget API properties in your widget's code. Internal properties are optional - they're needed only if you're using a custom type property.
1$widget.props.<property>.<internal properties>For example, let's say that you want to present the size of a shoe in a text element in your widget. The property is "shoe". Shoe is a custom type that has an internal property named "size". So the statement will look like this:
1$w('#text1').text = $widget.props.shoe.size;Defining onPropsChanged()
The onPropsChanged() event is fired when there is a change in your widget's properties.
It receives oldProps and NewProps as its parameters. Here is the syntax:
1$widget.onPropsChanged((oldProps, newProps) => {
2 <whatever you want to happen, code here >
3})The initial code for onPropsChanged() is created automatically in every new Blocks widget. You can define what happens in this event through adding Velo code.
For example, in a shopping widget, if the product id is changed - load the data for the new product and customer:
1$widget.onPropsChanged((oldProps, newProps) => {
2 loadProductData(newProps.productId);
3 loadCustomerData(newProps.customerId);
4});Don't forget to document
Make sure to document your widget API by describing any property, event or function you add to it. These descriptions are available to site creators who install your widget.
Learn more about your Widget API:
