Shortcuts

Overview

Native shortcuts in Despia allow users to access critical application functionalities directly from outside the application. Users can long-press the app icon to reveal custom shortcuts that navigate to specific pages and execute custom JavaScript code.

Key Features

• Quick Access: Users can long-press the app icon to access shortcuts

• Custom Navigation: Each shortcut can redirect to a specific page within your application

• JavaScript Injection: Automatically execute custom JavaScript when the shortcut opens a page

• Workflow Automation: Trigger actions like opening modals or executing workflows without manual navigation

Setup Process

1. Access the Add-on Section

Navigate to the Despia editor and go to the add-on section. You'll find two categories:

• Hard-coded: Features that require app republishing when changed (includes shortcuts)

• Dynamic: SDK features that can be updated without republishing

Important: Shortcuts are hard-coded features. Any changes require republishing your application to the app store.

2. Create a New Quick Action

1. Navigate to the quick actions/shortcuts section

2. Click to create a new shortcut

3. You'll see a code editor (code is optional)

3. Configure the Shortcut

Required Fields:

Redirect Link

• Enter the URL of the page where the shortcut should navigate

• Example: https://yourapp.com/invoice or https://yourapp.com/contacts

• Important: Use links from your live branch if using branching to avoid production issues

Name

• Assign a descriptive name for your shortcut

• Example: "Create Invoice", "New Contact", "Despia Shortcut"

Icon

• Select an appropriate icon from the available options

Optional: Custom JavaScript Code

Add JavaScript code that will execute when the shortcut page loads. This enables automation beyond simple navigation.

Code Structure:

Copy(function() {
    // Your custom code here
    // Example: Open a modal automatically
    // Example: Trigger a workflow
    // Example: Call an API
})();

The code runs in a self-invoking function for the best experience.

4. JavaScript Capabilities

The JavaScript runs within your web application context, allowing you to:

• Open Modals/Popups: Automatically display creation forms

• Trigger Global Functions: Call global window functions like:

  Copywindow.openModal("example data")
  

• Trigger Workflows: Execute WeWeb workflows using:

  CopywwLib.wwWorkflow.executeGlobal('YOUR WEWEB WORKFLOW ID', "example data")
  

• Call APIs: Make API calls that wouldn't normally occur during navigation

• Click Elements: Programmatically click buttons to open popups

• Create Global Functions: Set up window functions to trigger specific actions

Example Use Case: Contact Creation Instead of navigating users to the contacts page where they must click "Create Contact", the shortcut can:

1. Navigate to the contacts page

2. Automatically open the "Create Contact" popup

3. Provide a seamless, automated experience

5. Testing and Deployment

1. Save your shortcut configuration

2. Publish your application (required for hard-coded features)

3. Build Time: Approximately 20 minutes

4. Testing: Available on TestFlight after build completion

Best Practices

1. Live Branch URLs: Always use URLs from your production/live branch

2. User Experience: Design shortcuts for frequently used actions

3. Automation: Use JavaScript to eliminate extra clicks

4. Testing: Test shortcuts thoroughly on TestFlight before production release

Common Use Cases

1. Quick Invoice Creation: Navigate directly to invoice creation with pre-opened form

2. New Contact: Open contacts page with "Add Contact" modal automatically displayed

3. Dashboard Access: Quick navigation to specific dashboard views

4. Workflow Triggers: Execute complex workflows with a single shortcut tap