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 { ComponentModelBase, serializable } 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