Play Games

Search This Blog

Saturday, August 7, 2021

How to hide label of lightning combobox or drop down in lightning web component(LWC) - Salesforce Globe For You

 How to hide label of lightning combobox or drop down  in lightning web component(LWC)  - Salesforce Globe For You 

Solution: Use variant="label-hidden" or remove label="".if we remove label ,you can still find empty space for label.

hideLabelLightningInputLWC.html

<template>

    <lightning-card title="Hide Label of Combobox">

        Industry Drop Down with Label <br/><br/><br/>

        <template if:true={industryPicklist.data}>

        <lightning-combobox name="Industry"  value={Industry} label="Industry"

            options={industryPicklist.data.values}>

        </lightning-combobox>

        </template>

        Industry Drop Down without  Label <br/><br/><br/>

        <template if:true={industryPicklist.data}>

            <lightning-combobox name="Industry"  value={Industry} label="Industry"

                options={industryPicklist.data.values} variant="label-hidden">

            </lightning-combobox>

        </template>

        Industry Drop Down without  Label <br/><br/><br/>

        <template if:true={industryPicklist.data}>

            <lightning-combobox name="Industry"  value={Industry}

                options={industryPicklist.data.values} >

            </lightning-combobox>

        </template>

    </lightning-card>

</template>

hideLabelLightningInputLWC.js

import { api,track,wire,LightningElement } from 'lwc';

import { getObjectInfo } from 'lightning/uiObjectInfoApi';

import { getPicklistValues } from 'lightning/uiObjectInfoApi';

import ACCOUNT_OBJECT from '@salesforce/schema/Account';

import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class HideLabelLightningInputLWC extends LightningElement {

    @api industry;

    @track lstAccount = [];

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT }) accountMetaData;

    @wire(getPicklistValues,{

            recordTypeId: '$accountMetaData.data.defaultRecordTypeId', 

            fieldApiName: INDUSTRY_FIELD

        }

    ) industryPicklist;

}

hideLabelLightningInputLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output:



No comments:

Post a Comment