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​

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

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​

HTML Content Support​

The content editor supports full HTML formatting:

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

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.