Run Function

WARNING

Run functions are an advanced feature in pure JavaScript

A run function lets you directly update the state of your web app, and run any arbitrary javascript logic.

If you're not familiar with JavaScript, it's recommended to avoid dealing with Run functions altogether.

That being said, this tool is incredibly flexible, because you can do anything inside of a run function. You can think of it as the Swiss army knife of web app development — it's versatile and powerful.

Run functions are most commonly used for:

• Updating the Data store — you can directly update variables, cookies, navigation, inputs, and forms
• Performing advanced logic — you can interact with the Wized JavaScript API, assign element states with t.data, and run any javascript
• Interacting with third-party JavaScript — you can import, and interact with third-party libraries or npm packages

Let's look deeper into each use case.

Updating the data store

Run functions can be used to assign values to existing properties in our data store.

For example, if we have a variable called v.current, we can update the value in a run function like this:

v.current = 5;

This can of course be achieved with the Set Variable action, but Run functions also give us more flexibility.

If we want to increment the value we can do this:

v.current++;

If we want to set multiple variables, a cookie value, form values, and then redirect the user, we can do all of it in one Run function:

v.first_step = 'completed';
v.current++;
c.theme = r.get_theme.data[0];
f.form_onboarding = {
  name: 'John',
  email: 'john@example.com',
};
n.path = '/dashboard';

Very concise, and convenient!

But once again, make sure that you know what you're doing. Assigning an incorrect value could potentially break your project.

Advanced logic, and the Wized JavaScript API

We can even interact with the Wized Javascript API.

Here, we are changing the state of an element from false to true:

Wized.elements.get('form_step_1').data.was_touched = true;

If we are using an On event action, and we want to update the state of the target element, we could do it like this:

t.data.count = 5;

Now let's look at an example with some slightly more advanced`` logic.

//Increment the number of form input changes
v.number_of_changes++;
// Exit the function if there are fewer than 5 changes
if (v.number_of_changes < 5) return;
//If there have been 5 changes, execute the 'post_save_progress' request
Wized.requests.execute('post_save_progress');
//Set the state of the parent element (a form), to 'Saving...' - This state can be displayed with another Set text action
t.parent.data.state = r.post_save_progress.isRequesting ? 'Saving...' : 'Saved';
//Reset the number of changes to 0
v.number_of_changes = 0;

In the example above, we are saving the user's progress on every fifth change, reflecting that in the state, and setting the variable back to its initial value.

Interacting with third-party libraries

Since you can write any JavaSctipt code within a Run function, you can also interact with third-party libraries.

For example, we can import and initiate SwiperJS when an event occurs:

const { Swiper } = 'https://esm.run/swiper@11';

new Swiper('.swiper');

And just like that, we've initialized a new Swiper instance in our Wized project.

But run functions aren't only limited to interacting with libraries that have been imported in the same run function.

You can also interact with libraries that you added in the custom code section of your Webflow project:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Then, we are initiating ChartsJS in a Run function with data from our data store:

const ctx = document.getElementById('myLineChart').getContext('2d');
const myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: r.get_chart_data.data.labels, // The label values are pulled from a request
    datasets: [
      {
        label: 'My Line Chart',
        data: r.get_chart_data.data.session_count, // The label values are pulled from a request
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 2,
        fill: false,
      },
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
      y: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  },
});

Cool!

These have been Run functions in a nutshell. Hopefully, these examples will help spark your imagination. And if you haven't started learning JavaScript yet, what are you waiting for?