Forum Discussion

johnjohn-Peter's avatar
johnjohn-Peter
Iron Contributor
Aug 21, 2024
Solved

Color code my SharePoint choice column inside Details List layout inside Modern Search web part

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?

developer
SharePoint Online
  • DaveMehr365's avatar
    DaveMehr365
    Aug 23, 2024

    Hello johnjohn-Peter

     

    have you checked the item value without your custom layout? Is the value displayed?

    I think you don't need a slot configuration for this case.

     

    I use the following expression to show me a project status in the colors red, yellow or green, depending on the value:

     

    <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>

     

    Best, Dave

2 Replies

  • DaveMehr365's avatar
    DaveMehr365
    MVP
    Aug 23, 2024

    Hello johnjohn-Peter

     

    have you checked the item value without your custom layout? Is the value displayed?

    I think you don't need a slot configuration for this case.

     

    I use the following expression to show me a project status in the colors red, yellow or green, depending on the value:

     

    <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>

     

    Best, Dave

Resources