Web SDK documentation
  1. Components
  2. WizardComponent
core/wizard/wizard.component.ts

Description

A generic component that is intended to serve as the building block of more wizards.

Example

Example :
<button
   title="Add application"
   class="btn btn-primary"
   (click)="addApplication()"
 >
   Add application
 </button>
Example :
import { Component } from '@angular/core';
import { WizardConfig, WizardService, Wizard } from '@c8y/ngx-components';
import { ModalOptions } from 'ngx-bootstrap/modal';

@Component({
 selector: 'c8y-add-application-wizard',
 templateUrl: './templatePath'
})
export class AddApplicationWizardComponent {
  constructor(private wizardService: WizardService) {}

  addApplication() {
    const wizardConfig: WizardConfig = {
      headerText: 'Add Application',
      headerIcon: 'c8y-icon-modules',
      bodyHeaderText: 'Select methods',
      bodyHeaderIcon: 'c8y-icon-modules'
    };

    const initialState: Wizard = {
      wizardConfig,
      id: 'uploadApplication'
    };

    const modalOptions: ModalOptions = { initialState };

    this.wizardService.show(modalOptions);
  }
}

Implements

Wizard OnInit

Example

Metadata

selector c8y-wizard
standalone true
imports
NgIf
C8yTranslatePipe
templateUrl ./wizard.component.html

Relationships

Used by

Depends on

Wizard component

This is a generic component serving as a base block for building custom wizards. It provides many possibilities for composing custom wizards, all of these methods will be described below.

The main responsibility of a generic wizard is to present the available options to the user, and then respond to the user's choice. On this basis, the user will be redirected to a specific component under the given path, or that component will be rendered in the wizard.

Usage examples

Minimal setup

By using the wizard configuration object (represented by WizardConfig interface), you can provide the content that will be displayed in the header and in the body header section.

The id parameter determines the display type of the wizard.

Example :
import { Component } from '@angular/core';
import { WizardConfig, WizardModalService } from '@c8y/ngx-components';
import { ModalOptions } from 'ngx-bootstrap/modal';

@Component({
  selector: 'wizard-demo'
})
export class WizardDemoComponent {
  constructor(private c8yWizardModalService: WizardModalService) {}

  addApplication() {
    const wizardConfig: WizardConfig = {
      headerText: 'Add Application',
      headerIcon: 'c8y-icon-modules',
      bodyHeaderText: 'Select methods',
      bodyHeaderIcon: 'c8y-icon-modules'
    };

    const initialState = {
      id: 'wizardId',
      wizardConfig
    };

    const modalOptions: ModalOptions = { initialState };

    this.c8yWizardModalService.show(modalOptions);
  }
}

You can use BsModalService directly from ngx-bootstrap/modal to show the wizard.

Example :
import { Component } from '@angular/core';
import { WizardConfig, WizardComponent } from '@c8y/ngx-components';
import { ModalOptions } from 'ngx-bootstrap/modal';

@Component({
  selector: 'wizard-demo'
})
export class WizardDemoComponent {
  constructor(private bsModalService: BsModalService) {}

  addApplication() {
    const wizardConfig: WizardConfig = {
      headerText: 'Add Application',
      headerIcon: 'c8y-icon-modules',
      bodyHeaderText: 'Select methods',
      bodyHeaderIcon: 'c8y-icon-modules'
    };

    // Configure the initial state of the wizard.
    const initialState = {
      id: 'wizardId',
      wizardConfig
    };
    const modalOptions: ModalOptions = { initialState };

    // Configure modal options.
    const options = {
      class: 'modal-sm',
      ariaDescribedby: 'modal-body',
      ariaLabelledBy: 'modal-title',
      backdrop: 'static',
      ...modalOptions
    } as ModalOptions<WizardComponent>;

    this.bsModalService.show<WizardComponent>(WizardComponent, options);
  }
}

Add an entry to the wizard menu (hookWizard)

We've added a new hook that adds an entry to the wizard's menu. This menu entry will lead to a "ContainerComponent" created below.

If the wizard contains only one entry without a path, the list will be skipped.

Example :
import { NgModule } from '@angular/core';
import { hookWizard } from '@c8y/ngx-components';
import { ContainerComponent } from 'pathToYourContainerComponent';

@NgModule({
  declarations: [ContainerComponent],
  providers: [
    hookWizard({
      // The id of a wizard to which the entry should be hooked.
      wizardId: 'wizardId',
      // The container component is responsible for handling subsequent steps in the wizard.
      component: ContainerComponent,
      // Menu entry name
      name: 'Upload application',
      // Menu entry icon
      c8yIcon: 'upload'
    })
  ]
})
export class YourModule {}

Configuration of the container component passed in the hookWizard

Component responsible for handling subsequent steps in the wizard.

Use c8y-wizard-header, c8y-wizard-body and c8y-wizard-footer in your custom component to maintain the correct layout.

Example :
import { Component } from '@angular/core';
import { WizardComponent } from '@c8y/ngx-components';

@Component({
  selector: 'container-component',
  template: `
    <c8y-wizard-header>
      New header content
    </div>
    </c8y-wizard-header>
    <c8y-wizard-body>
      New body content
    </c8y-wizard-body>
    <c8y-wizard-footer>
      <button
        (click)="back()"
      >
        Back
      </button>

      <button 
        (click)="cancel()"
      >
        Cancel
      </button>
    </c8y-wizard-footer>
  `
})
export class ContainerComponent {
  attributeToBePassed: string;

  constructor(private wizardComponent: WizardComponent) {}

  back() {
    const result: any = 'dataToBeEmittedOnReset';
    this.wizardComponent.reset(result);
  }

  cancel() {
    const result: any = 'dataToBeEmittedOnClose';
    this.wizardComponent.close(result);
  }
}

Handling selected menu entries via the initial state

The wizard component provides outputs that allow you to handle the selected menu entry, reset and close events.

Initial state approach

component-with-wizard.component.ts

Example :
import { Component } from '@angular/core';
import { WizardEntry, WizardConfig, Wizard, WizardModalService } from '@c8y/ngx-components';
import { CustomComponent } from './custom.component.ts';
import { takeUntil } from 'rxjs/operators';
import { ModalOptions } from 'ngx-bootstrap/modal';

@Component({
  selector: 'wizard-demo'
})
export class WizardDemoComponent {
  destroy$: Subject<boolean> = new Subject<boolean>();

  constructor(private c8yWizardModalService: WizardModalService) {}

  onButtonClick() {
    const wizardConfig: WizardConfig = {
      headerIcon: 'c8y-icon-modules',
      headerText: 'Wizard header',
      bodyHeaderText: 'Body section header'
    };

    const initialState: Wizard<ContainerComponent> = {
      id: 'wizardId',
      wizardConfig,
      componentState: {
        attributeToBePassed: 'Some sample text'
      }
    };
    const modalOptions: ModalOptions = { initialState };

    const modalRef = this.c8yWizardModalService.show(modalOptions);

    modalRef.content.onSelect.pipe(takeUntil(this.destroy$)).subscribe(menuEntry => {
      // handle menu entry
    });

    modalRef.content.onClose.pipe(takeUntil(this.destroy$)).subscribe(result => {
      // handle result
    });

    modalRef.content.onReset.pipe(takeUntil(this.destroy$)).subscribe(result => {
      // handle result
    });
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
  }
}

<div class="viewport-modal animated fadeIn">
  <ng-template *ngTemplateOutlet="(headerTemplate$ | async)?.template"></ng-template>

  <ng-template #headerRef>
    <div class="modal-header dialog-header animated fadeIn">
      <i [c8yIcon]="wizardConfig.headerIcon"></i>
      <h4 id="modal-title">{{ wizardConfig.headerText | translate }}</h4>
    </div>
  </ng-template>

  <ng-template *ngTemplateOutlet="(bodyTemplate$ | async)?.template"></ng-template>

  <ng-template #bodyRef>
    <div class="p-16 p-t-8 text-center" *ngIf="wizardConfig.bodyHeaderText">
      <div class="c8y-wizard-nav">
        <i [c8yIcon]="wizardConfig.bodyHeaderIcon"></i>
        <span>{{ wizardConfig.bodyHeaderText | translate }}</span>
      </div>
    </div>
  </ng-template>
  <c8y-wizard-outlet
    [initialState]="componentInitialState"
    [id]="id"
    (onSelect)="onSelect.emit($event)"
    (onPath)="onPath()"
  ></c8y-wizard-outlet>

  <ng-template *ngTemplateOutlet="(footerTemplate$ | async)?.template"></ng-template>
  <ng-template #footerRef>
    <div class="modal-footer animated fadeIn">
      <button
        (click)="close()"
        type="button"
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
      >
        <span translate>Cancel</span>
      </button>
    </div>
  </ng-template>
</div>

results matching ""

    No results matching ""