1. Home
  2. Tutorials
  3. Creating your App UX
  4. Create an Onboarding Screen

Create an Onboarding Screen

You can use app lifecycle Events to present content to your users only when an app first launches. This allows you to support app onboarding or provide information that you only want the user to see once.

  1. If your project doesn’t already have a page in it, create one now using the plus plus button in the Pages drawer on the left of the editor – the page will automatically be set as your app landing page.
  2. Create another new page for your app onboarding screen.
    • If your app already has pages in it, make sure your landing page is set to the page that you want users to see after the first time the run the app (not the onboarding page).
  3. In your onboarding page, include the Elements you want users to see on first run of the app, for example information explaining how to use the app.
  4. In the Lifecycle drawer on the left of the app, open the Application Launched Event. app launch
  5. Click the plus plus button on the left to add an Action.
  6. Select the Change Landing Page Action from the list. Click Edit. change landing
    • In the input control, select the onboarding page you created. Save the Action.

Your app will now show the onboarding page when the user first launches the app, and the page you have set as the normal landing page every other time. Remember to provide a control such as a button to allow the user to leave the onboarding page and access the rest of the app. Swipe Elements such as Page Controllers are particularly well suited to onboarding screens with multiple sections in them.

You can present content to your users when the first time your app launches. This allows you to support app onboarding or provide information that you only want the user to see once.

  1. If you haven’t already done so, create a page in your app, using the plus plus button in the Pages drawer on the left of the editor.
    • The first page you create is automatically set as the app landing page, so if your app has more than one page already, make sure the page you want your users to see first is set as the landing page, using the key button in the Pages drawer.
  2. Add a second page to your app – this will be the page your users see after the landing page on first run of the app, and the first page they see any other time.
  3. In Variables on the left of the editor, click the plus plus button to add a new Device Variable to the app. Name the variable “onboard”, and choose a Java > Boolean type. Save the variable. boolean var
  4. Click the landing page in Pages to open it. Add the onboarding content that you want users to see when the app first launches. Include an interactive Element that will allow users to navigate away from the onboarding content, for example a Text Button with its Text property set to “OK”.
  5. Select the Button (or other interactive Element) and open Properties > Events on the right of the editor. Select the Tapped Event.
    • Click the plus plus button to add an Action – choose Set Value. Edit the Action.
      • In the first input, select the Boolean variable you created.
      • In the second input, select a Static Input Boolean value of True. Save the Action. boolean onboarding
    • Click the plus plus button again to add another Action – choose Go To Page this time. Edit the Action.
      • Select the page you want users to see after the onboarding page, and choose a transition. Save the Action and close the modal window.
  6. Select the landing page, either by clicking it on the Canvas or in the Element Tree on the right of the editor (it’s the parent Element).
  7. Open Properties > Events to add functionality to the page lifecycle.
  8. Click Add/Manage for the On Load Event.
  9. Click the plus plus button to add an Action, choosing If Else. Edit the Action.
    • In the first input, select the Boolean variable you created. if variable
    • In the second input, select a Static Input Boolean value of True. Save the Action. else true
  10. Click the plus plus button under the True Event, and add a Go To Page Action. Edit the Action. add nested
    • Select the page you want the users to see when the app launches and they have already seen the onboarding content. Choose a transition and Save the Action.
  11. Add content to the page you’re showing users after the onboarding content.

Your app will now show the onboarding page when the user first launches the app, and will navigate to a different page every other time. Swipe Elements such as View Pagers are particularly well suited to onboarding screens with multiple sections in them.

Was this article helpful to you? Yes No

How can we help?