JS Link - How to change a column based on another column's value

Question

Hopefully this is quite simple! Here's my setup:

I have a custom Status Indicator column (PSI), and a "Production Status" column. I want the PSI column to show a different icon depending on the contents of the Production Status column. So IF(Production Status="a", PSI="1.jpg"), IF(Production Status="b", PSI="2.jpg"), and so on.

I understand how to replace content in the same column, and this is how the JS link currently works. I'd like to know how I get it to reference a different column. So when the user changes the "Production Status" (from a choice list), the PSI indicator icon will change to reflect the new status. Thanks!

Answer 1

When you're in the rendering cycle, in your CSR override code, ctx.CurrentItem will have other field values. So for instance you could check ctx.CurrentItem.ProductionStatus (or whatever the internal name of your field is).

I highly recommend setting a breakpoint in your CSR script and exploring what is available on the ctx object during rendering.

Another alternative though would be to make your PSI column a calculated column based on Production Status, and then in your CSR override code, just return the appropriate HTML to display an image based on the PSI column's value.