Salesforce LWC: Contact Card with Flip Functionality

By -

In this post we will learn how to use create contact cards with 180 degree flip functionality. Let us see the demo first to understand the scenario better: 



User Scenario:

We need an input lookup field where user can select any Account and once user select any account. It display all related Contact in Contact card format with Flip Functionality.

Implementation:

To implement this first we need lookup field where user can select any account. So for that we can use Lightning Data Service. By using lightning-edit-form we can show Account lookup.
Once user will select Account, then using wire service we can get all related Contacts.
Below is the HTML code which we need:

 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
<template>
    <div style="background-color: white;" class="slds-p-around_medium">
        <lightning-tile label="Contact Directory" type="media">
            <lightning-icon slot="media" icon-name="standard:groups"></lightning-icon>
            <p class="slds-truncate" title="contacts">Contact related to Selected Accounts</p>
        </lightning-tile>
        <div class="slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
            <lightning-layout multiple-rows>
                <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
                    <lightning-record-edit-form record-id={recordId} object-api-name="Contact">
                        <lightning-input-field field-name="AccountId" variant="label-hidden" onchange={handleAccountId}></lightning-input-field>
                    </lightning-record-edit-form>
                </lightning-layout-item>
            </lightning-layout>
        </div>
        <template if:true={contactData.data}>
            <div class="slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
                <lightning-layout multiple-rows>
                    <template for:each={contactData.data} for:item="item" for:index="index">
                        <lightning-layout-item key={item.Id} size="12" small-device-size="6" medium-device-size="4" large-device-size="3" padding="around-small">
                            <div class="flip-card">
                                <div  class="flip-card-inner" key={item.Id} data-row-index={item.Id} data-id={item.Id} onmouseover={addClass} onmouseout={removeClass}>
                                    <div class="flip-card-front">
                                        <img src="https://www.w3schools.com/w3css/img_avatar3.png" alt="Avatar" style="width:200px;height:200px;">
                                        <div class="slds-text-color_destructive">{item.Name}</div>
                                    </div>
                                    <div class="flip-card-back">
                                       <p class="slds-p-around_x-small"><text class="slds-text-title_caps" style="text-align: center;">{item.Name}</text></p>
                                        <p class="slds-p-around_x-small">Title: {item.Title}</p>
                                        <p class="slds-p-around_x-small">Email: {item.Email}</p>
                                        <p class="slds-p-around_x-small">Department: {item.Department}</p>
                                    </div>
                                </div>
                            </div> 
                        </lightning-layout-item>
                    </template>
                </lightning-layout>
            </div>
        </template>
    </div>
</template>

Below is the Java Script Logic:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { LightningElement, api, wire } from 'lwc';
import getContactData from '@salesforce/apex/ContactDirectory.getContactRecords';
export default class ContactCardLWC extends LightningElement {
    @api recordId;
    @wire(getContactData, {accountId : '$recordId'}) contactData;

    handleAccountId(event){
        let accountId = event.detail.value[0];
        this.recordId = accountId;
    }

    addClass(event){
        let index = event.currentTarget.dataset.rowIndex;
        let flipElement = this.template.querySelector('[data-id="' + index + '"]');
        flipElement.classList.add('class1');
    }

    removeClass(event){
        let index = event.currentTarget.dataset.rowIndex;
        let flipElement = this.template.querySelector('[data-id="' + index + '"]');
        flipElement.classList.remove('class1');
    }
}

In above JS code we have used one wire service which was already explained. Below is the description of other 3 methods:
  1. handleAccountId: once user will select any account then this method will handle the change in Account Id.
  2. addClass: This method will add Flip CSS on the card on which cursor is present.
  3. removeClass: This method will remove Flip CSS on the card on which cursor was present.

And below is the CSS for Flip Functionality:

 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
.mainstyle {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
}
.flip-card {
    background-color: transparent;
    width: 200px;
    height: 200px;
    perspective: 1000px;
}
  
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
  
.class1 {
    transform: rotateY(180deg);
}
  
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
  
.flip-card-front {
    background-color: #bbb;
    color: black;
}
  
.flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
}

And below is the Apex Class which will give the related Contact records:

1
2
3
4
5
6
public with sharing class ContactDirectory {
    @AuraEnabled(cacheable = true)
    public static List<Contact> getContactRecords(Id accountId){
        return [Select Id, Name, Title, Email, Department, Account.Name from Contact where AccountId = :accountId];
    }
}

Code Reference:

https://github.com/flighttoSalesforce/contact-card

References:

Other Useful blogs:
  • https://www.sfprompt.com/
  • https://manish-porwal.blogspot.com/2019/11/draw-chart-in-lwc-using-chartjs.html
Location: London, UK

Comments

Post a Comment

Followers

Popular posts from this blog

Salesforce LWC: Multi-Record Creation using Lightning Web Component

By -
Image
In this blog we will learn about one very common business use case. Most of the time we get requirement to create a table kind of view from which we can see most of the record's information and also we can manage creating updating and deleting record from same view.  So in this blog we will see how to create such kind of UI using Lightning Web Component. We will take one use case and will implement the same. Use Case:  There will be one input field for Account selection. Once user select any account then user can see all related Contacts. Also user should have capability to add multiple new contacts for selected Account and user can delete existing Contacts. Solutions: To implement above solution first we need one input field where user can select Account Name. For this we can utilize Lightning Data Service. Once User will select Account we can pass the Account Id to Apex Class for getting related Contacts and show it on UI using HTML table. Lets see some code for the UI: 1 2 3
Read more

Salesforce LWC: Basic Drag and Drop Functionality

By -
Image
Recently I attended Salesforce VirtualDearmin session and I found this session very interesting and I thought to share this with everyone of you. For more detail you can refer below link on Drag and Drop Functionality: https://forcementor.github.io/lwc_dnd_20/#/ In this blog we will see about Drag and Drop functionality in Salesforce using Lightning Web Component. To implement drag and drop functionality there are few standard HTML events which we will use to implement. Lets see first what we are going to achieve in this blog with a small video- Now we have clear understanding what we are going to achieve. Let us go to the code. First we will create very basic UI with 3 layout-item. One for each New Task, In Progress Task and Completed Task. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <lightning -layout vertical-align= "stretch" multiple-rows= "true" class= "x-large" > <lightning -layout-item
Read more

Salesforce Lightning Web Component: Dynamic Column Selection in Lightning Datatable

By -
Image
Today in this post we will see how to create Lightning Data Table where we can dynamically select the columns of lightning data table. Below are the properties of this Lightning Data Table: User can select any column for Lightning Data Table User can select only those fields on which user has FLS. User can re-arrange the order of Columns in Data Table. So in UI we will show one Dual List box where user can select any field for table. Once user will select the fields and click on save then selected fields will be visible on UI: 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 <template> <lightning -card title= "Dynamic Lead Table" > <lightning -button label= "Modify Columns" slot= "actions" onclick= {showColumnSelectionWindow} > < /lightning-button> <p class= "slds-p-horizontal_small" > <lightning -
Read more