# Calling Functions

## *"Call Function"* Action

Actions are meant to make the UI more functional. Using actions, you can navigate to a different page, change state of a widget, launch URLs, etc. In this case, we need to call a custom function in the SDK. So, we use the *Call Function* action.

Head over to *Develop Tab* located in the app bar.

<figure><img src="/files/vZcF6xwQA4c4L0QLQD5k" alt=""><figcaption><p>Develop Tab</p></figcaption></figure>

You should see the *Actions Panel* in the right. Now, select the node you wish to add the action to.

<figure><img src="/files/TLpL9KfjVo64Hy3TM2dt" alt=""><figcaption><p>Node selected</p></figcaption></figure>

To add an action, tap on the *add icon* and select *"Call Function Action"* from the dropdown.

<figure><img src="/files/XE7kq4OAQaeYkaBXtJbQ" alt=""><figcaption><p>Adding Call Function Action</p></figcaption></figure>

Next, tap on the *settings icon* to open the settings window.

<figure><img src="/files/K0mDoqsTdk92Jciop6C1" alt=""><figcaption><p>Action Settings Window</p></figcaption></figure>

Enter the custom function's name in the *Function Name Field*.

<figure><img src="/files/foOR9RyOJQlLjeYCRj6y" alt=""><figcaption><p>Function Name Field</p></figcaption></figure>

Action to call a custom function is now added to the node. Now, we need to provide the function in the SDK.

## Functions Field

We can provide custom functions to the `CodelesslyWidget` using its `functions` parameter which is of type `Map<String, CodelesslyFunction<T>>`. Map's key is the name of the function and value is `CodelesslyFunction` class that takes in the function itself in its constructor.

`CodelesslyFunction` has a parameter `call` which is a function with generic return type `T`. Here's an example of how we can declare functions in the widget.

```dart
CodelesslyWidget(
  functions: {
    'expandForecastPage': CodelesslyFunction((context, ref, params) {...}),
  }
);
```

`ref` is an instance of `CodelesslyContext` that you may use to access data and other functions from the SDK.

`params` is a Map that contains any parameters passed by the function when it is called. These parameters can be defined on the function call from the Editor.

<figure><img src="/files/9ptzICXl8kUJDwnVdZIr" alt=""><figcaption></figcaption></figure>

Now, node can access the function and call it on relevant trigger (*click* in this case).


---

# 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://docs.codelessly.com/codelessly-cloudui/calling-functions.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.