Onboarding
import { XerOnboarding } from "@xerius/codey-components";The onboarding component can be used to showcase any new features in a release. A user will be guided through all the new features on first visit after a new release.
INFO
The composition api needs to be used in order to properly pass components.
Showcases
Default
With Computed Props
Example Slide Component
Local Storage
The client's local storage is used to save information about the Onboarding component so it can display the correct version and content. It is important to add some required application info to the applicationInfo prop, like name and the deployment environment, to get an unique storage key for each application. The localstorage key will be something like codeyOnboarding-docs-prod. This will be determined by the following data located in the localstorage:
| localstorage object props | purpose |
|---|---|
| version | Is the version different from before? Then the onboarding will be shown. |
| showOnboarding | The onboarding will only show if this is set to true. |
| onboardingDone | Will be true if the user has been through the onboarding, the onboarding will only show if this is set to false. |
| applicationInfo | The information about the application, name (required) and deploy env. ex. { name: "docs", env: "prod"} |
This data will be set when the Onboarding component is mounted on the page with following default values:
| localstorage key | default data |
|---|---|
| version | Value set with the version provided in the OnboardingConfig. |
| showOnboarding | Value set with value provided in the OnboardingConfig. |
| onboardingDone | Value will be false. |
| applicationInfo | Value set with value provided in the applicationInfo prop. |
Onboarding localstorage service
import { xerOnboardingLocalstorageService } from "@xerius/codey-components";This service can be used to interact with the localstorage to have access to the onboarding data.
WARNING
Incorrect use of these function may result in breaking the onboarding functionality.
| Function | Purpose |
|---|---|
| get | Read localstorage data |
| save | Save the given data to localstorage |
| createBaseState | Create the base state object |
| clear | Removes the localstorage data for the onboarding |
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| slides | Component[] | true | Array of components used for slides. Shown in the order presented | |
| startLabel | string | true | Label for the start button | |
| inProgressLabel | string | true | Label for the button during the flow | |
| endLabel | string | true | Label for the button at the end of the onboarding | |
| config | OnboardingConfig | { version: null, showOnboarding: null } | false | Config used to determine if the onboarding will show based on the given version and showOnboarding value. This is stored in localstorage and compared to. |
| applicationInfo | ApplicationInfo | true | Information about the application, name and deploy env. Is also used for the storage key. |
xerApplicationInfo
This props is a solution for the following issues:
- Ensure you can differentiate between different environments when your app is hosted on the same main domain for the dev/test/acc environments.
- The application can also be a part of this suffix to ensure that the onboarding config is not shared/overwritten by other applications.
This prop is used to provide information about the application, including the application name and the environment where the app is hosted. This information is used to create an unique the local storage key, depending on the name and env that is passed with the prop. An example of a local storage key: ${STORAGE_KEY}-${applicationInfo.name}-${applicationInfo.env} => codeyOnboarding-docs-prod.
In addition it is also added to the stored object to provide information on the application there.
This prop is a required object with the following keys:
| Name | Type | Required | Description |
|---|---|---|---|
| name | string | true | The application name, is used in the storage key, this is required |
| env | string | false | The environment where the app is hosted on, this is not required |
example:
xerApplicationInfo: { name: "docs", env: "prod" }TODO
Automation id system to correctly access all interactive parts