Skip to main content

Using the canExecute Command Hook

This article will guide you through how to prevent a custom command from executing through the canExecute hook.


Create an App with an IWTM and a Custom Component

First, let's create an app with an IWTM and a custom component that implements a simple command that displays an alert.

<?xml version="1.0" encoding="UTF-8"?>
<layout xmlns="" xmlns:custom="custom.abc123">
<iwtm config="iwtm-config" slot="top-left" />
<custom:custom-component margin="3" slot="top-center"/>

Add a Button to Toggle the canExecute Status

Next, let's add a button to the custom component that will toggle the canExecute status of the custom.command-with-can-execute command.

import {
} from "@vertigis/web/components";
import Button from "@vertigis/web/ui/Button";
import React from "react";

import CustomModel from "./CustomModel";

const CustomComponent = (
props: LayoutElementProperties<CustomModel>
) => {
const { model } = props;

return (
<LayoutElement {...props}>
<Button onClick={() => model.toggleCanExecute()}>
Toggle Can Execute

export default CustomComponent;

Implement the canExecute Function

Finally, we need to implement the canExecute method for the custom.command-with-can-execute command. This method should be decorated with @canExecute and return a boolean indicating whether the command can execute.


If the command takes an argument, the @canExecute method will also be passed that argument.

import {
} from "@vertigis/web/models";
import { command, canExecute } from "@vertigis/web/messaging";

export default class CustomModel extends ComponentModelBase {
private _canExecuteValue: boolean = false;

protected _commandWithCanExecute(): void {
message: "Executed `custom.command-with-can-execute`",

protected _canExecuteImplementation_(): boolean {
return this._canExecuteValue;

toggleCanExecute(): void {
this._canExecuteValue = !this._canExecuteValue;

Live Sample

Check out a live SDK sample of a command that has a canExecute hook.

Next Steps

Commands and Operations in Services

Learn more about commands and operations in services

Custom Services

Learn more about custom services