0

I'm trying to create a simple LWC which renders five horizonal radio buttons (and potentially a sixth for N/A based on an input parameter.) They render fine but are unresponsive to clicks. What am I doing wrong?

JS

import { LightningElement, api, track } from 'lwc';
import {FlowAttributeChangeEvent} from 'lightning/flowSupport';

export default class LikertRadioButtons extends LightningElement {

@api selectedValue;
@api includeNA;
@api fieldName;
@api labelLow;
@api labelHigh;
@track selectedValue;
@track includeNA;
@track fieldName;
@track labelLow;

connectedCallback(){
    
    if(this.selectedValue){
        var rad_ele = this.template.querySelectorAll(fieldName);
        for (var i = 0; i < rad_ele.length; ++i) {
            if(rad_ele[i].value == this.selectedValue){rad_ele[i].checked = true;}
        }
    }
}

// handle the selected value

handleSelected(e) {
    window.console.log('selected value ===> '+e.target.value);
    this.selectedValue = e.target.value;
    this.dispatchEvent(new FlowAttributeChangeEvent('selectedValue',selectedValue));
 }

}

HTML

<template>
    <div class="slds-form-element__control">
        <span class="slds-radio">
            <input name={fieldName} id="radio1" type="radio" value="1" onchange={handleSelected} />
            <label class="slds-radio__label" for="1">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">1-{labelLow}</span>
            </label>
            
            <input name={fieldName} id="radio2" type="radio" value="2" onchange={handleSelected} />
            <label class="slds-radio__label" for="2">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">2</span>                                
            </label>
            
            <input name={fieldName}  id="radio3" type="radio" value="3" onchange={handleSelected} />
            <label class="slds-radio__label" for="3">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">3</span>
            </label>
            
            <input name={fieldName} id="radio4" type="radio" value="4" onchange={handleSelected} />
            <label class="slds-radio__label" for="4">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">4</span>
            </label>
            
            <input name={fieldName} id="radio5" type="radio" value="5" onchange={handleSelected} />
            <label class="slds-radio__label" for="5">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">5-{labelHigh}</span>
            </label>
        <template  lwc:if={includeNA}>
            &nbsp;| &nbsp;
            <input name={fieldName} id="radio0" type="radio" value="0" onchange={handleSelected} />
            <label class="slds-radio__label" for="0">
                <span class="slds-radio_faux"></span>
                <span class="slds-form-element__label">N/A</span>
            </label>
        </template>   
        </span>
    </div>

1 Answer 1

0

There are some fundamental issues with the code but let's not get into that, to quick fix the existing code,

  1. I put some value in the fieldName variable in the js file:

    @track fieldName='a';

  2. in the HTML I put id attribute same as the value so HTML would look like this:

         <input name={fieldName} id="1" type="radio" value="1" onchange={handleSelected} />
         <label class="slds-radio__label" for="1">
             <span class="slds-radio_faux"></span>
             <span class="slds-form-element__label">1-{labelLow}</span>
         </label>
    
         <input name={fieldName} id="2" type="radio" value="2" onchange={handleSelected} />
         <label class="slds-radio__label" for="2">
             <span class="slds-radio_faux"></span>
             <span class="slds-form-element__label">2</span>                                
         </label>
    
         <input name={fieldName}  id="3" type="radio" value="3" onchange={handleSelected} />
         <label class="slds-radio__label" for="3">
             <span class="slds-radio_faux"></span>
             <span class="slds-form-element__label">3</span>
         </label>
    
         <input name={fieldName} id="4" type="radio" value="4" onchange={handleSelected} />
         <label class="slds-radio__label" for="4">
             <span class="slds-radio_faux"></span>
             <span class="slds-form-element__label">4</span>
         </label>
    
         <input name={fieldName} id="5" type="radio" value="5" onchange={handleSelected} />
         <label class="slds-radio__label" for="5">
             <span class="slds-radio_faux"></span>
             <span class="slds-form-element__label">5-{labelHigh}</span>
         </label>
         <template  lwc:if={includeNA}>
             &nbsp;| &nbsp;
             <input name={fieldName} id="0" type="radio" value="0" onchange={handleSelected} />
             <label class="slds-radio__label" for="0">
                 <span class="slds-radio_faux"></span>
                 <span class="slds-form-element__label">N/A</span>
             </label>
         </template>
    
     </span>
    
2
  • It works at first time of asking but when I go back from the next screen, it gives me an error: Something went wrong with the "Goal1Radios" screen component on the ".Engagement Report Screen Flow" flow. Contact your Salesforce admin about this error. fieldName is not defined Oct 3, 2023 at 14:27
  • That problem was solved by using this.fieldName in the Javascript, but the button does not display a value when first visiting the screen (if the field has a value to begin with) not when returning to the screen. Oct 3, 2023 at 14:50

You must log in to answer this question.

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