openui5-tour, a control for guided tours and showcasing features

So, you have created that killer SAP Fiori app and you want to show to the users where they can find all those cool features. You search the UI5 API Reference for a control, but you cannot find anything that matches your needs. Looks like you will have to develop your own control, or, send to your users a gif which highlights what you want…

Wouldn’t it be nice if we had such a control ready to use in our Fiori apps? But don’t worry, this’s possible now with a custom control called OpenUI5 Tour.

The openui5-tour is a custom control created to help developers in the scenario described above. Showcasing the features in your app is simple, you just need to instantiate the control and define the steps. You can use it to:

• create a step-by-step guided tour;
• highlight the most important elements in your app;
• use as a tutorial explaining all steps for an operation;
• show off nice things you’ve done.

Yes, you can use it in your SAP Fiori apps and you can also use in your non-SAP projects. openui5-tour is free, it’s open source and has no external dependencies. It was developed with OpenUI5, you just need to plug’n’play in your Fiori apps.

openui5-tour is quite simple to use, you just need to add the library to sap.ui5/dependencies/libs and set its path in sap.ui5/resourceRoots in your manifest.json file, as follows:

"sap.ui5": {
  "dependencies": {
    "libs": {
      "openui5.tour": {}
    }
  },
  "resourceRoots": {
    "openui5.tour": "./FOLDER_WHERE_YOU_PLACED_THE_LIBRARY/openui5/tour/"
  }
}

Then, import openui5-tour to your UI5 controller using sap.ui.require and voilà:

sap.ui.require([
  'sap/m/PlacementType',
  'sap/m/Text',
  'openui5/tour/Tour',
  'openui5/tour/TourStep'
], function(PlacementType, Text, Tour, TourStep) {
    const tourStep1 = new TourStep({
      content: new Text({ text: 'Hey! It is a tour!' }),
      target: this.getView().byId('someControl'),
      title: 'Tour test step 1...'
    });
    const tourStep2 = new TourStep({
      content: new Text({ text: 'Some important info!' }),
      target: this.getView().byId('anotherControl'),
      title: 'Really important stuff...',
      placement: PlacementType.Right
    });
    const tour = new Tour({
      steps: [tourStep1, tourStep2],
      nextStep: function(){console.dir('next step called from tour step...');},
      previousStep: function(){console.dir('previous step called from tour step...');},
      started: function() {console.dir('Tour has started...');},
      completed: function(){console.dir('Tour has ended...');}
    });
    tour.start();
});

Check out a live demo here: https://embed.plnkr.co/vVvwApRB7mKddPfGccG2

Have a look into the project’s GitHub page, feel free to contribute and improve the control. Also, you can find openui5-tour published in NPM repository.

PS: did you know the whole OpenUI5 library was published in NPM a couple of days ago? This’s  huge news for the community! Congrats to the UI5 team!!! \o/