Workflows in Bubble allow you to define actions that occur in response to user events. In this case, we will configure a workflow that is triggered when the user interacts with the Google Picker element.

5.1. Create a Workflow Event

1. Select the Google Picker Element :

   • In the Design Editor, click on the Google Picker element you have added.

2. Go to the Workflows Section :

   • In the element’s properties panel, locate the "Start/Edit Workflow" tab and click on it.

3. Define the Event that Triggers the Workflow :

   • Select the appropriate event, for example:

     • "When Google Picker is clicked"

     • "When Google 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 Picker

1. Add an Action to Open the Picker :

   • Within the workflow, add a new action by selecting "Element Actions" > "Show" > "Google Picker" .

   • Note: Some plugins may require the Picker opening action to be performed directly from the element, so ensure you follow the specific plugin instructions.

5.2.2. Handle File Selection

1. Action to Retrieve File Data :

   • After the user selects files, their data will be published in the plugin’s states (e.g., file_ids, file_names, etc.).

2. Use the Data in Your Application :

   • You can use this data to:

     • Display in a Repeating Group : Show the list of selected files.

     • Save to the Database : Store the information of the selected files in your database for future use.

     • Perform Additional Actions : Such as generating download links, displaying thumbnails, etc.

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 files in the database.

1. Event : "When Google Picker selection is completed"

2. Actions :

   • Action 1: Show the Picker

     • Action Type : Element Actions > Show > Google Picker

     • Description : Opens the Google Picker when the user clicks the button.

   • Action 2: Save Selected Files to the Database

     • Action Type : Data > Create a new thing

     • Thing Type : File

     • Fields :

       • Name : Google Picker's file_names

       • File ID : Google Picker's file_ids

       • MIME Type : Google Picker's file_mime_types

       • URL : Google Picker's file_urls

       • Thumbnail : Google Picker's file_thumbnails

       • Size : Google Picker's file_sizes

       • Owner : Google Picker's file_owners

   • Action 3: Display Error or Warning Messages (Optional)

     • Condition : Google Picker's error_message is not empty

     • Action Type : Element Actions > Display data > Display message in a Text Element

     • Description : Displays the error message in a dedicated text element.

     • Condition : Google Picker's warning_message is not empty

     • Action Type : Element Actions > Display data > Display message in a Text Element

     • Description : Displays the warning message in a dedicated text element.