diff --git a/Examples/HtmlTextboxExample.rdl b/Examples/HtmlTextboxExample.rdl new file mode 100644 index 00000000..a44e349e --- /dev/null +++ b/Examples/HtmlTextboxExample.rdl @@ -0,0 +1,264 @@ + + + Example report demonstrating HTML textbox functionality in Majorsilence Reporting + Majorsilence Reporting + 8.5in + 11in + 0.5in + 0.5in + 0.5in + 0.5in + + + + SQL + + + + + + + + DummyDataSource + SELECT 'John Doe' as CustomerName, 'john.doe@example.com' as Email, 150.50 as Total, 5 as OrderCount + + + + CustomerName + + + Email + + + Total + + + OrderCount + + + + + + + + + 0.25in + 0.25in + 7in + 0.5in + Example 1: Simple HTML Formatting + + + + + 0.85in + 0.25in + 7in + 1.5in + true + ="<p>This is a paragraph with <b>bold text</b>, <i>italic text</i>, and <span style='color: red;'>colored text</span>.</p>" & + "<p>You can use <big>bigger</big> and <small>smaller</small> text sizes.</p>" & + "<p>Monospace text: <code>System.out.println('Hello');</code></p>" + + + + + + 2.5in + 0.25in + 7in + 0.5in + Example 2: Lists + + + + + 3.1in + 0.25in + 7in + 2in + true + ="<p><b>Unordered List:</b></p>" & + "<ul>" & + "<li>First item</li>" & + "<li>Second item</li>" & + "<li>Third item</li>" & + "</ul>" & + "<p><b>Ordered List:</b></p>" & + "<ol>" & + "<li>First step</li>" & + "<li>Second step</li>" & + "<li>Third step</li>" & + "</ol>" + + + + + + 5.25in + 0.25in + 7in + 0.5in + Example 3: Links and Horizontal Rules + + + + + 5.85in + 0.25in + 7in + 1.5in + true + ="<p>Visit our website: <a href='https://github.com/majorsilence/My-FyiReporting'>Majorsilence Reporting</a></p>" & + "<hr/>" & + "<p>For support, email: <a href='mailto:support@example.com'>support@example.com</a></p>" & + "<hr/>" & + "<p><span style='font-size: small;'>Horizontal rules help separate content.</span></p>" + + + + + + 7.5in + 0.25in + 7in + 0.5in + Example 4: Complex Styling + + + + + 8.1in + 0.25in + 7in + 2in + true + ="<div style='font-family: Arial;'>" & + "<p style='background-color: lightyellow;'><b>Important Notice:</b></p>" & + "<p>This text uses <span style='color: #FF6600; font-weight: bold;'>custom colors</span> " & + "and <span style='background-color: lightblue;'>background colors</span>.</p>" & + "<p><font face='Courier New' size='3'>You can also use the font tag</font> " & + "for <font color='green' size='4'>different effects</font>.</p>" & + "</div>" + + + + + 10.5in + + + 0.75in + true + true + + + 0.1in + 0.25in + 7in + 0.5in + HTML Textbox Examples - Majorsilence Reporting + + + + + + 0.5in + true + true + + + 0.1in + 0.25in + 7in + 0.25in + ="Page " & Globals!PageNumber & " of " & Globals!TotalPages + + + + + diff --git a/docs/HTML-Textbox-Guide.md b/docs/HTML-Textbox-Guide.md new file mode 100644 index 00000000..7f69be55 --- /dev/null +++ b/docs/HTML-Textbox-Guide.md @@ -0,0 +1,233 @@ +# HTML Textbox Guide + +## Overview + +Majorsilence Reporting supports rendering HTML content within textboxes, similar to the HtmlTextbox control in Telerik Reporting. This feature allows you to display rich-formatted text including bold, italic, lists, links, images, and more. + +## How to Enable HTML Rendering + +To enable HTML rendering in a textbox, set the `Format` property to `"html"` in the Style section of your textbox. + +### In RDL XML: + +```xml + + Your HTML content here + + +``` + +### Programmatically: + +When creating a textbox programmatically, ensure the Style.Format property is set to "html". + +## Supported HTML Tags + +The HTML parser supports a subset of HTML tags for formatting: + +### Text Formatting +- `` or `` - Bold text +- ``, ``, ``, `` - Italic text +- `` - Underlined text (through style attribute) +- ``, `` - Monospace font (Courier New) +- `` - Monospace bold font +- `` - Increases font size by 20% per tag +- `` - Decreases font size by 20% per tag + +### Structure +- `
` or `
` - Line break +- `

` - Paragraph (adds double line spacing) +- `

` or `
` - Horizontal rule/line + +### Lists +- `
    ` - Unordered list (bullets) +- `
      ` - Ordered list (numbers) +- `
    1. ` - List item + +### Links and Images +- `Link text` - Hyperlink +- `description` - Images (supports http://, https://, and file:// URLs) + +### Styling +- `` - Apply inline styles +- `` - Font styling + +## Supported Style Attributes + +When using `` or `` tags, you can apply CSS-like styles: + +### Color +```html +Red text +Red text (hex) +Yellow background +``` + +### Font Properties +```html +Arial font +14 point font +Large font +Bold text +Italic text +``` + +### Font Size Values +- Named sizes: `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large` +- Numeric sizes: `1` (8pt), `2` (10pt), `3` (12pt), `4` (14pt), `5` (18pt), `6` (24pt), `7` (36pt) +- Point sizes: `12pt`, `14pt`, etc. +- Percentage: `120%` (relative to current size) + +## Dynamic Expressions in HTML + +You can embed dynamic expressions within HTML content using the `` tag: + +```xml + + ="<b>Customer:</b> <expr>Fields!CustomerName.Value</expr><br/>" & + "<b>Total:</b> <expr>Fields!Total.Value</expr>" + + +``` + +**Note:** In RDL XML, you need to escape HTML entities: +- `<` becomes `<` +- `>` becomes `>` +- `&` becomes `&` + +The expression inside `` tags will be evaluated and the result inserted into the HTML output. + +## Complete Examples + +### Example 1: Simple Formatted Text + +```xml + + ="<h1>Report Title</h1>" & + "<p>This is a paragraph with <b>bold</b> and <i>italic</i> text.</p>" + + +``` + +### Example 2: Lists + +```xml + + ="<p><b>Features:</b></p>" & + "<ul>" & + "<li>Feature 1</li>" & + "<li>Feature 2</li>" & + "<li>Feature 3</li>" & + "</ul>" + + +``` + +### Example 3: With Dynamic Data + +```xml + + ="<div style='font-family: Arial;'>" & + "<h2>Customer Report</h2>" & + "<p><b>Name:</b> <expr>Fields!CustomerName.Value</expr></p>" & + "<p><b>Email:</b> <a href='mailto:<expr>Fields!Email.Value</expr>'>" & + "<expr>Fields!Email.Value</expr></a></p>" & + "<p><b>Total Orders:</b> <expr>Fields!OrderCount.Value</expr></p>" & + "</div>" + + +``` + +### Example 4: Rich Text from Database + +If you have HTML content stored in your database (e.g., from a rich text editor), you can display it directly: + +```xml + + =Fields!RichTextContent.Value + + +``` + +Where `RichTextContent` is a field containing HTML markup like: +```html +

      This is rich text from a database field.

      +
        +
      • Item 1
        • +
      • Item 2
        • +
      +``` + +## Important Notes + +### Limitations + +1. **Subset of HTML**: Only the tags listed above are supported. Complex HTML structures or CSS may not render correctly. + +2. **Images**: Image loading may fail if: + - The URL is not accessible + - Network security policies block the request + - The image format is not supported + +3. **Security**: Be cautious when displaying user-generated HTML content, as it could contain malicious scripts (though JavaScript is not executed in this context). + +4. **Layout**: HTML content in a textbox flows vertically. Use `CanGrow` property to allow the textbox to expand based on content. + +### Best Practices + +1. **Use CanGrow**: For HTML textboxes with variable content, enable the `CanGrow` property: + ```xml + true + ``` + +2. **Escape Special Characters**: When building HTML strings in expressions, ensure proper escaping: + - In RDL XML: Use XML entities (`<`, `>`, `&`) + - In code: Use proper string escaping + +3. **Test Rendering**: Always test HTML textboxes with various content lengths and formats to ensure proper rendering. + +4. **Performance**: Complex HTML with many nested tags or images may impact rendering performance. Keep HTML structure simple when possible. + +## Troubleshooting + +### HTML Not Rendering +- Verify `Format` is set to `"html"` (lowercase) +- Check for proper XML escaping in RDL +- Ensure HTML tags are properly closed + +### Images Not Showing +- Verify image URL is accessible +- Check image format (JPEG, PNG supported) +- Ensure network/firewall allows image requests + +### Layout Issues +- Enable `CanGrow` for content that may expand +- Check that width is sufficient for content +- Use `
      ` or `

      ` tags for explicit line breaks + +## Migration from Other Reporting Tools + +If you're migrating from Telerik Reporting or similar tools: + +1. **Telerik HtmlTextBox** → Set `Format="html"` on regular Textbox +2. **Most HTML tags** work similarly +3. **Expressions**: Use `` tags instead of `#=` syntax +4. **Styling**: Use inline `style` attributes within HTML + +## See Also + +- [Textbox Properties](https://github.com/majorsilence/My-FyiReporting/wiki) - General textbox documentation +- [Expression Reference](https://github.com/majorsilence/My-FyiReporting/wiki) - Using expressions in reports +- [Style Properties](https://github.com/majorsilence/My-FyiReporting/wiki) - Available style options