Calling Functions

Learn how to call custom functions in the SDK.

"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.

Develop Tab

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

Node selected

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

Adding Call Function Action

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

Action Settings Window

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

Function Name Field

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.

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.

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