Text Widget

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#Direct link to 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#Direct link to Configuration Options

Global Settings#Direct link to Global Settings

Basic Properties#Direct link to 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#Direct link to 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#Direct link to 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#Direct link to Validation and Visibility

Screen-based Configuration#Direct link to 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#Direct link to Advanced Visibility Conditions

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

Styling and Layout#Direct link to Styling and Layout

CSS Classes#Direct link to 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#Direct link to Dimensions

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

Layout Options#Direct link to Layout Options

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

Dynamic Content#Direct link to Dynamic Content

HTML Content Support#Direct link to HTML Content Support

The content editor supports full HTML formatting:

Best Practices#Direct link to Best Practices

Content Organization#Direct link to 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#Direct link to 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#Direct link to 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

Technical Implementation#Direct link to Technical Implementation

Rendered Output#Direct link to 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#Direct link to 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#Direct link to Troubleshooting

Common Issues#Direct link to 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#Direct link to 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#Direct link to Example Configurations

Simple Static Text#Direct link to Simple Static Text

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

Dynamic User Information#Direct link to Dynamic User Information

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

Conditional Styling#Direct link to 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.