Za pomocą monday.listen możesz utworzyć nasłuchiwacz, który umożliwia subskrybowanie określonych typów zdarzeń po stronie klienta.

Parametry

Parametr	Opis
typeOrTypes	Typ zdarzenia lub tablica typów zdarzeń, które chcesz subskrybować.
callback	Funkcja callback wywoływana po uruchomieniu nasłuchiwacza przez zdarzenie po stronie klienta.
params	Zarezerwowane do wykorzystania w przyszłości.

Zdarzenia

Możesz subskrybować następujące typy zdarzeń:

Typ	Opis
context	Wywoływane, gdy zmieni się jeden z parametrów w kontekście.
settings	Wywoływane, gdy użytkownik zmieni wartość ustawienia.
itemIds	Wywoływane, gdy zmieni się filtr tablicy, co wpływa na listę elementów widocznych w danym momencie. Uwaga: Zwrócona lista może być niekompletna. Użyj monday.listen('filter') i wykonaj zapytanie do API za pomocą items_page(query_params: ...), aby pobrać identyfikatory wszystkich pasujących elementów.
events	Wywoływane po wykonaniu działania na tablicy lub pulpicie. Obsługiwane zdarzenia: new_items, change_column_values, board_communication, new_zoom_meeting_started_by_me, post_resolved. Pamiętaj: zdarzenie change_column_values nie jest wywoływane w przypadku kolumny z nazwą.
filter	Wywoływane, gdy zmieni się filtr tablicy. Dane zdarzenia obejmują reguły filtra (rules) i operator (operator). W zależności od stanu interfejsu mogą też zawierać wyszukiwaną frazę (term).
location	Wywoływane, gdy zmieni się wartość lokalizacji.

Zwracana wartość

Zwraca funkcję, która anuluje subskrypcję nasłuchiwacza.

const unsubscribe = monday.listen("context", callback);

unsubscribe(); // cancels the listener

Przykłady

Dodawanie ustawień do widoków i widżetów

Każdy widok lub widżet w monday.com ma zestaw pól, które pozwalają użytkownikowi dostosować dany widok lub widżet. Framework aplikacji umożliwia dodanie tych pól do własnych widoków i widżetów. Następnie aplikacja może pobierać za pomocą SDK wartości ustawione przez użytkownika.

Na przykład widok Oś czasu pozwala użytkownikom wybrać wyświetlane kolumny, a wykres - zmienić oś X i typ wykresu. Możesz użyć dowolnego z 12 obsługiwanych przez nas pól.

Aby to zrobić, najpierw dodaj do swojej funkcji pole ustawienia, które pobierze wartość koloru. Następnie użyjemy SDK monday, aby pobrać wartość tego ustawienia i wykorzystać ją w widoku lub widżecie.

Poniższy fragment kodu nasłuchuje zmian i wywołuje funkcję callback, gdy użytkownik zmieni pole ustawienia:

monday.listen("settings", res => {
  console.log(res.data);
  // {"fieldName": "fieldValue", "fieldName2": "fieldValue2"...}
});

Subskrybowanie zmian ustawień i kontekstu

const callback = res => console.log(res);
monday.listen(['settings', 'context'], callback);

Nasłuchiwanie zmian kontekstu aplikacji

monday.listen("context", res => {
  console.log(res.data);
  // do Something
})

Subskrybowanie zdarzeń wynikających z działań na tablicy

const callback = res => console.log(res);
const unsubscribe = monday.listen("events", callback);

// When an item/s are created on the board:
// => { type: "new_items", itemIds: [5543, 5544, 5545], boardId: 3425 }

// When a column value changes for one of the items:
// => { type: "change_column_value", itemId: 12342, value: {...} }

Usuwanie nasłuchiwacza zdarzeń

Funkcja zwraca funkcję anulującą subskrypcję. Możesz ją wywołać, aby anulować subskrypcję.

const unsubscribe = monday.listen("events", (evt) => {
  console.log(evt);
});

unsubscribe();

Pobieranie filtra tablicy w aplikacji

Możesz pobrać w aplikacji bieżącą definicję filtra tablicy. Dzięki temu uzyskasz konfigurację filtra ustawioną przez użytkownika.

Możesz użyć monday.listen("filter") albo monday.get("filter"). Dane filtra obejmują operator (operator) i listę reguł (rules). Każda reguła odpowiada jednemu warunkowi filtrowania. Cały filtr składa się z tych reguł połączonych zgodnie z operatorem.

monday.listen("filter", (res) => {
  console.log(res.data);
  // Example shape:
  // {
  //   term: "hello world", // optional
  //   operator: "and",     // e.g. "and" | "or"
  //   rules: [
  //     // each rule represents a single filter condition
  //   ]
  // }
});

Filtrowanie danych aplikacji na podstawie filtra tablicy

SDK pozwala aplikacji sprawdzić, czy użytkownik przefiltrował elementy na swoich tablicach. Dzięki temu możesz zwiększyć elastyczność aplikacji i zapewnić użytkownikom spójne działanie.

Użyj monday.listen("itemIds", callback), aby pobrać listę identyfikatorów elementów widocznych obecnie na tablicy.

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

Pobieranie przez API identyfikatorów wszystkich przefiltrowanych elementów

monday.listen("itemIds") może nie zwrócić wszystkich identyfikatorów przefiltrowanych elementów. Zamiast tego nasłuchuj zdarzenia filter, aby pobrać reguły i operator filtra. Następnie przekaż je w zapytaniu GraphQL za pomocą items_page(query_params: ...). Użyj zwróconego kursora (cursor), aby pobierać kolejne strony wyników, aż nie będzie już następnych.

W tym przykładzie użyto SeamlessApiClient z pakietu @mondaydotcomorg/api - zalecanego sposobu wysyłania zapytań do API monday.com z poziomu funkcji aplikacji.

import { SeamlessApiClient } from "@mondaydotcomorg/api";

const seamlessApiClient = new SeamlessApiClient();

monday.listen("filter", async ({ data: filter }) => {
  const { operator, rules } = filter;

  // Pass the filter definition into items_page as query_params
  const query = `
    query ($boardIds: [ID!], $cursor: String, $queryParams: ItemsQueryParams) {
      boards(ids: $boardIds) {
        items_page(limit: 500, cursor: $cursor, query_params: $queryParams) {
          cursor
          items { id }
        }
      }
    }
  `;

  let cursor = null;
  const allIds = [];

  do {
    const { boards } = await seamlessApiClient.request(query, {
      boardIds: [String(contextData.boardId)],
      cursor,
      queryParams: { operator, rules },
    });

    const page = boards[0].items_page;
    allIds.push(...page.items.map((i) => i.id));
    cursor = page.cursor;
  } while (cursor);

  console.log("All filtered item IDs:", allIds);
});

Nasłuchiwanie lokalizacji URL w aplikacji

SDK pozwala nasłuchiwać zmian lokalizacji aplikacji wprowadzanych przez użytkownika. Możesz też użyć metody SDK monday.get("location"), aby pobrać lokalizację.

// assume the browser URL is https://monday.test.com/boards/123456789/views/87654321?app[id]=987&foo=bar
monday.listen("location", ({ data }) => {
  console.log("Current URL:", data.href); // https://monday.test.com/boards/123456789/views/87654321
  console.log("Current query:", data.query); // { id: "987" }
  console.log("Current query (stringified):", data.search); // "app[id]=987"
});

📘 Dołącz do naszej społeczności deweloperów!

Stworzyliśmy społeczność dla deweloperów. Możesz w niej wyszukiwać rozwiązania wśród wcześniejszych tematów, zadawać pytania, poznawać nowe funkcje i aktualizacje oraz wymieniać się wskazówkami. Dołącz do nas! 😎