Custom button actions

[chrism]

Hi,

This is a great library but i'm stuck trying to use more button types that the built-in ones.

In my step I'm using the builtInButtons option taken from the dummy app but wanting to include a button which has a custom action.

      ...
      builtInButtons: [
        {
          classes: 'button cancel-button',
          text: '<span class="button-text">Close</span>',
          type: 'cancel'
        },
        {
          classes: 'button tour-button',
          text: '<span class="button-text">Take the tour</span>',
          type: 'next'
        },
        {
          classes: 'button sign-in-button',
          text: '<span class="button-text">Sign in</span>',
          action: 'signin'
        }
      ],
      ...

Both the next and cancel work as expected, but I haven't been able to get the custom action to work no matter what I try.

First, I tried to add it as a custom event when I set the defaults for the tour like this,

    tour.on('signin', () => {
      console.log('sign in');
    });

Then as a simple action in the route from which the service is added

  action: {
    signin() {
      console.log('action sign in');
    }
  }

And failing that using the when option in the step

      when: {
        signin: () => {
          console.log('sign in from when');
        }
      }

I feel I must have missed something but can't seem to work out what.

If you could help I'd be happy to update the documentation to include this as it would be a big help (at least to me).

Thanks.

[RobbieTheWagner]

Hi @chrism, sorry to hear you are having trouble! I actually did not implement the custom actions part myself, so I am not 100% sure, but I think maybe the action is supposed to be a function, not a string. In the code, if it is not a built in button type, and you do not pass an action function, it defaults to function(){}, so I think it should be a function. Perhaps try:

{
  classes: 'button sign-in-button',
  text: '<span class="button-text">Sign in</span>',
  action() { // do sign in stuff here }
}

Please let me know if that works for you!

[chrism]

Hi @rwwagner90 I'm really sorry I didn't get back to you sooner on this, thanks very much for your reply.

I've been on a bit of a deadline & for now decided not to include the additional button in the tour.

I'm going to free up some time at the end of this week to look into this and will let you know.

Thanks again for the advice.

[RobbieTheWagner]

No worries, please let me know if it works, and if it does, I would love a PR to update the docs!

[chrism]

Hi,

Finally had chance to take a look at this—works perfectly.

I've submitted this PR #220 which hopefully updates the docs in a way you approve. If anything is missing let me know and I'll update it.

Thanks again for your help.

[RobbieTheWagner]

Thanks!