0

i want to fill the svg color based on condition

JS :

get OpptColorIcon() {
    const colors = this._listOpp.map(opp => {
        return opp.Scoring === "weak" ? "#FF8C00" : "#A52A2A";
    });

    return colors;
}

html :

<tbody>
                <template if:true={searchable} for:each={searchable} for:item="opp">
                    <template if:false={opp.isHidden}>
                        <tr key={opp.Id} class="box-shadow font-family">
                            <td class="slds-text-align_left width-10 padding-left-10" role="gridcell">
                                <lightning-input type="checkbox" checked={opp.isChecked} onclick={handleSelect}
                                    data-id={opp.Id}></lightning-input>
                            </td>
                            <td class="slds-text-align_left padding-5">
                                {opp.NomPrenom}
                            </td>
                            <td class="slds-text-align_left padding-5">
                                <lightning-formatted-date-time value={opp.Date} year="numeric" month="numeric"
                                    day="numeric" time-zone="UTC">
                                </lightning-formatted-date-time>
                            </td>
                            <td class="slds-text-align_left padding-5">
                                {opp.Offre}
                            </td>
                            <td class="slds-text-align_left padding-5">
                                {opp.Marche}
                            </td>
                            <td class="slds-text-align_left padding-5">
                                <lightning-formatted-date-time value={opp.DateEffet} year="numeric" month="numeric"
                                    day="numeric" time-zone="UTC">
                                </lightning-formatted-date-time>
                            </td>
                            <td class="slds-text-align_left padding-5">
                                {opp.Prime}
                            </td>
                            <td class="slds-text-align_left padding-5">
                                <lightning-formatted-rich-text value={opp.displayHourglass}>
                                </lightning-formatted-rich-text>
                                {opp.HistoriqueDate}
                                <div class="link-style" data-id={opp.Id} onclick={handleHistoriqueRelance}>
                                    {opp.displayText}
                                </div>
                            </td>
                            <td class="slds-text-align_left padding-5">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
                                    fill="none">
                                    <path data-id={opp.id}
                                        d="M7.88867 15.5C3.81417 15.5 0.506226 12.2493 0.398874 8.20051L0.388671 0.499999L7.88867 0.5C12.031 0.5 15.3887 3.85808 15.3887 8C15.3887 12.1424 12.0306 15.5 7.88867 15.5Z"
                                        fill={OpptColorIcon} />
                                </svg>

it worked when i have 1 opportunity and it failed when i have more than 1 opporunity I couldn't do fill={OpptColorIcon[opp.Id]} in order to test on all opportunity and change the js like

get OpptColorIcon() {
        return scoring === 'weak' ? '#FF8C00' : '#A52A2A';
}

It doesn't work either ...

1 Answer 1

0

The color property should be available for each opportunity record in the list searchable which is used in for each loop

When you are preparing the searchable list, set the iconColor property

this.searchable.forEach((opp)=>{
    opp.iconColor = opp.Scoring === "weak" ? "#FF8C00" : "#A52A2A";
})
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
    <path data-id={opp.id}
        d="M7.88867 ..."
        fill={opp.iconColor} />
</svg>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .