# 👋 How to create Onboarding screens Flow **URL:** \ **Category:** Community Resources\ **Tags:** tutorial\ **Created:** [May 4, 2021, 7:06pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404 "2021-05-04T19:06:24Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [May 4, 2021, 7:06pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/1 "2021-05-04T19:06:24Z")
Hey guys! 👋 Pretty soon, I’ll be launching a new video and app template for all of you to create an amazing onboarding expererience in your app! **Wait for it!** In the meantime, check out the latest version below. * * * After many, many requests for me in [my first onboarging flow](https://community.glideapps.com/t/creating-an-onboarding-flow-using-tab-visibility/11149) to make this video, here it is **how to do create an Onboarding screen Flow!** 🚀 https://www.loom.com/embed/2a619e43c5aa41aebcbc15cfa6c8e734?sharedAppSource=personal_librar Video Link: [Onboarding screens Flow · Glide | Loom](https://www.loom.com/share/2a619e43c5aa41aebcbc15cfa6c8e734?sharedAppSource=personal_librar) > 📌 **Don’t forget to:** > > - Filter the tab/screen when **Email is signed-in user** ; > - To turn into screens, use **Link to screen** action _always_ **This item** , to keep always in the same row. > - Set a column to complete the onboarding > - Set the tabs visility based on this column when the user complete the onboarding. ---
**Author:** ![Julien87](https://avatars.discourse-cdn.com/v4/letter/j/76d3ee/32.png) [@Julien87](https://community.glideapps.com/u/Julien87)\ **Post date:** [May 4, 2021, 7:21pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/2 "2021-05-04T19:21:26Z")
thank you :):):)🙂 thank you for take time and thank you for the video 🙂 ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [May 4, 2021, 11:47pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/3 "2021-05-04T23:47:21Z")
Thank you. Will reference this in a lot of threads going forward. ---
**Author:** ![Nadir\_Abdelrahman\_MD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nadir_abdelrahman_md/32/5237_2.png) [@Nadir\_Abdelrahman\_MD](https://community.glideapps.com/u/Nadir_Abdelrahman_MD)\ **Post date:** [May 6, 2021, 2:39pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/4 "2021-05-06T14:39:06Z")
Thanks ---
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [May 6, 2021, 2:41pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/5 "2021-05-06T14:41:36Z")
You’re welcome! Hope it can help you! ---
**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\ **Post date:** [May 6, 2021, 2:53pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/6 "2021-05-06T14:53:06Z")
Thanks a lot @Lucas_Pires! Question: do you really need the “Timestamp” for the onboarding complete, or is it ok to set column with TRUE, 1 etc ? (just because I have several dependant columns on it 
) Thanks again ---
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [May 6, 2021, 2:54pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/7 "2021-05-06T14:54:54Z")
You’re welcome @AyS_0908! As I said in the video, I comment we can use whatever column you want. Before I was used to add an boolean column and just set `true`, but **for me now** I prefer like this. This is not a requirement, you can do the way you prefer 😁 ---
**Author:** ![Guillaume\_RABALLAND](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/guillaume_raballand/32/35847_2.png) [@Guillaume\_RABALLAND](https://community.glideapps.com/u/Guillaume_RABALLAND)\ **Post date:** [January 23, 2022, 12:16pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/8 "2022-01-23T12:16:00Z")
Hi Lucas, I tried to implement your onboarding screens method, but I faced several issues so I used another way of creating an onboarding journey for new app users. I’ll explain here why and how. **Issues** - I already used the detail screen to show user’s information (when clicking on a user relation) in other parts of my app and implementing your solution allowed only one detail view for a user row item - the behavior when clicking several times on the default ‘return’ is weird, for example if I go the step 3 of my onboarding journey, then I click 2 times on ‘return’ to return to the step 1, when I click on the ‘next’ button, it shows me the step 3 instead of the step 2 **Solution** I used only 1 level of detail screen with all the components for my onboarding journey, and I created an ‘onboarding step’ variable along with conditions on the visibility of these components to show the components corresponding to the current step. **How to implement it?** 1. Create a new tab linked to the Users table and shown only when the column ‘onboarding completed’ is empty 2. Create all the components for the onboarding journey (progress bar, custom ‘return’ buttons, texts and inputs, ‘next’ and ‘finish’ buttons) 3. Configure the visibility of the components to correspond with the onboarding step when they should be displayed ![onboarding step 0](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/5/55c9da84d8774d1911427d2aa66462672e439c81.png) ![onboarding step 4](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/d/fd11f9f97fe31aebb8034aa081c14987a0c4abdf.png) 4. Configure the actions to set the value of the column ‘on-boarding step’ for the ‘return’ and ‘next’ buttons (value from ‘empty’ to 1, 2, 3, 4 and so on) ![buttons](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/1/61e4b4588ac449bb1349982d2447054ac2243768.png) 5. Configure the custom action for the ‘finish’ button (set value of onboarding completed to the current date & time, clear the value of onboarding step, and go to another tab of your app as the current tab will disappear) ![complete action values](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/e/3e1a86aae1e2408ddf3aeadf0d84f6fe99e79137.png) ![complete action](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/8/4883c41ec35382d2181b8944dc0cae76b328d842.png) 6. Finally, check the behavior of the whole onboarding journey (this is mine for example) **Pros** - No conflicts with other detail screens with user info elsewhere in the app - No weird behavior with the in-app return button because you use your own return buttons - Progress bar and onboarding step variable that make it clear at which step of your onboarding journey you are **Cons** - It may look messy to have all the components in the same details view for the app builder - You may forget some visibility conditions or values to set with the buttons, so it’s important to check all the screens and buttons ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [January 23, 2022, 4:05pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/9 "2022-01-23T16:05:39Z")
This method would be a LOT cleaner if Glide gives us containers in Glide Apps. @david 🙏 ---
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [January 23, 2022, 8:05pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/10 "2022-01-23T20:05:31Z")
Agreed! ---
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [January 23, 2022, 11:16pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/11 "2022-01-23T23:16:34Z")
Hey Guillaume! Great done! I use for some specific cases this type too ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [January 24, 2022, 12:11am UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/12 "2022-01-24T00:11:14Z")
Just a notice, you’re trying to set a number value to what seems like a text column in your “Onboarding step” column. If you ever try to change that to “number” I fear the whole thing would break. I would advise using a number column from the start alongside increment actions. ---
**Author:** ![Guillaume\_RABALLAND](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/guillaume_raballand/32/35847_2.png) [@Guillaume\_RABALLAND](https://community.glideapps.com/u/Guillaume_RABALLAND)\ **Post date:** [January 24, 2022, 12:20am UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/13 "2022-01-24T00:20:15Z")
Thanks, I changed it to a number column, it’s better even if it worked well also with text (because I use ‘set to’ value instead of ‘increase’ or ‘decrease’ number) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [January 24, 2022, 1:20am UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/14 "2022-01-24T01:20:24Z")
Yeah, if I recall right, if you set a custom value to a column it will be read as text. Great write up! ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [January 24, 2022, 3:43am UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/15 "2022-01-24T03:43:44Z")
Until glide gives us containers for apps, another way to organize the “messy” components would be to name your components in the data panel on the left-hand side. I recommend putting a prefix (onboarding step or the title of the step). eg. 1\_backButton ---
**Author:** ![Guillaume\_RABALLAND](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/guillaume_raballand/32/35847_2.png) [@Guillaume\_RABALLAND](https://community.glideapps.com/u/Guillaume_RABALLAND)\ **Post date:** [March 29, 2022, 8:38am UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/16 "2022-03-29T08:38:02Z")
Just an update for better UI design, I discovered (after sharing with you this small onboarding journey) the very useful **‘button bar’** component, which is better to display the ‘go back’ and ‘next’ buttons in the same line as shown bellow : ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/0/e0fbd6b43971f3deb481b095d7ee98997be0427b.png) And as @Robert_Petitto said bellow, it may be better to rename the components with the corresponding step when they should be visible 😉 ---
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [December 14, 2023, 10:54pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/17 "2023-12-14T22:54:18Z")
Hey guys! 👋 Pretty soon, I’ll be launching a new video and app template for all of you to create an amazing onboarding expererience in your app! **Wait for it!** ---
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [December 15, 2023, 6:59pm UTC](https://community.glideapps.com/t/how-to-create-onboarding-screens-flow/26404/18 "2023-12-15T18:59:54Z")
It is live đŸ”„ > [@busts\_in\_silhouette Users Onboarding template](https://community.glideapps.com/t/new-users-onboarding-template/68857): > > Hey gliders! saluting_face hope you’re doing good! Many people asked me for it and here it is! Improve your users’ experience with the new [User Onboarding template](https://www.glideapps.com/templates/user-onboarding-gk)! [https://www.youtube.com/watch?v=Rg0S43NUna8](https://www.youtube.com/watch?v=Rg0S43NUna8) The [User Onboarding template](https://www.glideapps.com/templates/user-onboarding-gk) is a complete solution for creating a personalized onboarding process for your users. With it, you can offer 3 different onboarding options: Welcome video: A custom video that introduces your app and its key features. Simple steps: A step-by-step onboardi