Web SDK documentation
  1. Components
  2. SplitViewDetailsComponent

File

core/split-view/split-view-details.component.ts

Description

Split View Details Component

Displays the details panel of a split-view layout.

Basic Usage

Example :
<c8y-sv-details
  emptyStateIcon="c8y-devices"
  emptyStateTitle="No device selected"
  emptyStateSubtitle="Select a device to view details">

  @if (selectedItem) {
    <c8y-sv-extra-header>
      <c8y-icon-panel [sections]="sections"></c8y-icon-panel>
    </c8y-sv-extra-header>
  }

  @if (selectedItem) {
    <h3>{{ selectedItem.name }}</h3>
    <p>{{ selectedItem.description }}</p>
  }
</c8y-sv-details>

Router-Outlet Integration

Example :
<c8y-sv-details (backClick)="handleBackClick()">
  <router-outlet></router-outlet>
</c8y-sv-details>
Example :
async handleBackClick(): Promise<void> {
  await this.alarmsViewService.closeDetailsView(this.activatedRoute);
}

Implements

AfterViewInit OnDestroy

Metadata

host {
}
selector c8y-sv-details
standalone true
imports NgClass C8yTranslatePipe EmptyStateComponent IconDirective
templateUrl ./split-view-details.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(selectionService: SplitViewSelectionService<unknown> | null, location?: Location, cdr?: ChangeDetectorRef)
Parameters :
Name Type Optional
selectionService SplitViewSelectionService<unknown> | null No
location Location Yes
cdr ChangeDetectorRef Yes

Inputs

ariaLabel
Type : string
Default value : gettext('Details panel') as string

Aria label for the details panel region.
cssClass
Type : string
Default value : ''

Custom CSS classes
emptyStateIcon
Type : string
Default value : 'c8y-alert-idle' as string

Empty state icon when nothing is selected
emptyStateSubtitle
Type : string
Default value : gettext('Select an item from the list to view details') as string

Empty state subtitle when nothing is selected
emptyStateTitle
Type : string
Default value : gettext('No item selected') as string

Empty state title when nothing is selected
title
Type : string

Title for the details section

Outputs

backClick
Type : EventEmitter

Emits when the back button is clicked. Allows parent components to handle custom navigation logic. If not handled, default behavior (location.back or clearSelection) is used.

Methods

clearSelection
clearSelection()

Clear the current selection (back button handler). Emits backClick event for parent to handle, or uses default behavior:

  • Router-outlet: navigates back using browser history
  • Selection service: clears the selection
Returns : void
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void

Properties

Public selectionService
Type : SplitViewSelectionService<unknown> | null
Decorators :
@Optional()

Accessors

hasExtraHeader
gethasExtraHeader()
hasActions
gethasActions()
hasFooter
gethasFooter()
hasSelection
gethasSelection()

Check if an item is selected or if router-outlet is activated

Returns : boolean 
<div
  class="inner-scroll fit-h d-col fit-w split-view__detail"
  [class.split-view__detail--selected]="hasSelection"
  [attr.aria-label]="ariaLabel | translate"
  role="region"
  [ngClass]="cssClass"
  data-cy="c8y-sv-details"
>
  <!-- Back button for mobile/tablet -->
  @if (hasSelection) {
    <div class="card-header separator sticky-top visible-sm visible-xs">
      <button
        class="btn btn-clean text-primary"
        [title]="'Back' | translate"
        [attr.aria-label]="'Back' | translate"
        type="button"
        (click)="clearSelection()"
      >
        <i c8yIcon="chevron-left"></i>
        <span>{{ 'Back' | translate }}</span>
      </button>
    </div>
  }
  <!-- Content when item is selected -->
  @if (title || hasExtraHeader) {
    <div
      class="p-l-24 p-r-24 card-header flex-no-shrink sticky-top bg-component separator"
      [ngClass]="{ 'flex-wrap': hasExtraHeader, 'gap-8': hasExtraHeader && title }"
    >
      <h4 class="card-title">{{ title | translate }}</h4>
      <ng-content select="c8y-sv-header-actions"></ng-content>
      @if (hasExtraHeader) {
        <div class="details-info fit-w">
          <ng-content select="c8y-sv-extra-header"></ng-content>
        </div>
      }
    </div>
  }
  <!-- Empty state when nothing is selected -->
  @if (!hasSelection) {
    <div class="d-flex a-i-center j-c-center flex-grow p-24">
      <c8y-ui-empty-state
        [icon]="emptyStateIcon"
        [title]="emptyStateTitle"
        [subtitle]="emptyStateSubtitle"
      ></c8y-ui-empty-state>
    </div>
  }
  <!-- Content when item is selected -->
  @if (hasSelection) {
    <div
      class="p-24"
      [ngClass]="{ 'p-t-0': !title && !hasExtraHeader }"
    >
      <div class="details-content">
        <ng-content
          select=":not(c8y-sv-extra-header):not(c8y-sv-details-actions):not(c8y-sv-footer):not(c8y-sv-header-actions)"
        ></ng-content>
      </div>

      @if (hasActions) {
        <div class="details-actions">
          <ng-content select="c8y-sv-details-actions"></ng-content>
        </div>
      }
    </div>
    @if (hasFooter) {
      <ng-content select="c8y-sv-footer"></ng-content>
    }
  }
</div>

results matching ""

    No results matching ""