Load limited rows based on chosen parameter

Hoping to get some ideas/inspiration for this topic from this helpful community! The complexity of my little app is growing like crazy, so I’m not sure I’m doing a great job at keeping it all together :crazy_face: So if explanations are incomplete or vague, please let me know, I’ll try to explain further!


So, I’m working on StitchEase: an app where crocheters can see instructions for crocheting step by step and keep track of their progress. To achieve that, I have a few tables set up:

  • Patterns – this is the main page of the project one’s working on. It has a bunch of metadata (designer name, recommended material, etc. It’s also related to Pattern Instructions, which allows me to show a list of all the steps one needs to complete as an inline list
  • Pattern Instructions – step-by-step instructions for each pattern. Each row in this table represents one step of the pattern they are working on. There’s more info in these rows, but I want to limit this discussion to only Instructions and # of stitches per step, as those are most relevant for this discussion.
  • Working row – a dynamic table that allows me to load contents of Pattern Instructions and navigate back and forth between rows while avoiding the weirdness of the “Back” button going through multiple steps. I can further detail this, but it’s also described here.

I only had to deal with a linear set of instructions until recently. However, many crochet patterns come in multiple sizes. The size that the user chooses to crochet affects both the number of stitches one must do for that step AND the number of steps they have to do. It’s important to say that sizing is not consistent for different patterns. Some of them will have three sizes available; some might have up to 9 (that I’ve seen, who knows, maybe even more).

So the desired flow would be to allow the user to select the size of the piece they are working on and only load instructions relevant to that size. My little blond brain gives up when I think about this, so need your help! :rofl:


Here are a couple of options I’ve considered:

Option 1 – dumb, dirty, and expensive

So the obvious solution here would be to add a selector on the Patterns table to select the size, and then use that size to filter Pattern Instructions structured the following way:

Step Size Instructions # of stitches
Step 1 S Written instructions 10
Step 1 M Written instructions 15
Step 1 L Written instructions 20

This structure is pretty simple and should work perfectly. However, I’m hesitating because this approach means:

  • Potentially duplicating instructions for each size, which means updating them will be a PIA.
  • Each pattern will now take up X times more rows (where X is # of sizes offered). Not only does this seem wasteful, but it will also get expensive, fast :grimacing:

So I’m trying to figure out if there’s a better way.

Option 2 – more compact, but unclear how to make it all work :crazy_face:

For example, I could structure my Pattern Instructions in this way:

Step Instructions S – # of stitches M – # of stitches L – # of stitches
Step 1 Written instructions 10 15 20
Step 2 Written instructions - 15 20
Step 3 Written instructions - - 20

This structure is a lot more compact but has some problems:

  • While I have an idea on how to use visibility conditions to make the structure above work for steps with all sizes present, I’m failing to figure out how to tell Glide to “skip” steps where instructions are missing.
  • Because sizing is inconsistent across various patterns, I’m afraid that baking just five sizes, or 7, or 15, whatever, straight into this table is not the best way to handle this…

Questions / ask

  • How should I structure my data to get the best of both worlds? Are there best practices I could read up on for data structuring?
  • What other tools could I use to achieve the same result? Is there maybe a way to use arrays somehow? Thinking something like a table below + a table that creates a relation between a size defined in the pattern (S, M, L) with the “place” in the array (0, 1, 2)? However, I guess the question from Option 2 still stands – how do I “skip” steps that don’t have those instructions?
Step Instructions # of stitches per size – S, M, L (array)
Step 1 Written instructions 10, 15, 20
Step 2 Written instructions -, 15, 20
Step 3 Written instructions -, -, 20

Looking forward to your ideas! Thank you in advance =)

Hola!

Nice explanation and tables/graphs to help to understand your problem. Congrats :muscle:

Well, I think you have almost your problem fixed, the missing piece (or column) is to create a real column to save/retrieve your array’s data. You can do it using a Lookup on S,M,L sizes and later, any relation pointing out to that new column will give you the instructions or steps associated to the selected size.

Saludos!

2 Likes

I think I need a little bit more explanation here :rofl: Sorry, just a designer stumbling through sheets :rofl:

1 Like

I guess the whole problem is not so much in loading limited rows based on the chosen parameter (I can make it happen in different ways, including arrays), but rather enabling that Prev/Next functionality AND skipping “empty” rows at the same time.

I made a prototype of all of this to demonstrate what’s happening. Right now, you can see that although I can filter a list by size, the Pattern Instructions Prev/Next is broken. It loads both rows with data (total stitches count) and rows without data (-). I want to be able to skip those rows without data (-), and just go straight to the next Part. Here’s the link to the prototype (copyable)
CleanShot 2022-02-14 at 20.01.50

I just made a copy and had a quick poke around in that.
I think one way to fix that button behaviour would be to first determine the value of the “next” row, and then make your button actions conditional on that value. ie. "only increment if next row is not -"

Although, that wouldn’t be very clean. I have an idea for an alternative approach that might be better, that just involves making a few adjustments to your working table. I’ll have a play with that, and will let you know if I come up with anything.

1 Like

Hola de nuevo!

I am out of my home today but as soon as I get back I take a look at you demo to help you unless Darren has given you the right procedure before.

Bye

1 Like

I did start playing around with this today, but I got distracted by my day job, so I don’t have anything for you yet - sorry.

One comment I will make though is that I noticed that your Size Choice Component is writing to a basic column. You should change this to a User Specific Column, otherwise you’ll wind up with users tripping over each other at some point in the future. (maybe it already is user specific in your real app?)

Yes, I was planning on making it User-specific in an actual app, just forgot to check it for the prototype.

Hola!

I’m working on the solution and make it simple.

A question: do you really need the Pre/Next buttons for your idea?

What if you show all steps associated to user selection (size) in an InLine List dynamically?.

Chao

1 Like

Hola @Tamara_Didenko

Here my version for your case after reading several times your explanation :face_with_head_bandage:. It coud be easier if the Pre/Next buttons are not needed but I left them to test other options/ideas.

Also, I made some adjustments to your table schema in order to save columns, data and make APP simpler, well… I hope so :innocent:

Have a nice night!

1 Like

Thank you for trying!
This looks like what I considered Option 1. My main concern with it is that it will require too many rows :sob: Bigger patterns already take 150-200 rows, if I have to repeat them x3-5-7-9 times, it will get way too expensive too soon. It’s just a prototype that doesn’t make any money yet so it matters.

There are definitely some interesting ideas there. I’m going to dig a bit deeper into that tomorrow!

1 Like

Funny… you are playing another league :rofl:

I didn’t want to complicate the solution because you wrote that you are “a designer stumbling through sheets” but tomorrow I can test with your idea shown above (using arrays) :wink:

Saludos!

1 Like

Sorry if I confused you. I really am stumbling, more like a monkey repeating what it sees than really understanding the logic :rofl: I guess just good at copying, lol

So the idea that I had was to add more rows to your working table - enough to cover the maximum number of sizes. Which I guess might be no more than about a dozen rows?

And then once a size is selected, pull the stitches array into that table and transpose it into X rows of data, one for each item in the array. Then use that to build a relation back to your patterns table, and drive everything from there. I’m not certain that this approach would work, but I have used a similar approach in other apps so I suspect that it might.

I just haven’t had time to fully get my head around your data structure and build the idea out. I’d like to say I’ll be able to do that today, but if I’m being honest that’s probably unlikely.

Anyway, perhaps that’s an idea you can explore.

1 Like

Well, I think I solved it :rofl:
CleanShot 2022-02-15 at 19.48.25

Solved it in exactly the same way I solved the instructions before, so the solution was there all along :woman_facepalming:


So my working row (the one with Prev/Next button) finds what to load based on template_current_row which in turn is a combination of pattern_id and incr_row. Prev/Next actions are a simple Increment +/-

So, in my Pattern Instructions table, instead of numbering steps with a single number, I write out a number per size (not sure if it makes any sense, but here it is :rofl:). Then I slice it, the same way I slice my stitch counts, and load the appropriate step number using the same logic as stitch counts (Single value column with Row set by lookup). I then use this new number in my template column the same way I had it before, but with a single number. So all my rows that need to be skipped, that don’t have instructions for that size now look like pattern_id_-, while rows that need to show up have sequential numbers. :dancing_women:

If the explanation above doesn’t make any sense, here’s the prototype and I can put together a diagram tomorrow.


oh, that’s very interesting… I want to give it a try just to see if there’s anything I can learn from it… I suspect that I might still run into the issue of “skipping rows with no instructions” since Prev/Next button is a simple increment. So yes, if I’m understanding you correctly, it will pull up the correct instruction, but in some cases it will pull up “empty” instructions…

3 Likes

My idea there was once the stitches array is transposed into rows, to then use an if-then-else column to discard any rows without a value in the stitches column. Then use that if-then-else column to build the relation back to the patterns table.

Hey there,
I didn’t end up using this method you suggested, but I used transposing for some other things (dynamic choice of size, dynamically loading stitches for the pattern, breaking up instructions into rows in the list, etc.) and IT’S A GAME CHANGER :star_struck: Thank you for pointing me in that direction. I’ll be able to save so many rows.
QuickGeneralElephantbeetle-max-1mb

And also thank you to @Robert_Petitto for the Miracle Method

2 Likes

Good to know it! :muscle:

May we see how your newer prototype looks like?

Saludos

1 Like

Same link as above =)

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.