Answered

Add Item to existing group

  • 14 May 2024
  • 7 replies
  • 51 views
J
Badge +1

The wiki states that i cannot group already grouped items:

  • Previously grouped items cannot be grouped again, this will cause an error. You can use the groupId property in the item to check whether it's already assigned to a group.

But i can do it in UI, just click on item, then ctrl+click on group and i have button in the middle:

So is there a way to add item to existing group? Or i have to make my own tool that will collect all grouped items first, then ungroup them, then form a new group with new item?

icon

Best answer by Mettin 15 May 2024, 10:04

View original

7 replies

J
Badge +1

I also tried to just create shape with already defined groupId and that doesn’t help.

Mettin
Rank
Userlevel 4
Badge +1

Hey @jirimoarichi,

Yes, you will have to ungroup/regroup to add new items to a group. This shouldnt be too much work, pseudo code:

const groupItems = async (item, addTo) => {
	const targetGroup = await miro.board.get({ addTo.groupId })
	if (targetGroup) {
	  const items = await targetGroup.ungroup()
		await miro.board.group({ items: [...items, item] })
	} else {
		await miro.board.group({ items: [item, addTo] })
	}
}

Let me know if this helps!

Cheers,
Mettin

J
Badge +1

Yes, thank you. Although i came accross another problem for another post maybe. If i delete item in group in UI, ‘group’ object is not updated (when i do board.get() again). So when i try to run this code it gives me error like ‘cant find object by id: id’, because this item with this id no longer exists (cause i deleted it in UI). But if i ungroup and regroup those items again in UI it works fine (because new group with new items generated). And group.sync() is not implemented yet unfortunately.

Mettin
Rank
Userlevel 4
Badge +1

Im assuming you are caching the `group` object in your code. Always make sure to fetch the items/group on click in your app. That way it should not be possible to have a deleted group in reference.

J
Badge +1

Yeah, i edited my reply when i thought about this. I call this code on click, yes. So when i delete item in group in UI and then do onClick() i also get group with non existing item.

Mettin
Rank
Userlevel 4
Badge +1

Could you provide a minimal reproducible example? Maybe just post your code that executes the grouping here even. Then I can test it in our playground and help you out.

J
Badge +1

I did a post about persistence here. There you can see my actions and a code snippet that fetches group. As for the code for grouping - it basicly same as yours (only on JS, it called onClick() also):

async function groupItems(item, addTo) {
    let targetGroup = await miro.board.getById(addTo.groupId)
    console.log(targetGroup);
    if (targetGroup) {
        let items = await targetGroup.ungroup()
        await miro.board.group({items: [...items, item]})
    } else {
        await miro.board.group({items: [item, addTo]})
    }
}

And it called from chain of methods in app.jsx;

<div className="cs1 ce12">
                <a
                    onClick={(event) => addHighlightUI()} // which leads to grouping method
                    className="button button-primary"
                >
                    Add highlight
                </a>
</div>

And i can just “not delete items manualy”, instead i can call code which will delete those items (i will track them in my plugin anyway) and then regroup those that left. So it’s not a big deal

Reply


Terms & Conditions