Widget GoogleDocsPicker

The GoogleDocsPicker widget allows users to select and import documents from Google Drive directly into your application. It provides a seamless integration with Google Drive API, enabling users to browse, select, and upload files from their Google Drive account.

Overview​

This widget creates a button that, when clicked, opens the Google Drive Picker interface. Users can browse through their files, shared files, and recently accessed documents. Selected files are automatically downloaded and uploaded to your platform's file system.

Basic Configuration​

Global Settings​

• Name: Display name for the widget
• Variable/Model: The variable name that will store the selected files array
• Button Text: Text displayed on the picker button

Button Configuration​

• Button Type: Visual style of the button

  • primary (blue)
  • success (green)
  • info (gray)
  • warning (orange)
  • danger (red)

• Button Size: Size of the button

  • medium
  • small
  • mini

• Button Alignment: Horizontal alignment

  • left
  • center
  • right

• Icons: Optional prefix and suffix icons to enhance the button appearance

  • Prefix Icon: Icon displayed before the button text
  • Suffix Icon: Icon displayed after the button text

Credentials Configuration​

The widget requires Google Drive API credentials to function properly. These should be configured as environment variables:

Required Credentials​

• Client ID: OAuth 2.0 client ID from Google Cloud Console
• Client Secret: OAuth 2.0 client secret from Google Cloud Console
• API Key: Google Drive API key from Google Cloud Console

Setting Up Credentials​

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Google Drive API and Google Picker API
4. Create OAuth 2.0 credentials and API key
5. Configure the credentials in your platform's environment variables
6. Select the appropriate variables in the widget configuration:
   • Client Id: Select from available environment variables
   • Client Secret: Select from available environment variables
   • Api Key: Select from available environment variables

Features​

File Selection Interface​

The widget opens Google Drive Picker with multiple views:

• My Drive: Files owned by the user
• Shared with me: Files shared by others
• Shared drives: Team drive files
• Recent: Recently accessed files

Supported File Types​

The widget handles two categories of files:

1. Native Google Files: Documents, Spreadsheets, Presentations
   • Automatically exported to standard formats (PDF for docs, CSV for sheets)
2. Regular Files: All other file types
   • Downloaded in their original format

File Management​

After selection, files are displayed with:

• File name with clickable link to view/download
• Upload progress indicator during processing
• Remove button to delete files from selection
• Status indicators showing upload success/failure

Data Structure​

The widget stores selected files in an array format:

[
  {
    "_id": "file_id",
    "filename": "document.pdf",
    "status": "success",
    "sfType": "application/pdf",
    // additional file metadata
  }
]

Validation Options​

Screen-based Validation​

Configure different validation states for different screens/contexts:

• Available: Whether the widget is available on the screen
• Visible: Whether the widget is visible to users
• Required: Whether file selection is mandatory
• Disable: Whether the widget is disabled

Advanced Conditions​

Use dynamic conditions with variables:

// Example: Make required only if another field has value
{{otherField}} !== ''

// Example: Show only for specific user roles  
{{user.role}} === 'admin'

Validation Rules​

Add custom validation rules with messages:

• Rule Types: Various built-in validation rules
• Custom Values: Rule-specific parameters
• Error Messages: Custom messages shown to users on validation failure

Styling Options​

Layout Options​

• Width: Custom width (CSS units: px, %, em, etc.)
• Height: Custom height for the widget container
• Layout: Block or inline display
• Border: Toggle border display

CSS Customization​

• CSS Classes: Add custom CSS classes for styling
• Dynamic Classes: Use conditions to apply classes based on data state

Actions and Events​

Click Actions​

Configure what happens when files are selected or removed:

• On Click: Custom JavaScript code executed on button click
• On Selection: Actions triggered when files are selected
• On Remove: Actions triggered when files are removed

Available Variables​

In action scripts, you can access:

• SF_input: Current input state and selected files
• SF_currentIndex: Current loop index (if in a loop)
• Model variables from your interface

Usage Examples​

Basic Configuration​

{
  "type": "googleDocsPicker",
  "name": "Select Documents",
  "model": "selectedFiles",
  "options": {
    "type": "primary",
    "size": "medium",
    "float": "left"
  }
}

With Validation​

{
  "type": "googleDocsPicker",
  "name": "Required Documents",
  "model": "documents",
  "options": {
    "validation": {
      "screen1": {
        "visible": true,
        "required": true,
        "disable": false
      }
    }
  }
}

Advanced Configuration​

{
  "type": "googleDocsPicker",
  "name": "Project Files",
  "model": "projectDocs",
  "options": {
    "type": "success",
    "size": "medium",
    "prefixIcon": "el-icon-folder",
    "validation": {
      "screen1": {
        "visible": "{{project.status}} === 'active'",
        "required": "{{project.type}} === 'documentation'"
      }
    }
  }
}

Security Considerations​

• Ensure proper OAuth scope configuration
• Use environment variables for sensitive credentials
• Implement proper access controls for file uploads
• Validate file types and sizes on the server side

Troubleshooting​

Common Issues​

1. Authentication Errors: Verify credentials are correctly configured
2. Picker Not Opening: Check if Google APIs are enabled
3. File Upload Failures: Verify server-side file handling
4. CORS Issues: Ensure proper domain configuration in Google Console

Debug Tips​

• Check browser console for API errors
• Verify OAuth redirect URIs match your domain
• Test with different file types and sizes
• Monitor network requests for API call failures

Browser Support​

The widget requires modern browsers with support for:

• ES6 JavaScript features
• OAuth 2.0 authentication
• File API for upload handling
• Modern CSS features for styling