Table of Contents

Partial templates

Partial templates provide a powerful way to organize and modularize your UI view and UI component templates. They allow you to break down complex templates into smaller, more manageable pieces while maintaining the full context and scope of the parent (UI view or UI component).

Overview

A partial template is a reusable template fragment that can be defined within a UI view or UI component and referenced from its main template or its other partial templates.

When the application is generated, the <partial-template /> node is replaced by the actual content of the partial template.

Key characteristics:

  • Scoped to the UI view or UI component where they are defined
  • Cannot be shared between multiple UI views or UI components
  • Have access to the same context (properties, actions, methods, computeds, ...) as the main template of the UI view/UI component
  • Can reference other partial templates within the same component
  • Evaluated at generation time, not runtime

Common use cases

Splitting large templates

Break down complex templates into logical sections for better maintainability:

<partial-template name="CustomerHeader" />
<partial-template name="CustomerContactInfo" />
<partial-template name="CustomerOrderHistory" />
<partial-template name="CustomerActions" />

Responsive templates

Create different layouts based on screen size:

<if condition="@Viewport.IsWidthAtLeastMedium">
    <partial-template name="DesktopLayout" />
</if>
<else>
    <partial-template name="MobileLayout" />
</else>

Comparison with UI components

Aspect Partial Templates UI Components
Scope Limited to the parent UI view/UI component Reusable across multiple UI views/components
Context Full access to parent UI view/UI component context The context must explicitly be passed as parameters or accessed via the GetParentViewModel/GetMainViewModel methods
Reusability Cannot be shared Can be used anywhere
Use case Template organization inside a single UI view/UI component Components reusable across the whole application to manage common functionalities available in multiple screens

When to use partial templates

  • Breaking down complex templates
  • Creating conditional (responsive) layouts inside the same UI view/UI component
  • Organizing template code for better readability without introducing new abstraction surface

When to use UI components

  • Reusing functionality or layout across multiple UI views/UI components
  • Encapsulating complex behavior that needs parameters, its own events, or isolated state
  • Sharing a pattern broadly across the cluster (or future clusters) for consistency