03.06-collections.md 2.25 KB
Newer Older
Mark van den Brink's avatar
Mark van den Brink committed
1
2
3
4
5
6
7
---
source: sections/_guide_blocks/03.06-collections.md
bookmark: collections
title: Collections
sub: true
---

8
Let's say you're building some kind of dropdown block. Dropdowns typically hold multiple options to choose from. And so you need a way to add and edit those options in the builder. We've got you covered! You need *collections* and they are quite easy to use. First of all you need to define the type of items for your collection.
Mark van den Brink's avatar
Mark van den Brink committed
9
10
11
12
13
14

![Screen recording - Collections](../../images/screen-recordings/collections.gif)

Have a look at the following example where we define the type `DropdownOption` for our dropdown example.

```typescript
15
import { Collection, definition, builder, name } from "{{ site.npm_packages.builder }}";
Mark van den Brink's avatar
Mark van den Brink committed
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { Dropdown } from "./dropdown";

export class DropdownOption extends Collection.Item<Dropdown> {
  @definition
  @name
  name = "";

  @editor
  defineEditor(): void {
  }
}

```

As you can see a collection item should extend the abstract class  `Collection.Item`.

### Implementing the collection
Next step is to add the actual collection to your block. To do so you need to add a member to your block class.

```typescript
36
import { Collection, NodeBlock, definition } from "{{ site.npm_packages.builder }}";
Mark van den Brink's avatar
Mark van den Brink committed
37
38
39
40
41
42
43
44
45
46
47
48
import { DropdownOption } from "./option";

export class Dropdown extends NodeBlock {
  @definition
  options = Collection.of(DropdownOption, this as Dropdown);
}
```

When you prefix the collection member with the `@definition` decorator, the collection will be automatically stored in the form definition!
{: .info }

### Showing the collection in the feature card
49
The final step is to show the collection builder in the feature card of your block. To do so, you should add a feature for the collection to your `@editor` method. Use the common `collection` card (a collection builder). It supports adding, editing and deleting items.
Mark van den Brink's avatar
Mark van den Brink committed
50
51
52
53
54
55
56
57
58
59
60
61
62

```typescript
@editor
defineEditor(): void {
  this.editor.collection({
    collection: this.options,
    title: "Dropdown options"
  });
}
```

This documentation is updated as we continue our work on Tripetto and build a community. Please [let us know](../support) if you run into issues or need additional information. We’re more than happy to keep you going and also improve the documentation.
{: .warning }