PackagePackageA library you install and call yourself.See every one →What this type is →independently maintainedindependently maintainedPublished by one person or a small company outside SAP. Says nothing about quality; the readings say that.See every one →
openui5-tour
An OpenUI5 control library for a step-by-step guided tour inside a UI5 app, where each TourStep has a title, content, a target control from the view and a placement.
Showing a user around an app is usually a manual or a screen recording. This library puts the tour inside the app: a Tour holds TourStep objects, each with a title, content, a target control taken from the view (for example this.getView().byId('someControl')) and a placement such as PlacementType.Right. The tour is started with start() and takes started, completed, nextStep and previousStep handlers. The modules are openui5/tour/Tour and openui5/tour/TourStep, loaded in a controller with sap.ui.define or sap.ui.require.
Facts
Latestv1.0.0ReleasedLast pushLicenceMIT
Where it sits
Lives in
Provides
Custom controls and librariesUI5Custom controls and librariesExtending the set of controls an app is built from: a control of its own, a wrapper around a third-party widget, or an icon font registered with the framework, packaged so another app can reuse it. Distinct from [Web Components interop](capability:ui5-web-components), which brings in standard custom elements, and from [generators](capability:generators), which scaffold a control project rather than being one.
Add-on to
@openui5/sap.ui.core@openui5/sap.ui.coreThe OpenUI5 core: the module loader, the MVC runtime, data binding, routing, theming and the test stack, which is everything a UI5 app does before a single community package is added.
Requires
@openui5/sap.ui.core@openui5/sap.ui.coreThe framework the controls are built for and run in: the tour points at controls of a UI5 view and is loaded from a UI5 controller.
Who is behind it
Mauricio LaufferMauricio LaufferMaintains this
In the atlas: maintains 16, contributes to 41, wrote 4@mauriciolauffermaintainerosvaldoalvaradodevContributes to this
In the atlas: contributes to 1@osvaldoalvaradodev1 contributor
In the atlas: maintains 16, contributes to 41, wrote 4@mauriciolauffermaintainerosvaldoalvaradodevContributes to this
In the atlas: contributes to 1@osvaldoalvaradodev1 contributor
What it declares
Every artifact
- Type
- Package
- Origin
- Independently maintained
As a package
- Where it runs
- does not say
- Distributed through
- does not say
Connections
Group by
NodeRelationBasis
Functional
Custom controls and librariesCustom controls and librariesCustom controls, wrappers and icon fonts packaged for reuseSAP and community, unassessed
provides
stated
provides Custom controls and libraries
Publishes the `Tour` and `TourStep` controls as an OpenUI5 library that a host app loads and uses from a controller.
“An OpenUI5 Control which helps developers to create a step-by-step guided tour through their UI5 apps.”“Import openui5-tour to your UI5 controller using *sap.ui.define* or *sap.ui.require*:”
Custom controls, wrappers and icon fonts packaged for reuse
Technical
@openui5/sap.ui.core@openui5/sap.ui.coreFramework core: module loader, MVC runtime, binding, routing, themingsap official, ui5
needs
stated
needs @openui5/sap.ui.core
The framework the controls are built for and run in: the tour points at controls of a UI5 view and is loaded from a UI5 controller.
“Add the library to sap.ui5/dependencies/libs and set its path in sap.ui5/resourceRoots in your manifest.json file”
Framework core: module loader, MVC runtime, binding, routing, theming
Download
Install
npm add openui5-tourDerived from the package name. No recipe recorded; the README has the configuration.
README
quoted from mauriciolauffer/openui5-tour under MIT, readmauriciolauffer/openui5-tour/README.mdthe maintainer’s wordsOn GitHub
openui5-tour
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
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-tourConfigure 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
History
Others providing
Compare all 15 on the Custom controls and libraries page →Custom controls and librariesCustom controls and librariesExtending the set of controls an app is built from: a control of its own, a wrapper around a third-party widget, or an icon font registered with the framework, packaged so another app can reuse it. Distinct from Web Components interop, which brings in standard custom elements, and from generators, which scaffold a control project rather than being one.SAP and community, unassessed
- custom-controlscustom-controlsThirteen custom controls for abap2UI5, a signature pad and a scanner that reads several barcodes at once among them, each one an ABAP builder class with a single render( ) method and all of them shipped in a BSP of their own.community org, abapThirteen custom UI5 controls for abap2UI5 appsfrom ABAP
- @abap2ui5/embed-control@abap2ui5/embed-controlA UI5 custom control that runs an abap2UI5 app inside a host UI5 app, with the abap2UI5 frontend loaded from the backend the app talks to.community org, ui5UI5 custom control that runs an abap2UI5 app inside a host appfrom UI5
- ui5-cc-timerbuttonui5-cc-timerbuttonA UI5 control library with TimerButton, an sap.m.Button that delays becoming enabled or visible and shows other text or an icon in the meantime, with the delay set in milliseconds.independent, ui5UI5 control library with a button that delays enabling or showingfrom UI5
- ui5-control-generatorui5-control-generatorA command-line generator that writes UI5 custom controls, in JavaScript or TypeScript, from the html files in a project, with control logic and renderer split into two files by default.independent, ui5Command line generator of UI5 custom controls from htmlfrom UI5
- @marianfoo/ui5-cc-dayjs@marianfoo/ui5-cc-dayjsA UI5 custom control that writes a date to the page through Day.js, with the input format, the output format and any shift of days or months set as control properties.independent, ui5UI5 custom control formatting dates with Day.jsfrom UI5
- ui5-cc-pdfviewerui5-cc-pdfviewerA UI5 custom control that renders a PDF from a base64 data URI with pdfjs-dist, so a file picked in the browser can be shown before it has been uploaded anywhere and has a URL.independent, ui5UI5 custom control rendering a PDF from a base64 data URIfrom UI5
- openui5-passwordopenui5-passwordAn OpenUI5 input control of password type that checks the typed value against length and character-class rules set as properties, and scores password strength in a separate property.independent, ui5OpenUI5 password input with strength scoring and rulesfrom UI5
- ui5-lib-visualizationui5-lib-visualizationA UI5 control library that wraps the C3.js charting library as ui5.viz controls (Chart, ChartSeries, ChartDataPoint, ChartAxis, ChartLine, ChartArea and Color) declared in an XML view with data binding.independent, ui5UI5 control library wrapping C3.js charts as ui5.viz controlsfrom UI5
- UI5XUI5XAn OpenUI5 and SAPUI5 library of eight composite controls under the ui5x namespace: skeleton placeholders and a container that swaps them for content, loading wrappers for the responsive and the grid table, an accordion, a copy button, a segmented input and a chat feed.independent, ui5UI5 library of eight composite controls under the ui5x namespacefrom UI5
- openui5-cameraopenui5-cameraA UI5 control that renders a live camera preview from the device's camera and hands the app the picture as a base64-encoded PNG when the user taps it.independent, ui5UI5 control for live camera preview and PNG capturefrom UI5
- ui5-cc-chartui5-cc-chartA UI5 custom control that wraps Chart.js to render a line chart from label and value records, installed as a plain npm dependency with ui5-tooling-modules in ui5.yaml.community org, ui5UI5 custom control wrapping Chart.js for line chartsfrom UI5
- ui5-cc-mdui5-cc-mdA UI5 custom control that renders Markdown, including GitHub-flavoured syntax, to HTML inside an XML view, taking its content from a string, a file path or a model binding.community org, ui5UI5 custom control rendering Markdown to HTMLfrom UI5
- ui5-fontawesome-libui5-fontawesome-libA UI5 library that adds Font Awesome's regular, solid and brand icon sets to the sap-icon:// namespace, addressable from a standard Icon control, for UI5 1.120.33 or later.community org, ui5UI5 library adding Font Awesome icon sets to sap-icon://from UI5
- openui5-paginatoropenui5-paginatorA UI5 custom control that pages through large data in a table, for backends that serve pages over REST rather than OData.independent, ui5A UI5 custom control that pages through large data in a table, for backends that serve pages over REST rather than OData.from UI5
Details
Sources
Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.
Compatibility and provenance
latestv1.0.0
first release
releases and cadence22, ~114d median
discovered viaAdded by hand
first seen in the atlas
ecosystem and domainui5, ui-and-frontend-bridge
Contributors
History in the atlas
- First seen.
For your agent
- Ref
artifact:mauriciolauffer-openui5-tour- JSON
- /artifacts/mauriciolauffer-openui5-tour.json
- MCP
- Connecting an agent