1

I'm transitioning from Aura Components to Lightning Web Components these days, and there are a few things I can't get a grip on.

Especially this is when using the template for:each

On each iteration on rendering, is it not possible to identify each item?

My case here is that I'm rendering a custom table using all the Salesforce css-classes, and the Aura Component I'm converting is presenting a background-color on each based on the value in Asset.Asset_Status__r.Background_color__c which can contain for example "FF0000".

Template:

              <tr key={rec.Id}>
                <th scope="row">
                  <div class="slds-truncate">{rec.Name}</div>
                </th>
                <td class="slds-cell-wrap">
                  <div class="slds-truncate">{rec.Asset_Status__r.Name}</div>
                </td>
                <td>
                  <div class="slds-truncate">{rec.Related_L1_Technology__c}</div>
                </td>
                <td>
                  <div class="slds-truncate">{rec.DeliveryAddress__c}</div>
                </td>
                <td>
                  <div class="slds-truncate">
                    <lightning-formatted-date-time
                      value={rec.InstallDate}
                      year="numeric"
                      month="2-digit"
                      day="2-digit">
                  </lightning-formatted-date-time></div>
                </td>
                <td>
                  <div class="slds-truncate">
                  <lightning-formatted-date-time
                  value={rec.UsageEndDate}
                  year="numeric"
                  month="2-digit"
                  day="2-digit">
              </lightning-formatted-date-time></div>
                </td>
                <td>
                  <div class="slds-truncate">
                    <template lwc:if={rec.HarInternett__c}>
                      <span class="slds-badge slds-theme_success">Internett</span>
                    </template>
                    <template lwc:else>
                      <span class="slds-badge slds-theme_inverse turnthelightoff">Internett</span>
                    </template>
                    <template lwc:if={rec.HarTV__c}>
                      <span class="slds-badge slds-theme_success">TV</span>
                    </template>
                    <template lwc:else>
                      <span class="slds-badge slds-theme_inverse turnthelightoff">TV</span>
                    </template>
                  </div>
                </td>
              </tr>
            </template>

The value for the "background-color: " styletag which I thought could be included as a styletag like this will not work:

<tr key={rec.Id} class={rec.Asset_Status__r.BackgroundColor__c}

I guess that's because the value would just contain the color hex, and not "background-color: #FF0000"

I have read through a whole bunch of threads but have not come across any solutions for this.

I guess best practice is not to put this logic in the template. Any suggestions?

2 Answers 2

2

Typically, you would modify the data to match the purpose you need it for. For example, you might write:

records = [];
@wire(method, { params }) handler({data, error}) {
  if(data) {
    this.records = data.map((record) => ({ 
      ...record, 
      style: `background-color: #${record.Asset_Status__r.BackgroundColor__c}` 
    }));
  }
}

Then, you can apply the calculated value:

  <tr key={rec.Id} style={rec.style}

Note that you use style, rather than class, to denote inline styles.

2
  • Thank you so much. This looked like a clean approach to this problem. I have implemented it and it works fine. The only thing is that VS Code complains about ``` } expected ``` and ``` at-rule or selector expected</code> ```
    – Firestone
    Aug 15, 2023 at 8:14
  • 1
    @Firestone Yeah, that's just a local rule validation that doesn't understand LWC properly. You should be able to configure vs code to ignore that error, though I don't recall how off the top of my head.
    – sfdcfox
    Aug 15, 2023 at 13:27
0

The only way I have found to do something like this is by placing the piece I need to have dynamic styling on in a child component and passing in the color as an api variable to the child component, and generating the class getter, as well as the rec value you have as an API value so you can generate the markup in the child component. So in child controller, you have something like this, though if the color is just part of rec value, you could just pass that in and parse in setterL

@api stylelement;
@api recvalue;
get dynamicStyle() {
   return 'background color: ' + stylelement;
}

markup

 <tr class = {dynamicStyle}>

And then in for loop, you call this child component and pass in background color with the stylelement value

 <template for:each={myvalues} for:item="rec">
 <c-with-dynamic-styling stylelement={rec.Asset_Status__r.BackgroundColor__c} recvalue={rec}></c-report-dynamic-styling>

You must log in to answer this question.

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