Fix XML Native HTML

Fix Native HTML and SVG in XML Views/Fragments

This skill fixes native HTML and SVG usage in XML views/fragments that the UI5 linter detects but cannot auto-fix because they require understanding the appropriate UI5 control replacements.

Linter Rules Handled

When to Use

Apply this skill when you see linter output like:

MyView.view.xml:15:5 error Usage of native HTML in XML Views/Fragments is deprecated  no-deprecated-api
MyView.view.xml:25:5 error Deprecated use of SVG in XML View or Fragment  no-deprecated-api

Run npx @ui5/linter --details to get links to documentation about native HTML deprecation.

Background: Why Native HTML/SVG is Deprecated

Native HTML in XML views was supported via the sap.ui.core.HTML control and the html namespace. However, this approach:

• Bypasses UI5's control lifecycle and rendering
• Doesn't integrate with UI5 theming
• Can cause accessibility issues
• Is not compatible with modern UI5 strict mode

Fix Strategy

1. Native HTML Elements → UI5 Controls

Problem: Using HTML elements via the html: namespace.

<!-- Before - native HTML usage -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <html:div class="myContainer">
        <html:span>Some text</html:span>
        <html:a href="https://example.com">Link</html:a>
        <html:img src="image.png" alt="My Image" />
    </html:div>
</mvc:View>

Fix Strategy: Replace with equivalent UI5 controls.

<!-- After - UI5 controls -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <VBox class="myContainer">
        <Text text="Some text" />
        <Link text="Link" href="https://example.com" />
        <Image src="image.png" alt="My Image" />
    </VBox>
</mvc:View>

HTML to UI5 Control Mapping

2. Complex HTML Structures

Problem: Nested HTML for layout.

<!-- Before - complex HTML layout -->
<html:div class="header">
    <html:div class="logo">
        <html:img src="logo.png" />
    </html:div>
    <html:div class="nav">
        <html:a href="#home">Home</html:a>
        <html:a href="#about">About</html:a>
    </html:div>
</html:div>

Fix Strategy: Use UI5 layout controls.

<!-- After - UI5 layout -->
<HBox class="header" alignItems="Center" justifyContent="SpaceBetween">
    <Image src="logo.png" class="logo" />
    <HBox class="nav">
        <Link text="Home" href="#home" class="sapUiSmallMarginEnd" />
        <Link text="About" href="#about" />
    </HBox>
</HBox>

3. SVG Graphics → UI5 Icons or Custom Controls

Problem: Using SVG directly in XML views.

<!-- Before - SVG in XML view -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:svg="http://www.w3.org/2000/svg">
    <svg:svg width="100" height="100">
        <svg:circle cx="50" cy="50" r="40" fill="blue" />
    </svg:svg>
</mvc:View>

Fix Strategy A - For Icons: Use UI5 Icon control with icon fonts.

<!-- After - UI5 Icon -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <core:Icon src="sap-icon://circle-task" size="2rem" color="blue" />
</mvc:View>

Fix Strategy B - For Complex Graphics: Create a custom control or use HTML control.

// CustomGraphic.js - for complex SVG that can't be replaced with icons
sap.ui.define([
    "sap/ui/core/Control"
], function(Control) {
    "use strict";

    return Control.extend("my.app.control.CustomGraphic", {
        metadata: {
            properties: {
                color: { type: "string", defaultValue: "blue" }
            }
        },

        renderer: {
            apiVersion: 2,
            render: function(oRm, oControl) {
                oRm.openStart("svg", oControl);
                oRm.attr("width", "100");
                oRm.attr("height", "100");
                oRm.openEnd();

                oRm.openStart("circle");
                oRm.attr("cx", "50");
                oRm.attr("cy", "50");
                oRm.attr("r", "40");
                oRm.attr("fill", oControl.getColor());
                oRm.openEnd();
                oRm.close("circle");

                oRm.close("svg");
            }
        }
    });
});

<!-- Usage in XML view -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:custom="my.app.control">
    <custom:CustomGraphic color="blue" />
</mvc:View>

4. Common Icon Replacements

When replacing SVG icons, use the SAP icon font:

Browse all available icons: UI5 Icon Explorer

5. HTML Content That Must Remain

For cases where HTML is absolutely required (e.g., rendering external HTML content):

<!-- Use sap.ui.core.HTML control with sanitized content -->
<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <core:HTML content="{/sanitizedHtmlContent}" sanitizeContent="true" />
</mvc:View>

Warning: Only use this for content that:

• Cannot be expressed with UI5 controls
• Has been properly sanitized
• Is from a trusted source

6. Styling Considerations

When modernizing from HTML to UI5 controls:

1. CSS Classes: Apply custom classes via the class attribute

   <VBox class="myCustomContainer">
   

2. Inline Styles: Use customData for CSS variables or the layoutData aggregation

   <VBox>
       <layoutData>
           <FlexItemData growFactor="1" />
       </layoutData>
   </VBox>
   

3. Theming: UI5 controls automatically adapt to the selected theme (Horizon, Quartz, etc.)

Implementation Steps

1. Identify HTML/SVG usage in the linter output

2. Determine the purpose of each HTML element:

   • Layout container → Use VBox, HBox, FlexBox
   • Text content → Use Text, Label, Title
   • Interactive elements → Use Button, Link, Input
   • Images → Use Image
   • Icons → Use sap.ui.core.Icon

3. Check for custom CSS that may need updating

4. Replace elements with UI5 equivalents

5. Remove the xmlns:html namespace once all HTML elements are replaced

6. Test the layout to ensure visual parity

Example Fix Session

Given linter output:

MyView.view.xml:5:3 error Usage of native HTML in XML Views/Fragments is deprecated  no-deprecated-api
MyView.view.xml:12:5 error Deprecated use of SVG in XML View or Fragment  no-deprecated-api

Before:

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:svg="http://www.w3.org/2000/svg">
    <html:div class="card">
        <html:div class="cardHeader">
            <svg:svg width="24" height="24">
                <svg:circle cx="12" cy="12" r="10" fill="green" />
            </svg:svg>
            <html:span class="title">Status: Active</html:span>
        </html:div>
        <html:p>This is the card content.</html:p>
        <html:a href="https://example.com">Learn more</html:a>
    </html:div>
</mvc:View>

After:

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <VBox class="card">
        <HBox class="cardHeader" alignItems="Center">
            <core:Icon src="sap-icon://status-positive" color="green" class="sapUiSmallMarginEnd" />
            <Text text="Status: Active" class="title" />
        </HBox>
        <Text text="This is the card content." />
        <Link text="Learn more" href="https://example.com" />
    </VBox>
</mvc:View>

Notes

• UI5 controls integrate better with theming, accessibility, and responsive design
• The html: namespace should be completely removed once modernization is done
• For complex HTML (like embedded iframes), the sap.ui.core.HTML control can be used as a last resort with sanitizeContent="true"
• SVG icons should be replaced with UI5 icon font where possible for better theming support
• Consider using sap.m.FormattedText for HTML-like rich text formatting
• Custom controls provide the most control for complex graphical requirements

Related Skills

• fix-xml-globals: For other XML view issues like global variable access (no-globals), ambiguous event handlers (no-ambiguous-event-handler), and legacy template:require syntax, use fix-xml-globals