Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 40

Building Tool Management Forms

Recommended resources

Welcome back! In the last lesson, you successfully created and secured a private admin page, laying the groundwork for your platform's control panel. You now have a page, visible only to you, that lists all the tools in your database. This is a crucial step towards your goal of building a scalable system.

Today, we will bring that page to life. Our learning outcome is to create forms on the admin page to add new tools and edit existing ones. We'll implement the fundamental operations of content management, often called CRUD: Create, Read, Update, and Delete. By the end of this lesson, you'll have a fully functional interface for managing your library of tools without ever having to touch the database manually.

Given your experience with WordPress and Advanced Custom Fields (ACF), you can think of this process as building your own custom version of the WordPress admin editor. Your Tool data type is like a custom post type, its fields are your ACF fields, and the page we're building today is the editor where you'll create and manage those "posts."

Part 1: Creating New Tools (The "C" in CRUD)

First, we need a way to add new tools to your database. This involves creating a simple form with input fields and a button that triggers a workflow to save the data. The process involves three steps: designing the input form, creating the workflow, and connecting the inputs to the database fields.

A fantastic, clear explanation of this core Bubble skill is provided in a video by Airdev. It walks through the logic of saving data from inputs into the database.

Bubble.io for Beginners: Saving to the database [5/12]

This video covers the fundamentals of saving data to the Bubble database. We'll use its principles to build our "Create Tool" form.

Watch the following segments to understand the entire process: First, watch the conceptual overview from the beginning until the big picture. It explains the relationship between your app's pages (the shell) and the database (the content). Next, see how to add input elements to the page, from using input elements. Then, watch the section on creating a data type and its fields from the data tab. You've already created your Tool data type, but this is a great review of how fields are structured. Finally, see how the workflow is built to save the data from the workflow tab. This is the exact process we will replicate.

Action: Build the "Create Tool" Form

Now, let's apply this to your admin page.

  1. Design the Form:

    • On your admin page, add a Group element and label it something like "Add New Tool". Placing the form elements in a group helps with organization and responsive design later.
    • Inside this group, add the necessary input fields for creating a tool:
      • An Input element for the tool's Name.
      • A Multiline Input for the Description.
      • A Dropdown element for the Category.
        • Set Type of choices to Category (your Option Set).
        • Set Choice source to All Categories.
        • Set Option caption to Current option's Display.
      • A Checkbox with the label "Publish this tool?". We'll use this for the isPublished field.
    • Add a Button element below the inputs and label it "Create Tool".

  2. Create the Workflow:

    • Double-click the "Create Tool" button and click Start/Edit workflow.
    • The first action you'll add is Data (Things) > Create a new thing....
    • For the Type, select Tool.
    • Now, click + Set another field to map each field in your Tool data type to the corresponding input element on your page.
      • Name = Input Name's value
      • Description = Multiline Input Description's value
      • Category = Dropdown Category's value
      • isPublished = Checkbox Publish's value is "yes"

This workflow should look similar to the one in the image below, where various input values are being mapped to the fields of a new database entry.

This image shows an example of a "Create a new thing" workflow. Notice how each field on the left (like Category, Contact, Cost) is being set to the value of an input element on the page.
  1. Reset the Inputs:
    • After the Create a new thing... action, add a new action: Element Actions > Reset inputs. This clears the form, making it ready for the next entry. This is a small but important user experience detail for an admin panel.

Test it out! Preview your page, fill out the form, and click "Create Tool". You should see the new tool appear in your repeating group below.

Part 2: Updating Existing Tools (The "U" in CRUD)

Now that you can create tools, you need a way to edit them. A common and clean way to do this is by using a popup. An "edit" icon in each row of your repeating group will open a popup containing a form pre-filled with that specific tool's data.

The process of sending data from a repeating group cell to a popup is a fundamental pattern in Bubble. An excellent article from Nocode Assistant breaks this down step-by-step.

How to send data from Repeating group to Popup

This article clearly explains the workflow for displaying a specific record's data inside a popup, which is exactly what we need for our edit functionality.

Read the first major section, "Sending one data type to a popup". Pay close attention to how the popup's "Type of content" is set and how the workflow uses the "Display data" action.

Action: Build the "Edit Tool" Popup

Let's implement this elegant solution.

  1. Add the "Edit" Icon:

    • Go to your admin page and inside the first cell of your Tool repeating group, add an Icon element. Choose an edit icon (like a pencil).

  2. Create and Configure the Popup:

    • From the Containers section of the elements palette, drag a Popup element onto your page.
    • In the popup's property editor, set its Type of content to Tool. Leave the Data source blank; we will send this dynamically via the workflow.
    • Inside the popup, build a form similar to your "Create" form, with inputs for Name, Description, etc.
    • For each input, set the Initial content. For example, for the Name input, the initial content will be Parent group's Tool's Name. This is how the form gets pre-filled with the data from the tool you clicked on.

  3. Build the "Show and Display" Workflow:

    • Go back to the "edit" icon in your repeating group and start a workflow.
    • Step 1: Add the action Element Actions > Display data.
      • For Element, choose your new popup.
      • For Data to display, set it to Current cell's Tool.
    • Step 2: Add the action Element Actions > Show.
      • For Element, choose your popup again.

This two-step workflow first tells Bubble what data to show in the popup, and then it actually shows the popup.

This example shows a workflow where clicking an icon triggers the "Display data" action to send the "Current cell's" data to a popup, just before showing it.
  1. Build the "Save Changes" Workflow:
    • Inside the popup, add a "Save Changes" button.
    • Start a workflow from this button. The action will be Data (Things) > Make changes to thing....
      • The Thing to change is the tool that was sent to the popup, so you'll set it to Parent group's Tool.
      • Just like in the "Create" workflow, use + Set another field to map the popup's input values to the corresponding fields of the Thing to change.
    • As the final step in this workflow, add the action Element Actions > Hide and select your popup.

Now you have a complete editing flow! When you click the edit icon, the popup appears with the correct data. When you save changes, the database is updated, and the popup disappears.

Part 3: Deleting Tools (The "D" in CRUD)

The final piece of our management system is the ability to delete a tool. This is a powerful action, so we should always include a confirmation step.

  1. Add a "Delete" Icon: In your repeating group cell, next to the edit icon, add a new icon for deleting (e.g., a trash can).

  2. Create the Deletion Workflow:

    • Start a workflow from the delete icon.
    • The action is Data (Things) > Delete thing....
    • The Thing to delete is Current cell's Tool.
    • Crucially, before this action runs, you should ask the user for confirmation. Check the box Show a popup before running the next action and write a confirmation message like "Are you sure you want to delete this tool? This cannot be undone."

Now you have a safe way to remove tools from your database directly from the admin panel.

Conclusion

You have now successfully built a complete content management system for your tools. This admin page is the engine that will allow your multi-tool platform to grow and scale. You can now add, edit, and remove tools through a user-friendly interface, fulfilling a key requirement for your project.

Here are the key takeaways from today's lesson:

  • The Create a new thing workflow is used to add new records to your database from a form.
  • The Make changes to thing workflow is used to update existing records.
  • Sending data to a popup using the Display data action is a powerful and clean pattern for building editing interfaces.
  • Always use a confirmation step when implementing a destructive action like Delete thing.

In our next lesson, we'll refine the management process. We will create a simple workflow to quickly publish or unpublish tools directly from the admin list, giving you a fast way to control what's visible on your live site.