function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
EagerToLearnEagerToLearn 

How to use LWC Condition Checking against two values

Its seem that you have to go around the barn every which way I turn with SF LWC!  I am trying to do a simple condition check but I don't want to check true to a boolean value such as below.  I want to check a data records field value to a hard-coded value in the HTML file.

<template if:true={mydata.data}>

I want to check the value of the of the data to a hardcoded value like...

<template for:each={mydata.data} for:item="d">
     <div key={d.Message__c}>
         <div if:m.Message_Style__c = "Success">
             <strong>{m.Message__c}</strong>
         </div>
     </div>
</template>


I tried...

<div if:true={m.Message_Style__c} = "Success">

and

<div if:true={m.Message_Style__c} == "Success">

and other variations with no luck.

Just seem like there is so much lacking capability to easily do conditional markup in LWC.  I am really new to LWC and not much on javascript or HTML so that could be some of my issue! :)

What I want to do is have the data on a record control the color theme.  So if a user picks from the picklist "Info" it will use the slds-theme_info, or if the record has "Success" selected in the picklist then the data is displayed using the slds-theme_sucess.

Thanks for your help.
Abhishek BansalAbhishek Bansal
Can you please try the below options:
<template if:true={m.Message_Style__c = "Success"}>
	<div>
		 <strong>{m.Message__c}</strong>
	</div>
</template>

OR:
<template if:true={m.Message_Style__c == "Success"}>
	<div>
		 <strong>{m.Message__c}</strong>
	</div>
</template>

One of them should work.

Thanks,
Abhishek Bansal. 
Alain CabonAlain Cabon
The problem with LWC is that you cannot use an expression but just a boolean property.

Here, it is a blocking problem so you need to add the results of all the tests: d.Message_Style__c == "Success" in mydata.data as a new boolean variable isSuccess in the controller js.
 
<template>
    <table>
        <template for:each={mydata.data} for:item="d">
            <tr key={d.Name}>
                <td>{d.Name} > </td>
                <td>
                    <div if:true={d.isSuccess}>
                        <strong>{d.Message_Style__c}</strong>
                    </div>
                    <div if:false={d.isSuccess}>
                        {d.Message_Style__c}
                    </div>
                </td>
            </tr>
        </template>
    </table>
</template>
 
import { LightningElement, api } from 'lwc';

export default class Looptests extends LightningElement {

  @api
  get mydata() {

      let mydata1 = {data:[{Name:"test1",Message_Style__c:"Success"},{Name:"test2",Message_Style__c:"Failure"},{Name:"test3",Message_Style__c:"Success"}]};

      mydata1.data.forEach(element => {
          if (element.Message_Style__c == 'Success') {element.isSuccess = true} else {element.isSuccess = false}
      });
      return mydata1;
  }
}

 
Alain CabonAlain Cabon
You can use the local development server for these tests:

User-added image

 
EagerToLearnEagerToLearn

Abhishek Bansal - that won't work as I have tried that and it seems as Alain Cabon has stated the test can only test against a value not a compared evaluation that equates to a boolean then against the TRUE or FALSE.  I find this crazy.  

Alain Cabon, I have more to lean about understanding Javascript do I do not fully understand you potential solution.

In the mean time, last night what I did was produced apex methods (4 of them) for each color condition I am interested in.  Each method reads the database record and compares if the value matches the expected value that the given method wants and if so it returns true; otherwise false.  Only one of those methods will be able to return TRUE.  I setup a Template Conditional Check (4 of them) against those boolean values from the apex methods to determine what color to display.  Again, to me this a a long way around the barn plus I know it is not efficient because i am hitting the database for each of those color methods!  I did try to have public List at the top of the class so I could call the query once and pass it to the color methods so I only hit the database once but I get different types of errors.  I will work on trying to get that to work for efficiency.

Just makes no sense that since I have the data at the HTML level from the looping perspective that I should be able to compare a value of the database against a hard-code value of "Success" or "Blue" or "Red", etc.  I used the SF themes for color not so much as for error trapping.

I have it working and it appears pretty fast on the screen but it is clear hitting the database (query) in 4 different methods just to set one of them true is not efficient but it will do for now until I can get better at Javascript or call it once and pass the list to each method.

Shalini Soni 6Shalini Soni 6
Hello @EagerToLearn : Could you find its solution. I have the same requirement.
EagerToLearnEagerToLearn
Hi Shalini,

What I had to do was create mutlipe html template tags and the JS file had a @wire method for each color choice and associated apex methods .  One was like this...

<template if:true={yourmethodforTheme1.data} for:each={quickLinksMessage.data} for:item="m">                    
               ---your additional code here     
</template>

<template if:true={yourmethodforTheme2.data} for:each={quickLinksMessage.data} for:item="m">                    
               ---your additional code here     
</template>
...
more templates as you need different theme choice
....



Apex snippet example for this...you can pass a value to the method to help get the result true or false return.
You solution may be slightly different but the key is to get only one TEMPLATE above to be true so it shows and the others don't..
As mentioned above your JS file has to have the matching @wire method

@AuraEnabled(cacheable=true)
    public static Boolean getyourmethodforTheme1(String valuepassedin) {          
        if (valuepassedin ==  'somevalue' ) return true;
        return false;
    }
    @AuraEnabled(cacheable=true)
    public static Boolean getyourmethodforTheme2(String valuepassedin) {  
        if (valuepassedin == 'somevalue') return true;                   
        return false;
    }



In your apex code you have to ensure you only make one of the results for the template is true and all others false -- that way only the them you want will show as the template if:true... will handle it for you.  This approach caused me to have to duplicate the code inside the template for each theme I wanted but the outcome was what I wanted - dynamically showing a theme choice. 

I am not really good at JS but that was my work around.  I did this months ago and had review how I did it so that is about all I can help you with.  I hope it gets you over the hurtle some how. --Good Luck and sorry for the late reply.