State memory
Store a boolean value in the block's state to track user progress.
Overview
The State memory property is used to store a boolean value in the block's state. This is ideal for tracking user progress such as whether a user has completed a task in a checklist.
Usage in a workflow
In a workflow, you can configure the state memory to track whether a user has exited a specific block. To configure the state memory, click on the field and select the block you want to track. The state memory will be set to true
when the user exits the selected block.
Usage in a block template
In a block template, you can define the state memory like any other property. The properties to fill out are:
- Title: The title of the state memory shown in the block editor.
- Description: The description of the state memory shown in the block editor (optional).
- Type: Select state memory from the dropdown.
- Key: The key of the boolean value stored in the block's state. This key is used to access the value in your application.
Example implementation
In this example, we'll create a simple checklist where each task is marked as completed when the user exits the specified block.
Create a block template
Create a block template with an array named tasks. Each item in the array includes a title and a completed property that is a State memory.
Create a UI component
Next, build a matching component in your application to render the checklist:
Here, Tailwind CSS classes style the list and Lucide provide icons. You can customize the component to match your application’s design system as needed.
Use the component in a workflow
Now we can use the Checklist component in a workflow. When the user enters the block, the Checklist component will render the list of tasks. Then when the user completes either the tour or the card task, the corresponding task will be marked as completed in the checklist.
Result
Now you have a block that renders a simple onboarding checklist and tracks the user progress. You can add as many tasks as you want and they will be rendered in the order you added them.
Last updated on