Visual Picker in Lightning Web Component Salesforce ☁️⚡️

Kapil October 09, 2021

 In this video you will learn how to create Visual Picker in Lightning Web Component.  We will use the Lightning Design System to create the UI for this.


Please check the reference links below : 

Official Documentation : https://www.lightningdesignsystem.com/components/visual-picker/#site-main-content

Wire list of Accounts : 
https://www.salesforcebolt.com/2021/06/wire-apex-with-property-and-functions-lwc.html

Create Custom Modal : 
https://www.salesforcebolt.com/2021/06/ep-25-custom-modal-popup-in-lwc-lwc.html

#VisualPicker #LWC #salesforce 

Please check complete code below : 

HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
  <template if:true={showModal}>
    <section
      role="dialog"
      tabindex="-1"
      aria-labelledby="modal-heading-01"
      aria-modal="true"
      aria-describedby="modal-content-id-1"
      class="slds-modal slds-fade-in-open"
    >
      <div class="slds-modal__container">
        <!-- Header Start -->
        <header class="slds-modal__header">
          <lightning-button-icon
            class="slds-modal__close"
            title="Close"
            icon-name="utility:close"
            icon-class="slds-button_icon-inverse"
            onclick={closeModal}
          ></lightning-button-icon>

          <h2 id="id-of-modalheader-h2" class="slds-text-heading_large">
            Select Accounts
          </h2>
          <p class="slds-var-m-top_x-small">Select data from the list</p>
        </header>
        <!-- Header End -->
        <div
          class="slds-modal__content slds-p-around_medium"
          id="modal-content-id-1"
        >
          <template if:true={showSpinner}>
            <lightning-spinner
              alternative-text="Loading"
              variant="brand"
              size="medium"
            >
            </lightning-spinner>
          </template>
          <fieldset class="slds-form-element">
            <div class="slds-form-element__control">
              <template for:each={accounts} for:item="acc">
                <div
                  key={acc.Id}
                  class="slds-visual-picker slds-visual-picker_medium"
                >
                  <input
                    type="checkbox"
                    onchange={handleCheck}
                    name={acc.Id}
                    id={acc.Id}
                    value={acc.Id}
                  ></input>

                  <label for={acc.Id}>
                    <span
                      class="
                        slds-visual-picker__figure slds-visual-picker__text
                        slds-align_absolute-center
                      "
                    >
                      <span>
                        <span class="slds-text-heading_large">{acc.Name}</span>
                        <span class="slds-text-title"></span>
                      </span>
                    </span>
                    <span class="slds-visual-picker__body">
                      <span class="slds-text-heading_small"
                        >Contact Number</span
                      >
                      <span class="slds-text-title">{acc.Phone}</span>
                    </span>
                    <span
                      class="slds-icon_container slds-visual-picker__text-check"
                    >
                      <lightning-icon
                        icon-name="utility:check"
                        size="xx-small"
                        variant="inverse"
                      ></lightning-icon>
                    </span>
                  </label>
                </div>
              </template>
            </div>
          </fieldset>
        </div>
        <footer class="slds-modal__footer">
          <template if:true={message}>
            <span class="slds-text-color_error">{message}</span>
          </template>
          <lightning-button
            variant="brand-outline"
            label="Cancel"
            onclick={closeModal}
            title="Cancel"
            class="slds-var-m-left_x-small"
          ></lightning-button>
          <lightning-button
            variant="brand"
            label="Next"
            onclick={applyActions}
            title="Next"
            class="slds-var-m-left_x-small"
          ></lightning-button>
        </footer>
      </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
  </template>
</template>


JS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { LightningElement, api, wire, track } from "lwc";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import getAccountList from "@salesforce/apex/AccountController.getAccList";

export default class VisualPicker extends LightningElement {
  @track loaded;
  @api selectedAccounts = [];
  @api selectedAccsString;
  message;
  accounts;
  showModal = true;

  @api show() {
    this.showModal = true;
  }
  @wire(getAccountList)
  wiredAccounts({ error, data }) {
    if (data) {
      this.accounts = data;
      this.error = undefined;
    } else if (error) {
      this.error = error;
      this.accounts = undefined;
    }
  }

  handleCheck(event) {
    console.log("###Current Target : " + event.currentTarget.name);
  }

  closeModal() {
    this.showModal = false;
  }
}


Output


Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)
Tags:

Post a Comment

1 Comments