Make LWC Display Different Body Messages Based on Picklist

Question

I have started the LWC below. I am attempting to clean up our rich text screen components on a lightning page. Currently there are over 12 different components based to show on a picklist value. I want to condense those into one LWC. So if Picklist Value = "1" the LWC should display the first paragraph code message below.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<Center>
    <H1>Attention:</H1>
    <p>Please be advised that this client was mailed <a href="https://mysecretlink" target="_blank">Message Link Text</a> letter on 12/1/2020 for the Legacy Secret Project. </p>

    <p>Please be advised that this client was mailed <a href="https://mysecretlink2" target="_blank">Message Link Text</a> letter on 12/1/2020 for the Legacy Secret Project. </p>
</Center>

I'm pretty limited with my knowledge of LWC so any advice on how to display the message based on picklist would be awesome! I'd really like to stick to just one component that runs on one object with one picklist.

Thanks!

score 1 · Accepted Answer · answered Dec 24 '20 at 06:59

You can create a @track variable in lwc js file, and store the active value of picklist into it.

Create a couple of getters for different conditions.

In lwc HTML file, wrap the paragraph tag with template tag and use if:true directive with appropriate getter as value

Example:

In component.html:

<template if:true={value1}>
    <p>text for value 1</p>
</template>

<template if:true={value2}>
    <p>text for value 2</p>
</template>

In component.js

@track picklistVal;

get value1(){
    return this.picklistVal == '1';
}
get value2(){
    return this.picklistVal == '2';
}

score 0 · Answer 2 · answered Mar 02 '21 at 11:55

you can try one more simple approach In the above approach need to define multiple getters and multiple template conditions. which may leads to improper solution if you are having a huge amount of picklist values. component.html

<p> {value} </p>

component.js

    get value(){
       if(this.picklistValue == 'value1'){
          return 'value1';
       }
     return '';
    }

Make LWC Display Different Body Messages Based on Picklist

2 Answers2