Text Control

Text controls provide a flexible input field for accepting string values in your integration nodes. They support both single-line and multi-line text input, template expressions, and various text formatting options.

Basic Usage

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

// Simple text input
i.controls.text({
  label: 'User Name',
  placeholder: 'Enter your name...',
});

// Multi-line text area
i.controls.text({
  label: 'Description',
  placeholder: 'Enter a detailed description...',
  rows: 4,
});

Configuration Options

Prop

Type

Language Support

Text controls support syntax highlighting for various programming languages:

import { TextControlLanguage } from '@xentom/integration-framework';

// JSON syntax highlighting
i.controls.text({
  language: TextControlLanguage.JavaScript,
  default: '{\n  "key": "value"\n}',
  rows: 6,
});

// Markdown editor
i.controls.text({
  language: TextControlLanguage.Markdown,
  placeholder: '# Write your markdown here...',
  rows: 8,
});

Available languages:

TextControlLanguage.Plain - No syntax highlighting (default)
TextControlLanguage.Html - HTML markup
TextControlLanguage.Markdown - Markdown formatting
TextControlLanguage.JavaScript - JavaScript/JSON syntax

Template Expressions

When used in node pins, text controls support template expressions that are evaluated at runtime:

export const apiCall = i.nodes.action({
  inputs: {
    endpoint: i.pins.data({
      control: i.controls.text({
        label: 'API Endpoint',
        placeholder: 'https://api.example.com/users/{{ userId }}',
        default: '/api/data',
      }),
    }),
    message: i.pins.data({
      control: i.controls.text({
        label: 'Message Template',
        placeholder:
          'Hello {{ user.name }}, your order {{ order.id }} is ready!',
        rows: 3,
      }),
    }),
  },
  // ... rest of node definition
});

Template expressions use double curly braces {{ }} and can access:

Variables from previous nodes
Node-specific variables
Workflow context data

Sensitive Data

For API keys, passwords, and other sensitive information, use the sensitive property:

// Environment variable for API key
API_KEY: i.env({
  control: i.controls.text({
    label: 'API Key',
    description: 'Your service API key for authentication',
    placeholder: 'sk-...',
    sensitive: true, // Hides the value in UI
  }),
});

// Node input for password
password: i.pins.data({
  control: i.controls.text({
    label: 'Password',
    sensitive: true,
    placeholder: 'Enter password...',
  }),
});

Common Patterns

Configuration URLs

baseUrl: i.pins.data({
  control: i.controls.text({
    label: 'Base URL',
    description: 'The base URL for API requests',
    placeholder: 'https://api.example.com',
    default: 'https://api.example.com/v1',
  }),
});

Code Snippets

customScript: i.pins.data({
  control: i.controls.text({
    label: 'Custom Script',
    description: 'JavaScript code to execute',
    language: TextControlLanguage.JavaScript,
    placeholder: 'function transform(data) {\n  return data;\n}',
    rows: 10,
  }),
});

Long Form Text

emailBody: i.pins.data({
  control: i.controls.text({
    label: 'Email Content',
    description: 'The email message body',
    placeholder: 'Write your email message here...',
    rows: 8,
  }),
});

Usage Context

Text controls can be used in two contexts:

Environment Variables: Global configuration values set during integration setup
Node Pins: Input values for individual nodes that can include template expressions

The behavior and available features may vary slightly between these contexts, with template expression support being specific to node pins.

On this page