# 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`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://medusa-ui.gitbook.io/docs/medusa/expressions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.