📌 How to Use the Post-It Board Plugin
This plugin lets your users create draggable, editable post-it notes on a canvas in your Bubble app. Follow the steps below to set it up correctly.

---

🔧 SETUP INSTRUCTIONS

1. Install the Post-It Notes Board plugin on your app.

2. Create Your Data Type

Create a new data type in your Bubble database to represent a Post-It. For example: `PostIt` and add these fields to it:

- Content (text)
- Plugin-ID (text)
- Custom-Style (text)

Note that the Plugin-ID is different from Bubble's unique ID. The Plugin-ID is generated by the plugin.

3. Add a standard Group to your page

Drag a Bubble Group element onto your page. This group will become your canvas where the Post-Its will be placed. Give this group a unique ID attribute (e.g., `canvas_id`). Make sure your Bubble App has ID fields enabled.

4. Place the Plugin Element 'PostItBoard' on the page

Add the PostItBoard plugin element onto your page (anywhere). Fill in the details as follows:

- Canvas ID is the id from the group in step 3 (e.g. canvas_id)
- Post It JSON holds a list of objects from step 2. You can do a 'Search For'  where each object is :format_as_text of the form:

{
 "postItId": "text",
 "customStyle": Object,
 "text": "text"
}

Note that customStyle is an Object rather than a text. Then have the delimiter and split by function with the same character, which is a '~' in the demo.

5. Add an event 'PostItBoard Created'

In the workflows, add an event 'PostItBoard Created' that triggers when the user clicks on the canvas group (from step 3). In that event, add an action to Create a Thing (Post IT or data object from step 2). Make sure you set each field of the object to the corresponding property of 'This PostItBoard.'

6. Add an event 'PostItBoard Updated'

Add an event 'PostItBoard Updated' that triggers when the users moves the Post It or alters the text content. Have this event a 'Make Changes to Thing' that will save the changes to the database. Note that you have to do a 'Search for Post-It' where Plugin-ID is the field from step 3. When making changes, only make changes to the Content and Custom-Styles fields.

7. Add an event 'PostItBoard Deleted'

Add an event 'PostItBoard Deleted' that triggers when the user deletes a PostIt. Have this event trigger a Delete Thing action where the Thing is search for a Thing with a PostItId in the database.