Actions

Once a condition in an Expression is met, a variety of actions can be taken in your application - the actions built in to Entourage Expressions are documented here. Actions can also be combined and modified using a few keywords, which are also documented in this section.

Generally speaking, the value action sets the content of an element to a value. The value is usually set from a message payload, but values can be set manually as well. The content of the element is set differently based on the type of element the expression is bound to. Descriptions of this behavior by tag is found in the table below, above the live example:

Live Example

Source

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input, textarea {
    margin:5px;
  }
  .box {
    padding:5px;
    border:1px dashed;
  }
</style>
 
<div class="live">
  <input type="text" name="msg" fieldset="valexample" value="Type something..."/>
  <input type="button" value="Set Value" fieldset="valexample"
    on="click then l:valexample[checked=true]"/>
  <hr/>
  <input type="text" on="l:valexample then value[msg]"/>
  <br/>
  <textarea on="l:valexample then value[msg]" rows="6" columns="60"></textarea>
  <br/>
  <div class="box" on="l:valexample then value[msg]">
    Waiting for my innerHTML to be set...
  </div>
</div>

The message action allows you to send messages when a condition is met. In the web expression language, messages must be prefixed with either an l: (which indicates a local message which will be dispatched in the current page/application) or an r: (which indicates a remote message that will be sent to the server as well as the client). There are a couple of ways to specify the data payload of the message sent in a message action. You can define payload values in an expression using the following notation:

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input, textarea {
    margin:5px;
  }
  .box {
    padding:5px;
    border:1px dashed;
  }
</style>
 
<div class="live">
  <input type="button" value="Send Message" on="click then l:my.message[data=Hello World]"/>
  <span on="l:my.message then value[data]">Waiting...</span>
</div>

Alternately, you can group elements together using the fieldset attribute, so that when a message is sent from an element which is a member of the fieldset, a message payload will be built automatically. You may have noticed this example in use already throughout the documentation, as it is a convenient way of grouping together, for example, fields on a form. An example using fieldset is below:

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:5px;
  }
</style>
 
<div class="live">
  <form>
    <input type="text" name="one" fieldset="myfields" value="Field One"/> <br/>
    <input type="text" name="two" fieldset="myfields" value="Field Two"/> <br/>
    <input type="text" name="three" fieldset="myfields" value="Field Three"/> <br/>
    <input type="button" fieldset="myfields" value="Submit Form" 
      on="click then l:test.fieldset">
  </form>
 
  <br/>
 
  Field One Value: <span on="l:test.fieldset then value[one] and effect[highlight]"></span> <br/>
  Field Two Value: <span on="l:test.fieldset then value[two] and effect[highlight]"></span> <br/>
  Field Three Value: <span on="l:test.fieldset then value[three] and effect[highlight]"></span> <br/>
</div>

In the current release of Entourage, we support using the visual effects included with jQuery UI. You can use all of the effects and parameters included in that library by passing arguments to the effect action, which you have seen throughout the documentation thus far. You can also specify in an effect expression an id parameter which will indicate the target of the effect.

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:5px;
  }
  .box {
    border:1px dashed;
    margin:5px;
  }
</style>
 
<div class="live">
  <input type="button" value="Toggle" on="click then effect[toggle,id=toggle_div,speed=1500]">
  <div id="toggle_div" class="box" on="click then effect[explode,speed=5000]">
    I get toggled by the button!  You can also click me to make me EXPLODE!!!!
  </div>
</div>

Entourage Expressions also provide actions to modify CSS and execute JavaScript - a listing of those actions is provided below:

Live Example

Source Code

<style>
  .live {
    padding:10px;
    background-color:#eee;
    border:1px #444 dashed;
  }
  .live input {
    margin:5px;
  }
  .box {
    border:1px dashed;
    margin:5px;
  }
</style>
 
<div class="live">
  <input type="button" value="Trigger JavaScript Alert" on="click then script[alert('it worked')]"/>
  <div on="click then add[class=box]">
    Click me to give me a border
  </div>
</div>

You can populate a <select> element (options for a drop-down menu) by using the value action.

<select on="l:items.response then value[property=rows,text=name,value=id]"></select>

where the data payload of l:items.response should look something like this:

{rows: [{name: Atlanta, id: 1},{name: New York, id: 2},{name: Los Angeles, id: 3}]}

Another <select>-specific action is selectOption which can be used to set the selected value based on the data payload.

<select on="l:select.request then selectOption[option]">
  <option value="1">one</option>
  <option value="2">two</option>
</select>

where the data payload would be:

{option: 2}

The following is a listing of other actions available in Entourage Expressions.