# Layout for step by step instructions

**URL:** <https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740>\
**Category:** Ask for Help\
**Created:** [March 23, 2020, 9:02pm UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740 "2020-03-23T21:02:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![blairrorani](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blairrorani/32/43426_2.png) [@blairrorani](https://community.glideapps.com/u/blairrorani)\
**Post date:** [March 23, 2020, 9:02pm UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740/1 "2020-03-23T21:02:09Z")

</div>

I want to present steps (in a workout) that have unique instructions and a video.

Is there a layout (or a way to configure a layout) so that it works something like the [Tasty app](https://apps.apple.com/us/app/tasty/id1217456898)?

I’m referring to the steps in recipe instructions, i.e. 3 of 12, where you can advance between steps and each workout has it’s own set of steps.  
Thanks!!

 ![Screen Shot 2020-03-24 at 8.01.26 am](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/3/36d81555705e0fca9495ecf148803e3ac2c18c2a.jpeg)

---

<div class="post-metadata">

**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:** [March 23, 2020, 10:54pm UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740/2 "2020-03-23T22:54:27Z")

</div>

I like the idea. Probably need some sort of pagination. I’m thinking an inline list could work where details view has video and steps. On main page could also do a filter by step and if steps are sorted alphabetically, it could mimic this functionality.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 23, 2020, 11:02pm UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740/3 "2020-03-23T23:02:27Z")

</div>

Check out the paging example in [https://concepts.glideapp.io/](https://concepts.glideapp.io/). It’s pretty basic and I have a more advanced one for a photo gallery that I’ll try to post sometime soon.

---

<div class="post-metadata">

**Author:** ![blairrorani](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blairrorani/32/43426_2.png) [@blairrorani](https://community.glideapps.com/u/blairrorani)\
**Post date:** [March 23, 2020, 11:04pm UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740/4 "2020-03-23T23:04:40Z")

</div>

Thanks @Jeff_Hager, the paging example looks great, is there a way to not show the full list of steps to the user?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 23, 2020, 11:12pm UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740/5 "2020-03-23T23:12:23Z")

</div>

Well you could just change from the list layout to the detail layout.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 24, 2020, 1:17am UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740/6 "2020-03-24T01:17:54Z")

</div>

Here’s a copy of an app I’m working on. It pretty rough at the moment, but if you look at the memories tab you can see a more advance version of what I’m doing with the buttons. It’s a photo gallery with buttons that show the previous and next image. I’m displaying everything in reverse order so the logic is a bit backwards.

[rwtsk.glideapp.io](http://rwtsk.glideapp.io/)

---

<div class="post-metadata">

**Author:** ![blairrorani](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blairrorani/32/43426_2.png) [@blairrorani](https://community.glideapps.com/u/blairrorani)\
**Post date:** [March 24, 2020, 5:48am UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740/7 "2020-03-24T05:48:18Z")

</div>

Awesome Jeff. This would be a great component (pagination) right? Get’s pretty hacky to implement this using current components. #feature-requests

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [March 24, 2020, 7:31am UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740/8 "2020-03-24T07:31:07Z")

</div>

@Jeff_Hager Really like your food/activity tab. Great way of using choices. I can’t remember - can choices stay selected for one user or are they still ‘global’ so a change of choice will affect everybody?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 24, 2020, 9:41pm UTC](https://community.glideapps.com/t/layout-for-step-by-step-instructions/5740/9 "2020-03-24T21:41:27Z")

</div>

@blairrorani yes, it’s a bit hacky to get it to work nicely, but that’s how all code is written, right? 😉 I agree, this would be nice as a component.

@Krivo Currently my set up is global for all users. It would work fine if I had a detail record for each user, but that can be a lot of overhead for generic information like this. Right now I’m waiting for’ User Specific Data’ columns to become a reality. That will be huge for allowing people to build their own filters and storing unique data for each user within global data.
