Sunday, September 15, 2019

Radio Group buttons in Lightning Web Component(lwc)

This post explains how to implement radio buttons in the lightning web components(lwc)



RadioButtonsInLWC.html
<template>
    <lightning-card title="Radio Group in LWC">
        <div style="margin-left:3%;">
            <lightning-radio-group label="Account Type" 
                                    name="radioButtonGroup" 
                                    onchange={handleChange} 
                                    options={options}
                                    value={selectedValue}
                                    type="radio"></lightning-radio-group>
        
            <br/>
            <div if:true={selectedValue}>
                Selected Vlaue: <b>{selectedValue}</b>
            </div>
        </div>

    </lightning-card>
</template>

RadioButtonsInLWC.js
import { LightningElement, wire, track} from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import Type_FIELD from '@salesforce/schema/Account.Type';

export default class RadioButtonsInLWC extends LightningElement {
    @track selectedValue;
    @track options = [];

    // object info using wire service
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    // Getting Account Type Picklist values using wire service
    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Type_FIELD})
    typePicklistValues({error, data}) {
        if(data) {
            let optionsValues = [];
            for(let i = 0; i < data.values.length; i++) {
                optionsValues.push({
                    label: data.values[i].label,
                    value: data.values[i].value
                })
            }
            this.options = optionsValues;
            window.console.log('optionsValues ===> '+JSON.stringify(optionsValues));
        }
        else if(error) {
            window.console.log('error ===> '+JSON.stringify(error));
        }
    }

    // handle the selected value
    handleChange(event) {
        this.selectedValue = event.detail.value;
    }

}

RadioButtonsInLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="RadioButtonsInLWC">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output

15 comments:

  1. How to make this radio group view horizontal?

    ReplyDelete
    Replies
    1. display : inline-block !important;

      Delete
    2. display : inline-block !important;

      Delete
    3. display : inline-block !important;

      Delete
  2. Did you find solution for this? I am looking for same

    ReplyDelete
    Replies
    1. https://www.salesforcecodecrack.com/2019/09/display-radio-buttons-group-in.html

      Delete
  3. How to save the selected value to salesforce Field?

    ReplyDelete
  4. I have two radio buttons, one label Yes with a string value attached to it and another label No with a string value attached. How can I display the value of the radio button selected?

    ReplyDelete
    Replies
    1. This is very similar to what I am implementing. You need to look at the options property in the .js file and rewrite the assignment (this.options) to fit your needs.

      Delete
    2. // @track
      options = [{
      label: 'Yes',
      value: someStringValue
      },
      {
      label: 'No',
      value: someStringValue
      }];

      Delete
  5. Is there an way to show hover text on each radio group(when mouse is hovered on each radio group text).

    ReplyDelete
  6. I want my field values which are in foreach to show as radio buttons help me please

    ReplyDelete
  7. Hi All,

    I have one requirement when both dates are same then show radio button.I am able to complete this but I am not able to use radio button value while creating record.As per my requiremnet I need to use these values in my record.

    Can anyone please help me to resolve this

    Thanks in advance

    ReplyDelete