Wized Docs

Appearance

Common Patterns ​

Here are some of the most common patterns used in functions:

Return a value ​

To return a value from a function, use the return keyword:

js
(c, f, i, n, r, v, e, t) => {
  return 'Hello World'; 
};

If no value is returned, the function will evaluate to undefined which often is not the desired result:

js
(c, f, i, n, r, v, e, t) => {
  'Hello World'; // Will evaluate to undefined and not 'Hello World'
};

You can add as much logic as you want in the function, but only the value returned by the return keyword will be used:

js
(c, f, i, n, r, v, e, t) => {
  const words = ['Hello', 'World']; 
  const greeting = words.join(' ');

  return greeting; // Will evaluate to 'Hello World'
};

Return data from the Data Store ​

To return a variable from the Data Store, use the v parameter and the dot notation to access the variable:

js
(c, f, i, n, r, v, e, t) => {
  return v.my_variable; 
};

Following the same pattern, you can also return a Request's data by using the request name in the r parameter:

js
(c, f, i, n, r, v, e, t) => {
  return r.my_request.data; 
};

This works for any other function parameter too.

Return a conditional value ​

To return a value from a function based on a condition, use the return keyword and a conditional statement:

js
(c, f, i, n, r, v, e, t) => {
  if (c.has_logged === 'true') {
    return 'Hello again!';
  } else {
    return 'Nice to meet you!';
  }
};

Conditional statements can be combined with logical operators to create more complex conditions:

js
(c, f, i, n, r, v, e, t) => {
  if (c.has_logged === 'true' && r.get_user.data.name) {
    return `Hello again ${r.get_user.data.name}!`;
  } else {
    return 'Nice to meet you!';
  }
};

Return a conditional value using a ternary operator ​

Ternary operators simplify conditional statements and can be used to return a value from a function:

js
(c, f, i, n, r, v, e, t) => {
  return c.first_login === 'true' ? 'Nice to meet you!' : 'Hello again!'; 
};

Return if the current path matches a given path ​

The current navigation path can be accessed via the n parameter. You can combine it with an equality operator to check if the current path matches a given path:

js
(c, f, i, n, r, v, e, t) => {
  return n.path === '/about'; // Will return `true` if the current path is `/about`
};

Access the JavaScript API ​

WARNING

This is an advanced feature and should only be used if you know what you're doing.

The Wized object provides access to the JavaScript API. See the JavaScript API section for more information.

js
(c, f, i, n, r, v, e, t) => {
  const greetingElement = Wized.elements.get('greeting'); 
  greetingElement.node.innerHTML = 'Hello World!';
};