Skip to main content

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?

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

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

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.

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.

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.

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.

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