> For the complete documentation index, see [llms.txt](https://medusa-ui.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://medusa-ui.gitbook.io/docs/medusa/expressions.md).

# Expressions

### Value insertion - Content

#### HTML

```
<p>Counter: <m:text item="counter-value" /></p>
```

#### Java

```
//optional - initial value
@Override
public PageAttributes setupAttributes(ServerRequest request, SecurityContext securityContext) {
    return new PageAttributes().with("counter-value", 0);
}

//value can change upon any event
public DOMChanges anyEvent() {
    //...
    return DOMChanges.of("counter-value", 3);
}
```

Through the use of the \<m:text> tag, values can be inserted anywhere. This includes the body, the title of the page or as a parameter of a tag. Initial value comes from the `setupAttributes()` per request and can also be changed in any event as a `DOMChange.`

### Dynamic title

#### HTML

```
<title m:item="title"></title>
```

#### Java

```
//initial value
@Override
public PageAttributes setupAttributes(ServerRequest request, SecurityContext securityContext) {
    return new PageAttributes().with("title", "Hello world");
}

//title can change upon any event
public DOMChanges anyEvent() {
    return DOMChanges.of("title", "Hello new title");
}
```

### Click event - m:click

#### HTML

```
<button m:click="increaseCounter(1, 'ABC')">Increase counter</button>
```

#### Java

```
public DOMChanges increaseCounter(int parameter, String otherParam) {
    //...
    return of("counter-value", counter);
}

or 

public void increaseCounter(int parameter) {
    //...
}
```

Executes an event function when clicking the element. Method on the Java side can return DOMChanges or be void.

### Change event - m:change

#### HTML

```
<input m:change="search(this.value)"/>
```

#### Java

```
public DOMChanges search(String value) {
    //...
    return of("search-result", lookupResult);
}

or 

public void search(String value) {
    //...
}
```

Executes an event function when the value of an `<input>`, `<select>`, or`<textarea>`  element has been changed. The event also applies to elements with`contenteditable`enabled, and to any element when`designMode`is turned on.

### On enter event - m-onenter

#### HTML

```
<input m:onenter="search(this.value)" type="text" />
```

#### Java

```
public DOMChanges search(String value) {
    //...
    return of("search-result", lookupResult);
}

or 

public void search(String value) {
    //...
}
```

Event that gets executed whenever the `enter`key is pressed with this element in focus.

### Iterations

#### HTML

```
<m:foreach collection="orders" eachName="order">
    <p>
        Product: <m:text item="order.productName"/> 
        <button m:click="cancelOrder(order.id)">Remove</button>
    </p>
</m:foreach>
```

#### Java

```
//optional - initial value
@Override
public PageAttributes setupAttributes(ServerRequest request, SecurityContext securityContext) {
    return new PageAttributes().with("orders", new ArrayList<Order>());
}

//value can change upon any event
public DOMChanges anyEvent() {
    //...
    return DOMChanges.of("orders", Arrays.asList(new Order(1)));
}
```

Can iterate with a foreach over a variable that is a collection of elements. Optionally, you can add an `eachName`, which gives you access to an additional variable within the iteration under that name, containing the current iteration value.

### Conditionals

#### HTML

```
<m:if item="counter-value" gt="5">
    <p>Counter is above 5</p>

    <m:elseif item="counter-value" gt="2">
        <p>Counter is above 2</p>
    </m:elseif>

    <m:else>
        <p>Counter is below 2 and 5</p>
    </m:else>
</m:if>
```

You can use an if structure as a dynamic conditional through the use of the`<m:if condition="x" ...]</m:if>`tag. Also allows for `m:elseif` and `m:else`.

Possible conditions are:

* `eq="5"` - true if equals to the condition
* `not="5"`- true if not equals to the condition
* `gt="5"` - true if greater than but not equals to the condition
* `lt="5"` - true if less than but not equals to the condition
* `gte="5"` - true if greater than or equals to the condition
* `lte="5"` - true if less than or equals to the condition

### Conditionally add class

#### HTML

```
<div class="red" m:class-append="dynamic-class"></div>
```

Conditionally add a class by using an inline if expression in `m:class-append`. In the above example, if dynamic-class is the value *`blue`*, the div will have `class="red blue"`.

### Conditionally hide an element

#### HTML

```
<button m:click='order()' type="button" m:hide="some-variable">Order</button>
```

You can show or hide an element based on a value or expression by using `m:hide`.

### Conditionally disable an element

#### HTML

```
<button m:click="clear()" m:disabled="some-variable">Clear</button>
```

You can disable an element conditionally by using a value or expression in `m:disabled`.