Code Monkey home page Code Monkey logo

openui5-tour's Introduction

openui5-tour

npm test

An OpenUI5 Control which helps developers to create a step-by-step guided tour through their UI5 apps. OpenUI5 Tour enables an user-friendly way to showcase products and features in your website.

Demo

You can check out a live demo here:

https://mauriciolauffer.github.io/openui5-tour/demo/webapp/index.html

Demo Screenshot

Project Structure

  • demo - Library's live demo
  • dist - Distribution folder which contains the library ready to use
  • src - Development folder
  • test - Testing framework for the library

Getting started

Installation

Install openui5-tour as an npm module

$ npm install openui5-tour

Configure manifest.json

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/"
    }
  }
}

How to use

Import openui5-tour to your UI5 controller using sap.ui.define or sap.ui.require:

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();
});

Author

Mauricio Lauffer

License

This project is licensed under the MIT License - see the LICENSE file for details

openui5-tour's People

Contributors

mauriciolauffer avatar osvaldoalvaradodev avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

vaibhavar dusansacha fokind osvaldoalvaradodev ratanservegar kuzeydev

openui5-tour's Issues

Type definitions

Hey, we want to integrate your awesome control into one of our TS UI5 apps. Could you please provide type definitions for it? Maybe it's as easy as running tsc at the end of your current build step.

Failed to load sap/m.js

Hi,
we would love to use the tour control, but unfortunately I am getting the error described in the title. Comparing with your demo, I saw that the same error occured for it too! I included the dist/resources/openui5/tour exactly as specified in the readme but please let me know if there is anything I did incorrectly.

manifest.json:

"sap.ui5": {
        "_version": "1.1.0",
        "autoPrefixId": true,
       [...]
        "dependencies": {
            "minUI5Version": "1.58.0",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {},
                "sap.ui.layout": {},
                "openui5.tour": {}
            },
          [...]
        },
        "models": [...],
        "resources": [...],
        "resourceRoots": {
            "openui5.tour": "lib/openui5/tour/"
        },
       [...]
        }
    }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.