Question

How to access the text of the tags inside the stickly notes or app cards?(Using Web SDK v2)

  • 18 March 2024
  • 4 replies
  • 52 views
E
Badge +1

Greetings colleagues,

In the past, I developed a small private application with the web sdk v1. It was very basic, I added the application in the context menu and when selecting a series of widgets (sticky notes, app cards, etc..) my application appeared in the context menu and in its inner workings what it did was to go through the selected widgets, search the tags inside them and add those that matched a specific numerical format.

I want to migrate it to version 2 of the new sdk and the truth is, it is being quite difficult.

I have read the documentation and I think that the closest thing to my needs is to make a CustomAction.
I have been able to add my customAction to the context menu and show an information message when I click on it. 

I need to be able to read somehow the content of the tags, their text, but I can't find any way to do it. Is it possible to do it somehow? I share my code with you:


 

import type { CustomAction, CustomEvent } from "@mirohq/websdk-types";

const actionHandler = () => async (props: CustomEvent) => {
  // Do something with all tags whitin the selected widgets
  //let total = doSomething();
  await miro.board.notifications.showInfo("TOTAL POINTS: " /*+ total*/);
};

export async function init() {
  await miro.board.ui.on("custom:calculate", actionHandler());

  const calculateCustomAction: CustomAction = {
    scope: "local",
    event: "calculate",
    ui: {
      label: {
        en: "Calculate"
      },
      icon: "grid-six",
      description: {
        en: "Calculator"
      },
      position: 1,
    },
    predicate: {
      $or: [
        // Matching multiple types
        {type: "app_card"},
        {type: "card"},
        {type: "connector"},
        {type:"frame"},
        {type: "shape"},
        {type: "sticky_note"},
        {type: "text"}
      ],
    },
  };


  await miro.board.experimental.action.register(calculateCustomAction);
}

init();

In the actionHandler function I only see the tagIds as an array of ids but is it possible to access the text of these tags?

Thanks in advance

4 replies

Horea Porutiu
Rank
Userlevel 3
Badge

Hi @Eduardo Castellano 

How about something like this?

```

// Get all items with type: 'tag'
const tags = await miro.board.get({
  type: ['tag'],
});
console.log(tags)


```

Let me know if this solves your issue. Thanks :) 

E
Badge +1

Hi @Eduardo Castellano 

How about something like this?

```

// Get all items with type: 'tag'
const tags = await miro.board.get({
  type: ['tag'],
});
console.log(tags)


```

Let me know if this solves your issue. Thanks :) 

Thank you for your response,

The get function is valid yes, but it returns all the "Tag" objects of the whole board.

I need to get the tags only for the selected items.

I have so far only found a way to do it by accessing the tagIds property of the selected items. Then using the getById function I am able to access the content(title) of these tags. I would like to know if there is a faster and more elegant way to do it.

Horea Porutiu
Rank
Userlevel 3
Badge

Hi @Eduardo Castellano 

From what I can see, if you want to only get tags of selected items, then the only way to do so is to use the getSelection method in our WebSDK. 

From there, the getSelection method only returns IDs of the tags, but not the content. So I think it’s correct what you said that this requires two method calls instead of one. If we also returned content of the tags, instead of just the IDs, then it would just take one method call. 

This is a great suggestion and I will bring it up to our team. I’ll keep you updated if this WebSDK method response changes in the future. 

E
Badge +1

Thank you for confirming that what I am doing is the right thing to do.
I will keep an eye on the evolution of the SDK.

Best regards

Reply


Terms & Conditions