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-apiMyView.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 iconssap.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

   xml

   <VBox class="myCustomContainer">

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

   xml

   <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-apiMyView.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