0

I have a LWC which takes two boolean inputs isVideo and isImage in JavaScript file. Based on the value of isVideo or isImage, the LWC behaves differently. At a time only one has to be true. While inserting the component on lightning detail page using Lightning App Builder, I want to have a radio button to select isVideo or isImage. I wish to use design attributes to achieve it. This means that the same component gets added twice but with true for isVideo the first time and true for isImage the second time. I referred this site and official documentation. Is there a way to add a radio button in design attributes? Please guide. Thank You!

meta.xml file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>   
        <targetConfig targets="lightning__RecordPage">
            <property name="isVideo" type="Boolean" label="Video Component"/>
            <property name="isVideo" type="Boolean" label="Image Component"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
1

To specify a list of options, you need to do so in a single attribute. such as:

<targetConfig targets="...">
  <property datasource="Video,Image" name="mediaType" type="String" required="true" />
  ...
</targetConfig>

And in your JS file:

isVideo;
isImage;
@api set mediaType(value) {
  this.isVideo = value === 'Video';
  this.isImage = value === 'Audio';
}
get mediaType() {
  return this.isVideo? 'Video': this.isAudio? 'Audio': '';
}
| improve this answer | |
  • Thanks for the answer! I am getting the error The 'mediaType' property doesn't exist on the component. What is wrong here? – Koustubh Apr 14 at 5:22
  • 1
    @Koustubh I forgot it should have been marked with the api decorator: import { LightningElement, api } from 'lwc'; ... @api set mediaType(value) { ... } Also, just tested, a setter is required. See edits. – sfdcfox Apr 14 at 5:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.