> Markdown version of [Remote Procedure Calls](https://vaadin.com/docs/v24/flow/create-ui/element-api/client-server-rpc). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# Remote Procedure Calls

Remote procedure calls (RPCs) are a way to run procedures or subroutines in a different address space, typically on another machine. Vaadin Flow handles server-client communication by allowing RPC calls from the server to the client — and vice versa.

## <a id="calling-client-side-methods-from-the-server"></a>Calling Client-Side Methods from the Server

You can run client-side methods from the server by accessing the `Element` API.

### <a id="calljsfunction-method"></a>`callJsFunction` Method

The `callJsFunction()` method allows you to run a client-side component function from the server side. The method accepts two parameters: the name of the function to call; and the arguments to pass to the function.

The arguments passed to the function must be a type supported by the communication mechanism. The supported types are `String`, `Boolean`, `Integer`, `Double`, `JsonValue`, `Element`, and `Component`.

The example below uses the `callJsFunction()` method to run the `this.clearSelection()` function:

```java
public void clearSelection() {
    getElement().callJsFunction("clearSelection");
}
```

This next example uses the `callJsFunction()` method to run the `this.expand(otherComponentElement)` function:

```java
public void setExpanded(Component otherComponent) {
    getElement().callJsFunction("expand",
            otherComponent.getElement());
}
```

### <a id="executejs-method"></a>`executeJs` Method

You can also use the generic `executeJs()` method to run JavaScript asynchronously from the server side. This method can be used in addition to the `callJsFunction()` method when calling any JavaScript.

The `executeJs()` method accepts two parameters: the JavaScript expression to invoke; and the parameters to pass to the expression. The given parameters are available as variables named `$0`, `$1`, and so on.

The arguments passed to the expression must be a type supported by the communication mechanism. The supported types are `String`, `Integer`, `Double`, `Boolean` and `Element`.

Below is an example using the `executeJs()` method:

```java
public void complete() {
    getElement().executeJs("MyModule.complete($0)", true);
}
```

It’s also possible to call the `executeJs()` method to access methods and fields of a Web Component using `this.myFieldName`. If the element doesn’t need to be initialized, you can use the `UI.getCurrent().getPage().executeJs()` method instead.

### <a id="return-values"></a>Return Values

The return value from the JavaScript function called using `callJsFunction()`, or the value from a `return` statement in an `executeJs()` expression can be accessed by adding a listener to the `PendingJavaScriptResult` instance returned from either method.

This example shows how to check if the browser supports Constructable Style Sheets:

```java
public void checkConstructableStylesheets() {
    getElement().executeJs(
            "return 'adoptedStyleSheets' in document")
            .then(Boolean.class, supported -> {
                if (supported) {
                    System.out.println(
                            "Feature is supported");
                } else {
                    System.out.println(
                            "Feature isn't supported");
                }
            });
}
```

> **Tip:** If the return value is a JavaScript `Promise`, a return value is sent to the server only when the `Promise` is resolved.

## <a id="calling-server-side-methods-from-the-client"></a>Calling Server-Side Methods from the Client

Below are a few server-side methods that may be called from the client.

### <a id="clientcallable-annotation"></a>`@ClientCallable` Annotation

The `@ClientCallable` annotation allows you to invoke a server-side method from the client side. It marks a method in a `Component` subclass that can be called from the client side using the `element.$server.serverMethodName(args)` notation. In client-side Polymer template code, `this` refers to the corresponding element so that the calling convention is `this.$server.serverMethodName(args)`.

You can use it anywhere in your client-side Polymer class implementation, and you can pass your own arguments in the method. The types should match the method declaration on the server side. The supported argument types are:

- `boolean` , `int`, `double`, their boxed types (i.e., `Boolean` , `Integer`, `Double`);

- `String`;

- `JsonValue`;

- enumeration type which is addressed via a string value from the client-side JavaScript; and

- `TemplateModel` property types (see [Using Beans with a PolymerTemplate Model](https://vaadin.com/docs/v24/flow/create-ui/templates/polymer/model-bean.md)).

The client-side method returns a Promise, which is resolved asynchronously with the return value from the server, or `null` if the server-side return type is `void`. You can wait for the result using `Promise.then()`. In an `async` function, the `await` keyword can also be used to wait for the result.

This example uses `this.$server.getGreeting()` to call a server-side method and `await` the result:

```javascript
async getServerGreeting() {
  let greeting = await this.$server.getGreeting("JavaScript");
  console.log(greeting);
}
```

This next example uses `this.$server.getGreeting()` to call a server-side method and wait for the result in a callback:

```javascript
getServerGreeting() {
  let greetingPromise = this.$server.getGreeting("JavaScript");
  greetingPromise.then(greeting => console.log(greeting));
}
```

This last example uses the `@ClientCallable` annotation on the server side:

```java
@ClientCallable
public String getGreeting(String name) {
    return "Hello " + name;
}
```

> **Important:** Property changes, DOM events, client-delegate methods (i.e., methods annotated with `@ClientCallable`), and event-handler methods (i.e., `PolymerTemplate` methods annotated with `@EventHandler`) are blocked for disabled components.

It’s worth noting that if a component with the `@ClientCallable` method is underneath a modal dialog or component, it’s considered *inert*. That means it’s not available for interaction, including RPC calls. If you want the `@ClientCallable` method to be available when a component is inert, you’ll need to annotate it with the `@AllowInert` annotation. Consult the [Server-Side Modality documentation](https://vaadin.com/docs/v24/flow/advanced/server-side-modality.md) for more information.

The example below uses the `@AllowInert` annotation to allow calls to an inert component:

```java
@ClientCallable
@AllowInert
public String getGreeting(String name) {
    return "Hello " + name;
}
```

`AB7EDF45-DB22-4560-AF27-FF1DC6944482`