Title Widget Documentation

Overview​

The Title widget is a versatile text heading component that allows you to create structured headings (H1-H6) within your interface. It provides flexible configuration options for styling, alignment, and dynamic content rendering.

Basic Configuration​

Adding a Title Widget​

1. Drag and drop the Title widget from the component library
2. The widget will appear in your interface with default settings
3. Use the configuration panel to customize its appearance and behavior

Configuration Options​

Global Settings​

Name​

• Field: Name input
• Description: Sets the internal name/identifier for the widget
• Usage: Used for referencing the widget in scripts and actions

Variable/Model​

• Field: Variable/Model input
• Description: Links the widget to a data model or variable
• Usage: Enables dynamic content binding and data synchronization
• Format: Use dot notation for nested properties (e.g., user.name)

Title-Specific Configuration​

Level​

• Field: Level dropdown
• Options: 1, 2, 3, 4, 5, 6
• Description: Determines the HTML heading level (H1, H2, H3, H4, H5, H6)
• Default: H1
• Usage:
  • H1: Main page titles
  • H2: Section headers
  • H3-H6: Subsection headers

Text Alignment​

• Field: Align Text dropdown
• Options:
  • Center: Centers the text horizontally
  • End: Aligns text to the end (right in LTR languages)
  • Justify: Justifies text with even spacing
  • Left: Aligns text to the left
  • Right: Aligns text to the right
  • Start: Aligns text to the start (left in LTR languages)
• Default: Left

Text Content​

• Field: Text textarea
• Description: The actual content that will be displayed
• Features:
  • Supports plain text
  • Supports dynamic variables using {{variable_name}} syntax
  • Multi-line text support
  • HTML entities are automatically escaped

Dynamic Content​

Variable Binding​

The title widget supports dynamic content through variable interpolation:

Welcome, {{user.firstName}}!

Supported Variable Formats​

• Simple variables: {{userName}}
• Nested objects: {{user.profile.name}}
• Array elements: {{items.0.title}}

Style Configuration​

Class Names​

• Field: Class input
• Description: Adds custom CSS classes to the title element
• Usage: Apply custom styling or framework classes
• Example: custom-title primary-color

Dynamic Classes​

• Field: Dynamic classes button
• Description: Configure conditional CSS classes based on data or conditions
• Usage: Classes that change based on application state

Validation and Visibility​

Screen-Based Configuration​

The title widget supports different configurations for different screens/contexts:

Available​

• Description: Controls whether the widget exists in the interface
• Options: True/False toggle for each screen

Visible​

• Description: Controls whether the widget is visible to users
• Options:
  • Simple toggle (True/False)
  • Advanced conditions using JavaScript expressions

Required​

• Description: Not applicable for title widgets (display-only component)

Disable​

• Description: Not applicable for title widgets (non-interactive component)

Advanced Visibility Conditions​

Use JavaScript expressions for complex visibility logic:

{{user.role}} === 'admin'
{{status}} === 'active' && {{user.permissions.viewTitles}}

Best Practices​

Semantic Heading Structure​

• Use H1 for main page titles (only one per page)
• Use H2-H6 for hierarchical content structure
• Maintain logical heading order (don't skip levels)

Content Guidelines​

• Keep titles concise and descriptive
• Use sentence case rather than ALL CAPS
• Ensure titles are meaningful and accessible

Responsive Design​

• Test title appearance across different screen sizes
• Consider text length for mobile displays
• Use appropriate heading levels for content hierarchy

Examples​

Static Title​

Configuration:
- Level: 2
- Text: "User Dashboard"
- Align: Center

Dynamic Title​

Configuration:
- Level: 1
- Text: "Welcome back, {{user.firstName}}!"
- Align: Left
- Variable/Model: user

Conditional Title​

Configuration:
- Level: 3
- Text: "{{project.name}} - Status: {{project.status}}"
- Visible: {{project.id}} !== null
- Align: Start

Technical Implementation​

Generated HTML Structure​

<h{level} 
    id="{widget_id}" 
    v-if="{visibility_condition}"
    class="text-primary {custom_classes}"
    style="text-align: {alignment};">
    {processed_text_content}
</h{level}>

Vue Component Integration​

• Automatically integrates with Vue.js reactive system
• Supports component management and lifecycle
• Handles dynamic updates and re-rendering

Troubleshooting​

Common Issues​

1. Title not displaying

   • Check visibility conditions
   • Verify variable bindings are correct
   • Ensure the widget is marked as "Available"

2. Dynamic content not updating

   • Verify variable names match exactly
   • Check data model connectivity
   • Ensure proper variable syntax {{variableName}}

3. Styling issues

   • Verify CSS class names are correct
   • Check for conflicting styles
   • Test on different screen sizes

Debug Tips​

• Use browser developer tools to inspect generated HTML
• Check console for JavaScript errors
• Verify data binding in Vue DevTools

Related Components​

• Text Widget: For longer text content with rich formatting
• Card Widget: For structured content with titles
• Alert Widget: For status messages with titles

API Reference​

Widget Properties​

• id: Unique widget identifier
• type: Always "title"
• options.level: Heading level (1-6)
• options.align: Text alignment
• options.text: Content text
• options.classes: Dynamic CSS classes
• options.classNames: Static CSS classes

Events​

• Component lifecycle events (created, mounted, updated)
• Visibility change events
• Content update events