Skip to main content

Text Widget Documentation

The Text widget is used to display static or dynamic content in your interface. It supports rich HTML content, dynamic data binding, and comprehensive styling options.

Overview​

The Text widget renders as a paragraph element that can display formatted text, HTML content, and dynamic values from your data models. It's highly configurable and supports responsive design patterns.

Configuration Options​

Global Settings​

Basic Properties​

  • Name: A descriptive name for your text widget
  • Variable/Model: The data model variable to bind this widget to (optional for static content)

Content Configuration​

  • Content: Rich HTML content editor for defining the text content
    • Supports HTML formatting (bold, italic, lists, links, etc.)
    • Allows dynamic variable interpolation using {{variable_name}} syntax
    • Full WYSIWYG editor with formatting toolbar

Text Alignment​

Configure how the text content is aligned within the widget:

  • Left: Align text to the left (default)
  • Center: Center the text horizontally
  • Right: Align text to the right
  • Start: Align text to the start (language-dependent)
  • End: Align text to the end (language-dependent)
  • Justify: Justify text with even spacing

Validation and Visibility​

Screen-based Configuration​

Configure widget behavior across different interface screens:

  • Available: Whether the widget is available on each screen
  • Visible: Control visibility with boolean values or dynamic conditions
  • Required: Set requirement status (typically not applicable for text widgets)
  • Disable: Control if the widget is disabled or collapsed

Advanced Visibility Conditions​

  • Use JavaScript expressions for dynamic visibility
  • Reference other form variables using {{variable_name}} syntax
  • Support for complex conditional logic

Validation Rules​

While text widgets typically don't require validation, you can add custom rules:

  • Custom Rules: Define validation logic if needed
  • Error Messages: Custom error messages for validation failures

Styling and Layout​

CSS Classes​

  • Static Classes: Add custom CSS classes for styling
  • Dynamic Classes: Use JavaScript expressions to apply conditional classes
    • Reference data models using models.variable_name
    • Support for conditional class application

Dimensions​

  • Width: Set custom width (supports CSS units: px, %, rem, etc.)
  • Height: Set custom height (supports CSS units: px, %, rem, etc.)

Layout Options​

  • Inline/Block: Choose between inline and block display modes
  • Border: Enable/disable border display

Dynamic Content​

Variable Interpolation​

Use {{variable_name}} syntax to include dynamic content:

Welcome, {{user.firstName}} {{user.lastName}}!
Your last login was on {{user.lastLogin}}.

HTML Content Support​

The content editor supports full HTML formatting:

<h3>Important Notice</h3>
<p>This is a <strong>bold statement</strong> with <em>italic text</em>.</p>
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Conditional Content​

Combine with dynamic classes for conditional styling:

// Dynamic classes example
user.role === 'admin' ? 'admin-text' : 'user-text'

Best Practices​

Content Organization​

  1. Keep content concise: Text widgets work best with focused, clear messaging
  2. Use semantic HTML: Structure content with proper heading tags and paragraphs
  3. Plan for responsiveness: Consider how text will display on different screen sizes

Performance Considerations​

  1. Optimize HTML: Avoid excessive nesting and complex markup
  2. Efficient variable binding: Only bind necessary variables to reduce processing overhead
  3. Conditional rendering: Use visibility conditions to improve performance

Accessibility​

  1. Semantic markup: Use proper HTML elements for screen readers
  2. Color contrast: Ensure sufficient contrast for readability
  3. Font sizing: Use relative units for better accessibility

Common Use Cases​

Static Content Display​

  • Terms and conditions
  • Help text and instructions
  • Company information
  • Legal disclaimers

Dynamic Status Messages​

<div class="status-message">
  Status: {{order.status}}
  <br>
  Last updated: {{order.lastUpdated}}
</div>

Personalized Greetings​

<h2>Welcome back, {{user.firstName}}!</h2>
<p>You have {{notifications.count}} new notifications.</p>

Conditional Messaging​

Using visibility conditions to show different messages based on user data:

  • Condition: {{user.isVip}} === true
  • Content: VIP-specific messaging

Technical Implementation​

Rendered Output​

The text widget generates a <p> element with:

  • Unique ID and Vue.js reference
  • Conditional visibility binding
  • CSS classes (both static and dynamic)
  • Inline styles for alignment and spacing
  • Processed content with variable interpolation

Variable Processing​

  • Variables are automatically prefixed with models. in the rendering process
  • Supports nested object properties: {{user.profile.avatar}}
  • Safe variable access with optional chaining

Troubleshooting​

Common Issues​

  1. Variables not displaying: Ensure variable names match exactly with your data model
  2. HTML not rendering: Check that HTML content is properly formatted
  3. Styling not applied: Verify CSS class names and dynamic class conditions
  4. Visibility issues: Review visibility conditions and variable references

Debugging Tips​

  1. Test variable binding: Use simple variable references first, then add complexity
  2. Validate HTML: Ensure HTML content is well-formed
  3. Check console: Look for JavaScript errors in dynamic class expressions
  4. Preview different screens: Test visibility conditions across all configured screens

Example Configurations​

Simple Static Text​

  • Content: "Welcome to our application!"
  • Alignment: Center
  • Class: "welcome-message"

Dynamic User Information​

  • Content: <h3>Hello, {{user.name}}</h3><p>Last login: {{user.lastLogin}}</p>
  • Alignment: Left
  • Visibility: {{user.isLoggedIn}} === true

Conditional Styling​

  • Content: "{{notification.message}}"
  • Dynamic Classes: {{notification.type}} === 'error' ? 'text-danger' : 'text-info'
  • Alignment: Left

This comprehensive configuration system allows the Text widget to serve a wide range of content display needs while maintaining flexibility and performance.