Intelligence Center

Appearance

Actions ​

The Actions panel is used to add interactivity to your web apps. You can use actions to trigger requests, render items on your page, and much more.

Wized Action enables us to trigger requests, make layout changes, element changes and value changes when a user interacts with our web app.

The Action panel lets you create, and manage those actions.

In this panel, you can also find any Wized elements that you created.

Actions allow you to trigger requests, layout, element, and value changes, when a user does something in your app.

In this lesson we’re going to cover the following topics:

  1. How to create a new action
  2. Action types
  3. How to render a list of items

How to create an Action? ​

To create an action:

  1. Click the create new action button
  2. Choose a name for your action. For example, My First Action.
  3. From the dropdown, select the action target
  4. Configure actions

Action types ​

When it comes to configuring your actions, you have a lot of flexibility.

Listening to a user input ​

The first options in the dropdown are

  • Click
  • Change

These actions will listen to the user input.

For example a button click. When a user clicks that button, we can perform a request, set a cookie or a variable or we can choose to send the user to another page.

Changing appearance of a target element ​

The next items in the dropdown are:

  • Set visibility
  • Set style,
  • Set class,
  • Set text
  • Set input value

These settings allow us to change the visual appearance of our target element.

Adding a query parameter to the URL ​

Add parameter to link lets us add a query parameters to a link. We can define these query parameters in the page data panel, and we can use them across our application.

Rendering a list of items ​

Next we have render list, which allows us to get data from a request, and render a list of items on our page.

Setting HTML attributes ​

And finally we have set HTML attribute which allows us to add additional attributes to our Wized elements.

How to render a list of items ​

Let’s get practical now, and render a list of items from Airtable.

Keep in mind that before you can render anything from Airtable, you need to do a few things which we covered in previous videos.

To render a list of items from Airtable, you first need to prepare your project:

  1. Add wized attributes to your Webflow project.
  2. Add Airtable to My Apps.
  3. Create a Data In request which gets a list of items from Airtable.

Once you have some data in Wized, and your elements are prepared, it's time to set up our action:

  1. Create a variable in the Page Data panel, name it index, and set the initial value to 0
  2. Create a new Action, and give it a name (f.e. Render Job Listings)
  3. Under Apply to, select the target element which is going to be used as a template
  4. Under configuration select: Render list
  5. In the Render list data field, choose an array from which the list is going to be rendered.
  6. Under Variable for index, select your index variable
  7. Replace each element inside of your template with the right fields from the request, and replace the number field with your index variable. f.e. r.1.d[index].title
  8. Refresh your canvas

Summary ​

  • Actions allow you to trigger requests, layout and element changes, and values when an event happens on the page.
  • We also learned that we can create actions in the Actions panel
  • And we learned how to render a list of items by setting an iterator variable and configuring a render list action.

And that’s it for the introduction to Actions.