Display Radio Buttons Group in Horizontal view in Lightning Web Component(lwc)

This post explains how to display radio buttons group in Horizontal view in Lightning Web Components(lwc)

radioGroupInHorizontal.html

<template>
    <lightning-card title="Radio Buttons Group Horizontal View in Lightning Web Component"><br/>
        <div style="margin-left:3%;">
            <template for:each={options} for:item="item">
                <fieldset key={item.value} style="display: block; float: left;">
                    <div class="slds-form-element__control">
                        <span class="slds-radio">
                            <input name="radiogroup" id={item.value} type="radio" value={item.value} onchange={handleSelected}/>
                            <label class="slds-radio__label" for={item.value}>
                                <span class="slds-radio_faux"></span>
                                <span class="slds-form-element__label">{item.label}</span>
                            </label>
                        </span>
                    </div>
                </fieldset>
            </template><br/><br/>

            <div if:true={selectedValue}>
                Selected Vlaue: <b>{selectedValue}</b>
            </div>
        </div>

    </lightning-card>
</template>

radioGroupInHorizontal.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 Rating_FIELD from '@salesforce/schema/Account.Rating';

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

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

    // Getting Account Rating Picklist values using wire service
    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Rating_FIELD})
    ratingPicklistValues({error, data}) {
        if(data) {
            window.console.log('result ===> '+JSON.stringify(data.values));
            this.options = data.values;
        }
        else if(error) {
            window.console.log('error ===> '+JSON.stringify(error));
        }
    }

    // handle the selected value
    handleSelected(event) {
       window.console.log('selected value ===> '+event.target.value);
       this.selectedValue = event.target.value;
    }

}

RadioGroupInHorizontal.js-meta.xml

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

Output

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

How to implement Progress Bar in Visualforce Page

This post explains how to implement Progress bar on the Visualforce page using SLDS class.

This is Demo only you can extend this functionality based on your requirement.

Demo

Visualforce page

<apex:page controller="ProgressBarController" >
    <apex:slds />
    <apex:form id="frm">
        <apex:actionPoller action="{!checkStatus}" enabled="{!bProcess}" interval="5" reRender="frm" />
        
        <div class="slds-grid slds-gutters" style="margin-left:1%;">
            <div class="slds-col slds-size_1-of-3">
                <h1 style=" font-weight: bold;">
                    Progress Bar Demo in Visualforce Page
                </h1>
                <div style="display: block; margin-top:5%;" class="slds-progress-bar slds-progress-bar_circular" aria-valuemin="0" aria-valuemax="100"
                     aria-valuenow="{!deProgressBarWidth}" role="progressbar">
                    <span class="slds-progress-bar__value slds-progress-bar__value_success" style="width: {!deProgressBarWidth}%;">
                        <span class="slds-assistive-text">Progress: {!deProgressBarWidth}%</span>
                    </span>
                    <div class="slds-text-align--center slds-text-title" style="color:forestgreen;">
                        {!strStatus}
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>

Apex Class

public class ProgressBarController {
    
    public Decimal deProgressBarWidth {get;set;}
    public Integer iCount {get;set;}
    public String strStatus {get;set;}
    public Boolean bProcess {get;set;}
    
    public ProgressBarController() {
        deProgressBarWidth = 0;
        strStatus = 'In Progress...';
        bProcess = true;
        iCount = 0;
    }
    
    public PageReference checkStatus() 
        // Caluclating Percentage value
        deProgressBarWidth = (iCount != 0 ? (Decimal.valueOf(iCount) > 100 ? 100 : Decimal.valueOf(iCount))/100 * 100 : 0);
        if(iCount >= 100) {
            strStatus = 'Completed';
            bProcess = false;
        }
        else {
            strStatus = 'Processing => ' + iCount + '/100';
        }  
        
        iCount += 45;
        return null;
    }
}

Output