Un-Dismissible Onboarding Modals


Topic: Un-Dismissible Onboarding Modals

eventodyssey pro premium priority asked 12 hours ago

Expected behavior

I'd like to use the onboarding plugin for more advanced workflows (highlighting content not visible during the launch)

For instance, the admin area of our application is broken up using MDB Tabs... It would be great to give the user a walkthrough of the entire experience. I could also see it being useful completely changing the route while having the onboarding remain visible.

Actual behavior

I'm currently listening to step changes using the onboardingPrev and onboardingNext events so I'm able to determine the current step the user is on (it would be nice to have a seperate event to subscribe to for this btw). Then I'm changing the MDB tab depending on what step the user is on, this is working as intended but the modal dismisses when the tab changes.

I think all I'm asking for is the equivilent of the 'ignoreBackdropClick' param that exists for modals to be implemented for the onboarding plugin, but it might be more complicated than that.

I hope this makes sense!

Resources (screenshots, code snippets etc.)

  startOnboarding() {
this.currentOnboardingStep = 0;
if(!this.onboardingNextSubscription) {
  this.onboardingNextSubscription = this.onboardingService.onboardingNext.subscribe(() => {
    this.currentOnboardingStep+=1;
    this.handleOnboardingStepChange();
});
}
if(!this.onboardingPrevSubscription) {
  this.onboardingPrevSubscription = this.onboardingService.onboardingPrev.subscribe(() => {
    this.currentOnboardingStep-=1;
    this.handleOnboardingStepChange();
});
}
this.onboardingService.init(
  [
    { id: 'first-step-autostart', content: 'Example of autostarted onboarding experience' },
    {
      id: 'second-step-autostart',
      content: 'Pass delay time in seconds to autostart onboarding',
    },
    {
      id: 'third-step-autostart',
      content: 'Delay time will also work with other starting options',
    },
  ], 
  {
    backdrop: true,
    backdropOpacity: 0.35,
  }
);
this.onboardingService.start();
}



    handleOnboardingStepChange() {
switch (this.currentOnboardingStep) {
  case 0:
    // Step 0: Welcome tab
    this.switchToTab('welcome');
    break;
  case 1:
    // Step 1: Billing tab
    this.switchToTab('billing');
    break;
  case 2:
    // Step 2: Welcome tab
    this.switchToTab('welcome');
    break;
  default:
    // Default to welcome tab for any other steps
    this.switchToTab('welcome');
    break;
}
}

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 8.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No