# Display a status checklist **URL:** \ **Category:** Ask for Help\ **Created:** [February 15, 2024, 4:55am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836 "2024-02-15T04:55:43Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![schrutefarms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/schrutefarms/32/59686_2.png) [@schrutefarms](https://community.glideapps.com/u/schrutefarms)\ **Post date:** [February 15, 2024, 4:55am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/1 "2024-02-15T04:55:43Z")
Hello everyone, I would like to add a status checklist to our Purchase Orders looking something like in the screenshot below. I would also like the icon change color to black if the step is completed. In the screenshot I am using the list component pulling in data from a “Order status table” and was thinking I could use relations to the order to display the correct status. And this is where I got stuck 🙂 Could someone please point me in the right direction or give your thoughts on how you would approach this? Thank you! ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8b8e19f675bfb1c3030591afcbe37bafb9fa99c5.png) ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [February 15, 2024, 6:17am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/2 "2024-02-15T06:17:39Z")
If you have the Status, you can use that in an if-then-else column to assign a colour, and then use that to generate (for example) a Hero Icon to use as the Image in the collection. So maybe something like: - If Status is Completed, then black - Else grey ![CleanShot 2024-02-15 at 14.17.03@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/d/8d075df800cee27173f0ac2399645eb780f57fbf.png) ---
**Author:** ![schrutefarms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/schrutefarms/32/59686_2.png) [@schrutefarms](https://community.glideapps.com/u/schrutefarms)\ **Post date:** [February 15, 2024, 6:31am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/3 "2024-02-15T06:31:01Z")
@Darren_Murphy Thank you, that is excellent. I guess my biggest problem is to understand how I should set up the relation between the order and the “status items” to display them correctly depending on the status of the order. In my opinion the list collection is the best visual approach to do this, but I don’t know how I should approach the relations part to set it up. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [February 15, 2024, 7:01am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/4 "2024-02-15T07:01:20Z")
If I understand your setup correctly, I don’t think you need any relations. I assume that each item has it’s own status, which is in your Order Status table, yes? If that’s the case, you can add the 3 columns that I suggested in that table. Then on your Orders details screen (which I assume is the one shown in your screen shot), you can use the Order Status table as the source of the Collection, and filter it where “OrderID is Screen-\>OrderID” ---
**Author:** ![schrutefarms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/schrutefarms/32/59686_2.png) [@schrutefarms](https://community.glideapps.com/u/schrutefarms)\ **Post date:** [February 15, 2024, 7:26am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/5 "2024-02-15T07:26:54Z")
Thank you very much for your help. At the moment the “Order Status” table that I used to populate the collection in my screenshot is just a static table to hold the diferent statuses with its checkmarks. All the data is in my orders table where I would like to use different date columns to set/update the status of the order. For example, when shipping fees are paid a date gets written to a “Shipping costs paid on” column. As soon as this column has a value I would like the checkmark for the step “Shipping costs paid” change to black instead of gray. Hope my explanation makes sense 🙏 ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [February 15, 2024, 8:05am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/6 "2024-02-15T08:05:26Z")
ah, I see - so the Status should be dynamically derived based on the values in other columns? Any chance you can share a screenshot of your Orders table and explain how each status should be determined? If I can see that, I should be able to help you with the logic. ---
**Author:** ![schrutefarms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/schrutefarms/32/59686_2.png) [@schrutefarms](https://community.glideapps.com/u/schrutefarms)\ **Post date:** [February 15, 2024, 8:34am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/7 "2024-02-15T08:34:55Z")
Sorry for the confusion. It is not a general “Order status” per say, where the order currently has a general status that I would like to display but more of a order progress tracker I guess. I have some date columns in my Order table that looks like the screenshot below: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/2/e2c98c240e75eab4c1d1acb537f8b4bddacd7d19.png) As the order gets updated these dates are filled. The steps can differ depending on supplier (we might pay shipping first for one order, and supplier first for another). This is also reason why I would like to display a “checklist” with all the steps/statuses displayed at all times but “greyed out” if there is not yet any value in the date column for the specific action. For example. When the order is first created, the checklist displays as seen in my original post with all the steps greyed out. Then after a few weeks we pay for shipment. Our office staff then opens the order, adds the shipping fee amount and the date the payment was made. This date gets written to the “Shipping payment date” seen in the screenshot above. As soon as this column is no longer empty I would like the checkmark for thist step change from gray to black to indicate that this step has been completed. Hope this makes my use case clearer 🙂 ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [February 15, 2024, 9:12am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/8 "2024-02-15T09:12:10Z")
Okay, I get it. This is tricky, but it’s doable. I might need some time to replicate what you have and make sure the solution I have in mind will work for you. I’ll get back to you a bit later. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [February 15, 2024, 10:11am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/10 "2024-02-15T10:11:48Z")
@schrutefarms - let me know if the below works for you: The JavaScript you will need: ```auto const dates = p1.split('||'); return dates[p2] ? 'black' : 'grey'; ``` - `p1` should be replaced with the column from the User Profile row - `p2` should be replaced with the RowIndex column in the Order Status table ---
**Author:** ![schrutefarms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/schrutefarms/32/59686_2.png) [@schrutefarms](https://community.glideapps.com/u/schrutefarms)\ **Post date:** [February 15, 2024, 11:11am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/11 "2024-02-15T11:11:47Z")
Wow, this is great! Thank you so much for making the video to explain. I will try this asap! Might not be able to give you an update today since it is getting late, but will let you know as soon as I have tested it. Thanks again! ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [February 15, 2024, 11:56am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/12 "2024-02-15T11:56:20Z")
You’re welcome. I felt that the video was necessary in this case, because the solution is a little unconventional. It would have been difficult to explain without the video, and probably more difficult to follow 😉 The challenge is that you have a series of columns that essentially need to be transposed into rows. Whilst there is a canonical method of doing that, it wouldn’t have worked in this case, so a slightly modified approach is required. Anyway, hopefully it does the job for you, let me know how you get on. ---
**Author:** ![schrutefarms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/schrutefarms/32/59686_2.png) [@schrutefarms](https://community.glideapps.com/u/schrutefarms)\ **Post date:** [February 20, 2024, 1:38am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/13 "2024-02-20T01:38:38Z")
@Darren_Murphy Hi Darren, I am not able to play the video. Has it expired? 🤔 Very sorry, I have been away for a few days and just got back. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [February 20, 2024, 3:30am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/14 "2024-02-20T03:30:31Z")
No, it doesn’t expire. Try copy/pasting the below link into a browser: ```auto https://www.loom.com/share/b7befbf935ae42c38056ee3aee6268ef ``` ---
**Author:** ![schrutefarms](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/schrutefarms/32/59686_2.png) [@schrutefarms](https://community.glideapps.com/u/schrutefarms)\ **Post date:** [February 20, 2024, 4:16am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/15 "2024-02-20T04:16:02Z")
@Darren_Murphy you are a lifesaver! It works perfect and what a neat way to solve this problem 🥳 I have know previous experience with JavaScript but it was easy to implement your snippet with the JavaScript column and I understand how I can edit it if I wanted to use different colors for the icons. Thank you so much for taking the time to show me how to implement this and for your very clear explanation! ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [February 20, 2024, 4:27am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/16 "2024-02-20T04:27:55Z")
That’s great! Very happy to hear that it did the job for you. ---
**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\ **Post date:** [February 27, 2024, 4:28am UTC](https://community.glideapps.com/t/display-a-status-checklist/70836/17 "2024-02-27T04:28:50Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.