Workflows in Bubble allow you to define actions that occur in response to user events. In this case, we will configure a workflow that triggers when the user interacts with the Google Drive Picker element.
5.1 Create a Workflow Event
-
Select the Google Drive Picker Element :
- In the Design Editor, click on the Google Drive Picker element you added.
-
Go to the Workflows Section :
- In the element's properties panel, locate the "Start/Edit Workflow" tab and click on it.
-
Define the Event That Triggers the Workflow :
- Select the appropriate event, such as "When Google Drive Picker is clicked" or "When Google Drive Picker selection is completed" , depending on the available options.
5.2 Configure Actions in the Workflow
Depending on your needs, you can configure different actions that will occur after the user selects files.
5.2.1 Open the Google Drive Picker
- Add an Action to Open the Picker :
- Within the workflow, add a new action by selecting "Element Actions" > "Show" > "Google Drive Picker" .
- Note : Some plugins may require the picker-opening action to be performed directly from the element, so ensure you follow the plugin's specific instructions.
5.2.2 Handle File Selection Based on Mode
Depending on the selected operation mode, the plugin will trigger different events:
-
Select Mode (onFilesSelected
) :
- Triggered when the user selects files in standard mode.
- You can configure actions to process the basic metadata of the files.
-
Download Mode (onFilesDownload
) :
- Triggered when file preparation for download is complete.
- You can configure actions to handle direct download URLs.
-
Share Mode (onFilesShare
) :
- Triggered when sharing links are generated.
- You can configure actions to use different types of sharing links.
-
All Mode (onFilesAll
) :
- Triggered when all operations in combined mode are complete.
- You can configure actions that utilize all available data types.
5.2.3 Example of a Complete Workflow
Below is an example of how a workflow could be configured to handle file selection and store the data in the database.
-
Event :
- "When Google Drive Picker selection is completed"
-
Actions :
-
Action 1: Show the Picker
- Action Type : Element Actions > Show > Google Drive Picker
- Description : Opens the Google Drive Picker when the user clicks the button.
-
Action 2: Save Selected Files in the Database
- Action Type : Data > Create a new thing
- Thing Type : File
- Fields :
- Name :
Google Drive Picker's file_names
- File ID :
Google Drive Picker's file_ids
- MIME Type :
Google Drive Picker's file_mime_types
- URL :
Google Drive Picker's file_urls
- Thumbnail :
Google Drive Picker's file_thumbnails
- Size :
Google Drive Picker's file_sizes
- Owner :
Google Drive Picker's file_owners
-
Action 3: Display Error or Warning Messages (Optional)
- Condition :
Google Drive Picker's error_message is not empty
- Action Type : Element Actions > Display data > Display message in a dedicated Text Element
- Description : Displays the error message in a dedicated text element.
- Condition :
Google Drive Picker's warning_message is not empty
- Action Type : Element Actions > Display data > Display message in a dedicated Text Element
- Description : Displays the warning message in a dedicated text element.
By following these steps, you will have successfully configured workflows to handle user interactions with the Google Drive Picker element. These workflows ensure that file selections are processed, stored, and displayed appropriately, while also providing feedback to users through error and warning messages.
Comments (00)