Execute an action only if certain conditions are met

Specify a condition that has to be met before an action can execute. These conditions are entered as an expression, so you can use logical operators, arithmetic, conditional statements, etc. You can even write your own conditional function.

1. Each action can have a conditional expression. This expression has to evaluate to true, for the action to be executed.

  

2. Some examples of action conditions:

  • window.myNumber == 4
    • This expression tests if the variable named "myNumber" in the window object has the value 4
  • !(window.myNumber > 4 * 23.2)
    • This expression tests if the variable named "myNumber" in the window object is not larger than 4 times 23.2
  • _.trim(window.myName) == 'Storied' || _.trim(window.myName) == 'storied.co'
    • This expression tests if the variable named "myNumber" is the window object without any leading or trailing whitespace is equal to the string "Storied" or "storied.co"
  • (34 * 23 + 12 % 2) >= 12 / 5
    • This expression evaluates to true because the result of the calculation on the left is bigger than the result on the right
  • date('before', 1305057600)
    • This expression checks if the current date falls before 10:00 pm GMT on Tuesday, May 10, 2011. The number is the unix timestamp equivalent of the mentioned date. You can use this easy converter tool to generate a unix timestamp.
  • frequency(5, 'minutes', 'show ad once every 5 min')
    • This expression will make sure the action does not execute more than once during the specified interval.
  • index == 5
    • This expression will only evaluate to true if the widget's index is equal to 5. eg: for a slideshow this would mean the 6th photo is visible. Index values start counting at zero (zero based). The index will be taken from the element the action is defined upon. If that element doesn't have an index, it will try getting the index from the target element of the action.
  • window.foo['bar'].baz == true
    • This expression will get a nested value from the window object and check it it is true
  • window.myFunction() == 123
    • execute your custom function and check if the response value equals the number 123
  • action.eventParams[0] > 4 && action.eventParams[0] < 7
    • This expression is used to execute an action when a video is at a specific play location (between 4 seconds and 7 seconds). The action has to be triggered by the event: video.timeupdated so that the current time of the video is passed in the eventParams[0]. This event is triggered once every second.
  • console.log('is phone: ' + (screensize == 'phone'))
    • This expression will always evaluate to false, but it will also output the result of the expression within the brackets to the console. This way you can debug issues with conditional expressions.
  • localStorage.getItem('has-accepted-cookie-policy') === 'true'
    • Checks if a certain value in localStorage is equal to the string 'true'

 

3. The full reference of what is possible with expressions:


An expression can contain the following parts:
  • Literal expression
    • numbers or strings
    • eg: 25 or "storied"
  • Identifier expression
    • window
      • the browser window object
    • util
      • The storied utility service
      • isMac, isMobileChrome, isIphone, isIpad, isIo, isAndroid, isSafari, isChrome, isFirefox, isIe, isEdge, isOpera
      • Eg: util.isFirefox()
    • _
      • Lodash library
      • Only a subset of the lodash functions are available:
        • assign, camelCase, ceil, clamp, clone, cloneDeep, compact, concat, debounce, difference, endsWith, every, extend, filter, find, findIndex, forEach, get, groupBy, inRange, includes, indexOf, intersection, isArray, isEmpty, isEqual, isFunction, isNaN, isNil, isNumber, isString, isUndefined, join, keys, lowerCase, map, mapValues, max, maxBy, mean, merge, minBy, noop, now, omitBy, once, padStart, pull, range, reduce, reduceRight, reject, remove, reverse, round, set, shuffle, some, sortBy, split, startsWith, throttle, times, toNumber, toString, trim, trimEnd, trimStart, union, uniq, uniqBy, unset, values, without, xor,
    • Math
      • References the Javascript Math object
      • Eg: Math.sin(30)
      • More info on the Math Object
    • localStorage
      • References the localStorage object to store data as a cookie.
      • Eg: localStorage.getItem('has-accepted-cookie-policy')
      • This will get the data with key: 'has-accepted-cookie-policy' from the localStorage object and if it is defined, it will execute the action. You can define an action somewhere else to set data in the localStorage.
      • Note that you can only store string values in localStorage
    • random
      • convenience reference to Math.random()
      • Returns a random number between 0 and 1
      • To generate any random number just multiply by that amount:
        • random * 5 generates a random number between 0 and 5
    • item
      • This item resolves to the config.json file content of the project or to the article info if you're inside a feed based app.
      • You can have a look at the config.json file of a project by adding "/content/config.json" to the end of the preview/publish url
    • index
      • This expression will get the current index of the widget. The widget where the action is defined upon will first be polled for an index. If that widget doesn't have an index, the target of the action will be polled.
      • This is useful for only executing an action for specific slides of a gallery.
      • The index is zero based, so for the first photo in a gallery the index will resolve to 0, for the second photo in a gallery the index will resolve to 1, and so on.
    • screensize
      • returns the screen size of the device
      • possible values are: 'desktop', 'tablet-landscape', 'tablet-portrait', 'phone'
      • eg: screensize == 'phone'
    • globalUiVisible
      • returns true if the menu bar is visible
    • tocVisible
      • returns true if the navigation menu is visible
  • Unary expression
    • !
      • This indicates the "not" opterator, to invert the expression after it
      • eg: !window.isLoggedIn
  • Binary expression
    • These expressions have a left and a right part
    • options are:
      • equal to operator: ==
      • not equal to operator: !=
      • smaller than: <
      • greater than: >
      • smaller than or equal to: <=
      • greater than or equal to: >=
      • addition: +
      • subtraction: -
      • multiplication: *
      • division: /
      • remainder after division: %
      • exponentiation: ^
      • logical and: &&
      • logical or: ||
  • Custom expressions
    • date
      • check if date is before or after a specified time. This time has to be a unix timestamp
      • eg:
        • date('before', 1305057600)
        • date('after', 1305057600)
      • To check if the current date is between two dates you can use the logical AND operator:
        • date('before', 1305057600) && date('after', 1305077600)
    • frequency
      • Make sure the action only executes once during the specified time interval
      • eg: frequency(5, 'minutes', 'my interval id')
        • The amount together with the unit determines the length of the time interval. The valid unit values are:
          • seconds, minutes, hours, days, weeks, months, years, calendar_hours, calendar_days, calendar_months, calendar_years
        • The id is used to group certain actions together. Only one of the actions that are defined with this same id will be able to execute within the specified time interval.
      • eg: frequency(5, 'minutes', 'my interval id')
    • action
      • This expression allows you to access the action definition object. This object contains the following properties
        • action: The action name. eg: fadeIn
        • params: The action params, like duration for the fadeIn action
        • trigger: String to indicate what should trigger the action. eg: event, click, hover, ...
        • trigger_params: object containing the trigger parameters. eg: offset, scroll_direction, trigger_once, execute_reverse, name, ...
        • element: The source element on which the action is defined.
        • target: The target selector on which the action should execute.
        • title: Description of the action
        • triggerCount: number of times the action has executed.
    • console
      • Resolves to the browser console object, so you can evaluate parts of the expression for debugging purposes.
      • example: console.log('is phone: ' + (screensize == 'phone'))
      • console.log always returns false

Notes:

Actions conditions are evaluated once, when the action is registered when the page loads. They are not dynamically re-evaluated afterwards.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us