Conditional button

An example of a simple button that only conditionally shows up

Conditional button

This illustrates the combination of classic thymeleaf tags with medusa tags. In this arbitrary example, the button will only be rendered if you enter a value in the text field that is divisible by 2.

Number that shows button if divisible by 2:

Client

<label>
    <p>Number that shows button if divisible by 2:</p>
    <input id="number-value" type="number" value="1" m:change="checkCondition(:{#number-value})" />
</label>
<br/>
<p><button th:if="${condition}" m:click="noAction()">Button that shows up conditionally</button></p>

Server

import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;

import java.util.List;

import static io.getmedusa.medusa.core.attributes.Attribute.$$;

@UIEventPage(path = "/detail/conditional-button", file = "/pages/conditional-button.html")
public class ConditionalButtonController {

    public List<Attribute> setupAttributes() {
        return $$("condition", false);
    }

    public List<Attribute> checkCondition(int amount) {
        return $$("condition", amount % 2 == 0);
    }

    public void noAction() {}

}