Switch Control

Switch controls provide a simple toggle interface for boolean values (true/false). They're ideal for enabling or disabling features, setting configuration flags, and any scenario where you need a clear on/off state.

Basic Usage

import * as i from '@xentom/integration-framework';

// Simple boolean toggle
i.controls.switch({
  label: 'Enable Notifications',
  defaultValue: true,
});

// With description
i.controls.switch({
  label: 'Debug Mode',
  description: 'Enable detailed logging for troubleshooting',
  defaultValue: false,
});

Configuration Options

Prop

Type

Common Use Cases

Feature Toggles

// Environment variable for global feature toggle
DEBUG_MODE: i.env({
  control: i.controls.switch({
    label: 'Debug Mode',
    description: 'Enable debug logging and verbose output',
    defaultValue: false,
  }),
});

// Node input for per-operation toggle
enableRetry: i.pins.data({
  control: i.controls.switch({
    label: 'Enable Retry',
    description: 'Automatically retry failed requests',
    defaultValue: true,
  }),
});

API Configuration

// SSL/TLS settings
useHttps: i.pins.data({
  control: i.controls.switch({
    label: 'Use HTTPS',
    description: 'Enable secure connection (recommended)',
    defaultValue: true,
  }),
});

// Validation options
strictValidation: i.pins.data({
  control: i.controls.switch({
    label: 'Strict Validation',
    description: 'Enforce strict data validation rules',
    defaultValue: false,
  }),
});

Data Processing Options

// Format settings
includeMetadata: i.pins.data({
  control: i.controls.switch({
    label: 'Include Metadata',
    description: 'Add timestamp and source information to output',
    defaultValue: false,
  }),
});

// Transform options
normalizeData: i.pins.data({
  control: i.controls.switch({
    label: 'Normalize Data',
    description: 'Convert all text to lowercase and trim whitespace',
    defaultValue: true,
  }),
});

Usage in Nodes

Switch controls work seamlessly in both environment variables and node pins:

export default i.integration({
  env: {
    // Global setting for the entire integration
    ENABLE_CACHING: i.env({
      control: i.controls.switch({
        label: 'Enable Caching',
        description: 'Cache API responses to improve performance',
        defaultValue: true,
      }),
    }),
  },

  nodes: {
    apiCall: i.nodes.callable({
      inputs: {
        // Per-node setting
        followRedirects: i.pins.data({
          control: i.controls.switch({
            label: 'Follow Redirects',
            description: 'Automatically follow HTTP redirects',
            defaultValue: true,
          }),
        }),
        validateResponse: i.pins.data({
          control: i.controls.switch({
            label: 'Validate Response',
            description: 'Validate API response against expected schema',
            defaultValue: false,
          }),
        }),
      },

      async run({ inputs, next, state }) {
        const options = {
          followRedirects: inputs.followRedirects,
          validateResponse: inputs.validateResponse,
        };

        // Use the boolean values in your logic
        if (options.followRedirects) {
          // Configure redirect handling
        }

        if (options.validateResponse) {
          // Add response validation
        }

        // Continue with API call...
        next({ success: true });
      },
    }),
  },
});

Conditional Logic

Switch controls are particularly useful for conditional execution paths:

conditionalProcessor: i.nodes.callable({
  inputs: {
    enableProcessing: i.pins.data({
      control: i.controls.switch({
        label: 'Enable Processing',
        defaultValue: true,
      }),
    }),
    data: i.pins.data({
      control: i.controls.text({
        placeholder: 'Enter data to process...',
      }),
    }),
  },

  outputs: {
    processed: i.pins.data(),
    skipped: i.pins.data(),
  },

  run({ inputs, next }) {
    if (inputs.enableProcessing) {
      // Process the data
      const result = processData(inputs.data);
      next({ processed: result });
    } else {
      // Skip processing
      next({ skipped: inputs.data });
    }
  },
});

Best Practices

Clear Labels

Use descriptive labels that clearly indicate what the switch controls:

// Good - Clear and specific
enableEmailNotifications: i.pins.data({
  control: i.controls.switch({
    label: 'Send Email Notifications',
    description: 'Email users when the process completes',
  }),
});

// Avoid - Vague or unclear
toggle: i.pins.data({
  control: i.controls.switch({
    label: 'Enable', // Enable what?
  }),
});

Sensible Defaults

Choose default values that represent the most common or safest option:

// Security-related settings default to safe option
enableCors: i.pins.data({
  control: i.controls.switch({
    label: 'Enable CORS',
    description: 'Allow cross-origin requests',
    defaultValue: false, // Default to secure
  }),
});

// User experience settings default to better experience
showProgressBar: i.pins.data({
  control: i.controls.switch({
    label: 'Show Progress Bar',
    description: 'Display progress during long operations',
    defaultValue: true, // Default to better UX
  }),
});

Helpful Descriptions

Provide context about what the switch does and when to use it:

batchProcessing: i.pins.data({
  control: i.controls.switch({
    label: 'Batch Processing',
    description:
      'Process multiple items together for better performance. Disable for real-time processing.',
    defaultValue: true,
  }),
});

Integration with Other Controls

Switch controls often work well alongside other control types:

// Enable/disable based on switch state
cacheSettings: i.pins.data({
  control: i.controls.switch({
    label: 'Enable Caching',
    defaultValue: false
  })
}),

// This would typically be conditional in the UI
cacheTimeout: i.pins.data({
  control: i.controls.select({
    label: 'Cache Timeout',
    options: [
      { value: 300, label: '5 minutes' },
      { value: 900, label: '15 minutes' },
      { value: 3600, label: '1 hour' }
    ]
  }),
  optional: true  // Only show when caching is enabled
})

Switch controls provide a simple but powerful way to make your integrations configurable and adaptable to different use cases while maintaining a clean and intuitive user interface.

On this page