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?
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.
@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.
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”
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.
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.
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:
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.
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.
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!
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.
@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!
Very sorry, I have been away for a few days and just got back.
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.