Color code my SharePoint choice column inside Details List layout inside modern search web part

Question

I have a PnP Modern search's Search result web part. and i am using the "Details List" layout, as follow:-

And i added a slot named "LoadStatus", as follow:-

then inside the "Manage Columns" section, i tried to add this expression to colour code the field based on its value:-

{{#eq slot item @root.slots.LoadStatus "OPEN"}}
    <div class="sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-field-fontSizeSmall sp-css-color-CoralFont">
        {{ slot item @root.slots.LoadStatus}}
    </div>
{{else if (eq slot item @root.slots.LoadStatus "COVERED")}}
    <div class="sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont">
        {{ slot item @root.slots.LoadStatus}}
    </div>
{{else if (eq slot item @root.slots.LoadStatus "DISPATCHED")}}
    <div class="sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont">
        {{ slot item @root.slots.LoadStatus}}
    </div>
{{else if (eq slot item @root.slots.LoadStatus "AT SHIPPER")}}
    <div class="sp-css-backgroundColor-BgCyan sp-css-borderColor-CyanFont sp-field-fontSizeSmall sp-css-color-CyanFont">
        {{ slot item @root.slots.LoadStatus}}
    </div>
{{else if (eq slot item @root.slots.LoadStatus "LOADED")}}
    <div class="sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont">
        {{ slot item @root.slots.LoadStatus}}
    </div>
{{else if (eq slot item @root.slots.LoadStatus "CONSIGNEE")}}
    <div class="sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont">
        {{ slot item @root.slots.LoadStatus}}
    </div>
{{else if (eq slot item @root.slots.LoadStatus "AT RECEIVER")}}
    <div class="sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont">
        {{ slot item @root.slots.LoadStatus}}
    </div>
{{else if (eq slot item @root.slots.LoadStatus "DELIVERED")}}
    <div class="sp-css-backgroundColor-BgLightGray sp-css-borderColor-LightGrayFont sp-field-fontSizeSmall sp-css-color-LightGrayFont">
        {{ slot item @root.slots.LoadStatus}}
    </div>
{{else if (eq slot item @root.slots.LoadStatus "INVOICED")}}
    <div class="sp-css-backgroundColor-BgLilac sp-css-borderColor-LilacFont sp-field-fontSizeSmall sp-css-color-LilacFont">
        {{ slot item @root.slots.LoadStatus}}
    </div>
{{else if (eq slot item @root.slots.LoadStatus "CANCEL/TONU")}}
    <div class="sp-css-backgroundColor-BgLightGray sp-css-borderColor-LightGrayFont sp-field-fontSizeSmall sp-css-color-LightGrayFont">
    {{ slot item @root.slots.LoadStatus}}
    </div>
{{else}}
    {{ slot item @root.slots.LoadStatus}}
{{/eq}}

but i got "false" for all the items, as follow:-

so what could be the reason? why the color code is not working?

Answer 1

You could refer following codes as example to color the field.

<div style="display: {{#if RefinableString104}}inline-block{{else}}none{{/if}};border-radius: 15px;padding: 5px 7px;margin: -5px 0 0 -7px;{{#if (eq RefinableString104 "Offen")}}color: #004E8C;background-color: #80C6FF;{{else if (eq RefinableString104 "Stopp")}}color: #A4262C;background-color: #FABBC3;{{else if (eq RefinableString104 "Late")}}color: #8F6200;background-color: #FFEBC0;{{else if (eq RefinableString104 "Working")}}color: #437406;background-color: #CAF0CC;{{else if (eq RefinableString104 "Done")}}color: #FFFFFF;background-color: #498205;{{else}}color: #666666;background-color: #E5E5E5;{{/if}}" data-value="{{RefinableString104}}">{{RefinableString104}}</div>