Model-Driven Apps: Add Custom HTML Pane

Key insights

• Video summary: The tutorial shows how to display custom HTML inside a Power Apps model-driven app using an app side pane, with a simple HTML table rendered directly in a form view.
  It demonstrates the pane working with either the standard Microsoft header or a custom header.
• Key API flow: The video uses Xrm.App.sidePanes.createPane to create a pane, then navigates the pane to an HTML web resource so the custom content appears in the app shell.
  This lets developers open persistent tools without leaving the current record or view.
• Core components to prepare: include the HTML web resource (HTML/JS), a Dataverse solution to package assets, a client API call to create the pane, and an app event or command to launch it.
  Package everything in a solution and trigger the code from a form event or command bar for reliable rollout.
• Important pane options: set the title, imageSrc, unique paneId, and canClose behavior; you can also control hideHeader, width, and isSelected when creating the pane.
  The API also supports selecting, resizing, collapsing, and removing panes after creation.
• Benefits for users and teams: a side pane delivers a persistent user experience, reduces navigation overhead, supports standard web technologies (HTML/JS), and allows multiple panes so users can switch between tools.
  This improves productivity for reference data, checklists, calculators, and contextual guidance.
• Practical tips and best practices: test pane behavior across screen sizes, ensure accessibility, secure web resources, and manage pane state programmatically for consistent UX.
  Use Dataverse for data interactions and launch panes from well-defined app events or buttons to keep the experience intuitive.

Overview

The YouTube video by Power Tech Speck (Girish Uppal) demonstrates how to display custom HTML content inside a model-driven Power Apps form using an app side pane. In clear, step-by-step fashion, the presenter renders a simple HTML table within a pane so users can view auxiliary information without leaving the record. Consequently, the clip highlights a practical pattern for embedding tools, reference data, or small interactive components directly into the app shell. Overall, the video aims to show a lightweight way to extend the user interface while keeping people in context.

The example in the video focuses on a straightforward scenario, yet it illustrates broader possibilities for embedding richer content in a model-driven experience. The speaker walks through creating a side pane and loading an HTML web resource, and he explains the user benefits in real time. As a result, the audience gets both a conceptual view and a working demonstration that they can adapt. This makes the tutorial useful for developers and application makers who need quick, practical guidance.

Demonstration and Key Steps

In the recorded demonstration, the presenter uploads a small web resource containing the HTML table and then configures the app to open it in a side pane when a record loads or when the user triggers a command. He shows how the pane docks to the side of the model-driven app and remains accessible while the user navigates other parts of the app. The tutorial emphasizes the visible results: a compact, scrollable table that complements the form data without blocking workflow. This live view helps viewers see expected behavior and visual layout considerations.

Although the video does not dive deeply into every configuration option, it highlights the practical mechanics that most teams need first. For example, viewers learn that the pane can contain a header title and an icon, and that it can be opened programmatically from form events or command bar actions. The demonstration therefore balances clarity and scope by giving actionable steps without overwhelming detail. Consequently, developers can replicate the outcome and then refine the configuration to suit their needs.

How the Side Pane Works Technically

Behind the scenes, the approach uses the app side pane capability and a client API to create and navigate a pane to an HTML resource. The video references the modern API surface such as Xrm.App.sidePanes, which supports creating multiple panes and navigating to different content types like web resources or pages. Because the HTML lives as a packaged web resource in Dataverse, the pane loads content that is maintained with the solution and can be versioned. This integration keeps UI extensions manageable within standard Power Platform lifecycle patterns.

Importantly, the video also contrasts the newer side pane model with older single-panel approaches, showing how multiple panes and programmatic control improve flexibility. Viewers learn that panes can be sized, selected, collapsed, or removed through API calls, which supports dynamic behavior based on user context or role. Thus, the technical demonstration connects the visible UI to maintainable coding practices and solution packaging considerations. As a result, app makers can plan where to store assets and how to trigger the pane in production scenarios.

Tradeoffs and Challenges

While the side pane approach offers clear usability advantages, the video also implies several tradeoffs that teams must weigh. For instance, embedding custom HTML increases the surface area for maintenance and potential security concerns, so developers must balance richer UX against ongoing testing and updates. Additionally, depending on the complexity of the content, performance may be affected if heavy scripts or large assets load inside the pane, and designers should optimize content for fast rendering.

Accessibility and responsive design present further challenges because the pane changes available screen space and can behave differently on narrow devices or when users customize the app chrome. Therefore, the presenter’s simple table example serves as a good starting point, but teams will need to plan for accessibility attributes, keyboard navigation, and responsive layout if they scale up the feature. In short, the benefits of contextual tools must be weighed against the effort to secure, test, and adapt them for diverse users and devices.

Practical Recommendations

Based on the video’s guidance, a sensible next step is to start with small, well-scoped HTML web resources that solve a clear user need and then iterate. Likewise, teams should use the Dataverse solution model to package web resources and keep deployment predictable, while applying standard web optimization and security practices to the HTML content. By doing so, organizations can deliver helpful UI extensions quickly without introducing undue maintenance risk.

Finally, consider monitoring usage and collecting feedback once panes are in use so you can refine when and how they appear, and whether panes should be available globally or only for specific roles. The video from Power Tech Speck (Girish Uppal) offers a practical, low-friction pattern for improving model-driven apps, and with careful tradeoff analysis you can adopt it safely and effectively. Ultimately, the approach delivers immediate UX gains when balanced with the right governance and testing practices.

Keywords

Model-driven apps, Power Apps model-driven, custom HTML side pane, side pane in model-driven apps, Power Apps custom HTML pane, model-driven app side pane, embed HTML in model-driven app, Dynamics 365 custom side pane