Advanced Topics

Enhance your board views and widgets with the advanced functionality of the apps framework

In this article, we'll go over some of the advanced tools that you can use to build views and widgets for your users.

You'll learn:

  • Adding settings to your views and widgets
  • Using our API to get data from connected boards
  • Saving persistent data using the storage API
  • Filtering the data your app shows based on the board filter
  • Executing actions in the UI


Adding settings to your views and widgets

Every view or widget in has a set of fields that lets a user customize that view or widget. Our apps framework allows you to add these fields to your custom views and widgets, and then your app can access the values that the user has configured via our SDK.

For example, the Timeline allows users to choose which columns are displayed, and the Chart lets users change the X axis and chart type. You can use any of the 12 fields we support.

To do this, first add a settings field to your feature to get the color value as an input. Then, we'll use the monday SDK to retrieve this setting's value and use it in our view or widget.

For example, here's a snippet that listens for changes and calls a callback when the settings field is changed by the user:

monday.listen("settings", res => {
  // {"fieldName": "fieldValue", "fieldName2": "fieldValue2"...}

Using the API to get and change data from connected boards

You can use the monday.api() method in the SDK to get and change data on behalf of the user who is using your app. Your app will have access based on the permission scopes defined within your app.

Our GraphQL API exposes methods to get board data, create items, notify people, and much more. Check out our API documentation for more information.

Using the SDK to get information about your app's context

Every board view and widget runs in a specific context and our SDK exposes methods to retrieve this information. The context data looks like this:

// Board view context
  "instanceId": 19324, // unique instance ID for the feature on the board
  "instanceType": "board_view", // feature type
  "boardIds": [3423243], // list of connected boards
  "viewMode": "fullscreen", // or "split"
  "theme": "light"  // or "dark"

// Dashboard widget context
  "instanceId": 54236,
  "instanceType": "dashboard_widget",
  "boardIds": [3423243, 943728],
  "viewMode" : "widget", // or "fullscreen"
  "theme": "light",  // or "dark"
  "editMode" : false // or true

To listen to changes in your app's context, add the following event listener to your code:

monday.listen("context", res => {
  // do Something

Saving persistent data using the storage API

The monday apps infrastructure includes a persistent key-value database storage that developers can leverage to store data without having to create their own backend and maintain their own database.

The database currently offers instance-level storage, meaning that each application instance (i.e. a single board view or a dashboard widget) maintains its own storage. Apps cannot share storage across accounts or even across apps installed in the same location.

Here is how you get a value from the storage API:'mykey').then(res => {

This is how you set a new value in your database:'mykey', 'Lorem Ipsum').then(res => {

Here is how you delete an item in your database:'mykey').then(res => {
  // { "success": true }

Retrieving the search query in your app

Using the monday SDK, you can also retrieve the entire search query string in your app. With this approach, you can retrieve the search query the user has entered in their board.

You can use either monday.listen('filter') or monday.get('filter') to return the search term(s).

The following example retrieves the search query string:

const callback = res => console.log(res);
monday.listen('filter', callback);

Filtering your app's data based on the board filter

The monday SDK also lets your app check if the user has filtered any items on their boards. With this approach, you can add flexibility to your app and create a unified experience for your users.

By using monday.listen("itemIds", callback), you can get a list of items that are displayed on the board.

The following example sets up a listener when the user filters data on the board:

monday.listen("itemIds", (res) => {
  console.log( );
  // [12345, 12346, 12347]

Executing actions in the UI

The SDK exposes methods to let your app execute commands in the UI. For example, you can open a UI component that lists the values of a given item, display a confirmation dialog, etc.

Open a card for a specific item

Apps that show data from items in the board can allow users to view and edit all of the data about the item by opening the item card.

You can do it using monday SDK with a simple call:

monday.execute('openItemCard', { itemId: });

Open confirmation dialog

You can use monday.execute("confirm", options) to open a confirmation dialog to your users.

monday.execute("confirm", {
   message: "Are you sure?", 
   confirmButton: "Let's go!", 
   cancelButton: "No way", 
   excludeCancelButton: false
}).then((res) => {
    // {"confirm": true}

Here's what the confirmation dialog will look like:

Display a notice message to the user

You can use monday.execute("notice", options) to display a message at the top of the user's page. Here is an example:

monday.execute("notice", { 
   message: "I'm a success message",
   type: "success", // or "error" (red), or "info" (blue)
   timeout: 10000,

This is what the success message will look like:

Congratulations Builder!

Once you've finished this article, read these to learn more about key concepts:


Do you have questions?

Join our developer community! You can share your questions and learn from fellow users and product experts.

Don’t forget to search before opening a new topic!

Did this page help you?