Scribd
Upload
6 views9 pages

Inbound Call Creation Modal Template

The document outlines a template for creating an inbound call modal using Salesforce Lightning components. It includes various input fields for customer details, call type, issue type, and dynamic fields that adapt based on user input. Additionally, it features a map for location information and buttons for loading company locations.

Uploaded by

jaishivshambo1999
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views9 pages

Inbound Call Creation Modal Template

The document outlines a template for creating an inbound call modal using Salesforce Lightning components. It includes various input fields for customer details, call type, issue type, and dynamic fields that adapt based on user input. Additionally, it features a map for location information and buttons for loading company locations.

Uploaded by

jaishivshambo1999
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<template>

test
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-
heading-01"
class="slds-modal slds-fade-in-open slds-modal_large">
<div class="slds-modal__container">
<div class="slds-clearfix">
<div class="slds-float_right" >
<lightning-button-icon icon-name="utility:close" alternative-
text="Cancel and close" variant="border-inverse"
onclick={hideSCADAModel}></lightning-button-icon>
</div>
</div>
<div class="slds-modal__header">
<h1 id="modal-heading-01" class="slds-modal__title slds-
hyphenate">Create Inbound Call</h1>
</div>
<div class="slds-modal__content slds-p-horizontal_medium" id="modal-
content-id-1">
<lightning-spinner alternative-text="Loading" size="small"
if:true={isLoading}></lightning-spinner>
<article class="slds-card">
<div class="slds-card__body slds-card__body_inner">
<div class="FormHeading slds-text-heading_small" >
<label for="label" class="container">INBOUND
DETAILS<span class="slds-float_right"><abbr class="slds-required">*</abbr> =
Required</span></label>
</div>
<div class="slds-grid slds-wrap">

<div class="slds-col slds-large-size_1-of-2 slds-


size_1-of-1 slds-p-right_xx-large">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-1">
<c-custom-lookup-lwc icon-
name="standard:account" s-object-api-name="account" from-s-c-a-d-a="true"
label="Customer"
onlookupupdate={handleAccountChange} data-field="Name"
placeholder="Search Customer
here..."></c-custom-lookup-lwc>
</div>
<div class="slds-col slds-size_1-of-1">
<lightning-combobox value={callType}
name="callType" label="Call Type" required options={callTypeOptions}
onchange={handleCallTypeChange} disabled={callTypeDisabled}></lightning-combobox>
</div>
<div class="slds-col slds-size_1-of-1">
<lightning-combobox value={issueType}
name="issueType" label="Issue Type" required options={issueTypeOptions}
onchange={handleIssueTypeChange} disabled={issueTypeDisabled}></lightning-combobox>
</div>
<div class="slds-col slds-size_1-of-1">
<template if:true={hasBothName}>
<div class="slds-grid slds-wrap">
<template for:each={namefields}
for:item="field" for:index="index">
<div class="slds-col slds-
size_1-of-2 slds-p-horizontal_xxx-small" key={[Link]}
if:true={[Link]}>
<div
if:true={[Link]}>
<lightning-input
type="text" name={[Link]} data-name={[Link]} data-
index={index} label={[Link]} onchange={handleNameValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
<div
if:true={[Link]}>
<lightning-combobox
options={[Link]} name={[Link]} data-name={[Link]}
data-index={index} label={[Link]} onchange={handleNameValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-combobox>
</div>
<div
if:true={[Link]}>
<lightning-dual-listbox
name={[Link]} data-name={[Link]} label={[Link]}
data-index={index} source-label="Available" selected-label="Selected"
options={[Link]} onchange={handleNameValuesChange}
value={[Link]}></lightning-dual-listbox>
</div>
<div
if:true={[Link]}>
<lightning-input
type="text" name={[Link]} data-name={[Link]}
label={[Link]} data-index={index} onchange={handleNameValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
</div>
</template>
</div>
</template>
</div>
<div class="slds-col slds-size_1-of-1"
if:false={hasBothContacts}>
<template for:each={namefields}
for:item="field" for:index="index">
<div key={[Link]}
if:true={[Link]} >
<div if:true={[Link]}>
<lightning-input type="text"
name={[Link]} data-name={[Link]} label={[Link]}
data-index={index} onchange={handleNameValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-combobox
options={[Link]} name={[Link]} data-name={[Link]}
data-index={index} label={[Link]} onchange={handleNameValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-combobox>
</div>
<div
if:true={[Link]}>
<lightning-dual-listbox
name={[Link]} data-name={[Link]} label={[Link]}
data-index={index} source-label="Available" selected-label="Selected"
options={[Link]} onchange={handleNameValuesChange}
value={[Link]}></lightning-dual-listbox>
</div>
<div if:true={[Link]}>
<lightning-input type="text"
name={[Link]} data-name={[Link]} data-index={index}
label={[Link]} onchange={handleNameValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
</div>
</template>
</div>
<div class="slds-col slds-size_1-of-1">
<template if:true={hasBothContacts}>
<div class="slds-grid slds-wrap">
<template for:each={contactfields}
for:item="field">
<div class="slds-col slds-
size_1-of-2 slds-p-horizontal_xxx-small" key={[Link]}
if:true={[Link]}>
<div
if:true={[Link]}>
<lightning-input
type="text" name={[Link]} data-name={[Link]}
label={[Link]} onchange={handleContactValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
<div
if:true={[Link]}>
<lightning-combobox
options={[Link]} name={[Link]} data-name={[Link]}
label={[Link]} onchange={handleContactValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-combobox>
</div>
<div
if:true={[Link]}>
<lightning-dual-listbox
name={[Link]} data-name={[Link]} label={[Link]}
source-label="Available" selected-label="Selected" options={[Link]}
onchange={handleContactValuesChange} value={[Link]}></lightning-
dual-listbox>
</div>
<div
if:true={[Link]}>
<lightning-input
type="text" name={[Link]} data-name={[Link]}
label={[Link]} onchange={handleContactValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
</div>
</template>
</div>
</template>
</div>
<div class="slds-col slds-size_1-of-1"
if:false={hasBothContacts}>
<template for:each={contactfields}
for:item="field">
<div key={[Link]}
if:true={[Link]}>
<div if:true={[Link]}>
<lightning-input type="text"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleContactValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-combobox
options={[Link]} name={[Link]} data-name={[Link]}
label={[Link]} onchange={handleContactValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-combobox>
</div>
<div
if:true={[Link]}>
<lightning-dual-listbox
name={[Link]} data-name={[Link]} label={[Link]}
source-label="Available" selected-label="Selected" options={[Link]}
onchange={handleContactValuesChange} value={[Link]}></lightning-
dual-listbox>
</div>
<div if:true={[Link]}>
<lightning-input type="text"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleContactValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
</div>
</template>
</div>
<template for:each={inboundDynamicFields}
for:item="field">
<div class="slds-col slds-size_1-of-1"
key={[Link]} if:true={[Link]}>
<div if:true={[Link]}>
<lightning-input type="date"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInboundValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input type="datetime"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInboundValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input type="email"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInboundValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input type="text"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInboundValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input type="number"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInboundValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input class="slds-p-
top_medium" type="checkbox" name={[Link]} data-
name={[Link]} label={[Link]}
onchange={handleInboundValuesChange} checked={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
<div if:true={[Link]} >
<lightning-record-picker
data-name={[Link]}

placeholder="Search here..."
label={[Link]}
object-api-
name={[Link]}

onchange={handleInboundValuesChange}

required={[Link]}
></lightning-record-picker>
</div>
<div if:true={[Link]}>
<lightning-combobox
options={[Link]} name={[Link]} data-name={[Link]}
label={[Link]} onchange={handleInboundValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-combobox>
</div>
<div if:true={[Link]}>
<lightning-dual-listbox
name={[Link]} data-name={[Link]} label={[Link]}
source-label="Available" selected-label="Selected" options={[Link]}
onchange={handleInboundValuesChange} value={[Link]}></lightning-
dual-listbox>
</div>
<div if:true={[Link]}>
<lightning-input type="text"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInboundValuesChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-textarea
name={[Link]} data-name={[Link]} label={[Link]}
style="line-height: 2.5;" onchange={handleInboundValuesChange}
value={[Link]} disabled={[Link]}
required={[Link]}></lightning-textarea>
</div>
</div>
</template>

</div>
</div>

<div class="slds-col slds-large-size_1-of-2 slds-


size_1-of-1 slds-p-left_xx-large slds-p-top_small"
if:true={[Link]}>
<div >
<lightning-map if:true={showMap} map-
markers={mapMarkers} zoom-level={zoomLevel} markers-title="Show Locations"
style="height: 285px; max-height: 300px"></lightning-map>
</div>
<div class="slds-grid slds-wrap"
if:true={[Link]}>
<div class="slds-col slds-size_1-of-2">
<div class="slds-form-element slds-p-
top_xx-small" >
<label for="label"><span style="color:
red;" if:true={[Link]}>*</span> Location</label>
<div class="slds-form-
element__control">
<iframe src={vfPageUrl}
width="100%" height="150px" frameborder="0"
if:true={[Link]}></iframe>
</div>
</div>
</div>
<div class="slds-col slds-size_1-of-2"
style="padding-top: 20px;" if:true={[Link]}>
<lightning-button label="Asset Loc" data-
value="POI" onclick={loadCompanyLocations}
disabled={[Link]}></lightning-button>
<lightning-button label="Show Map" data-
value="ShowMap" onclick={loadCompanyLocations} class="slds-p-left_medium"
disabled={[Link]}></lightning-button>
</div>
</div>
</div>
</div>
<br />
<div class="FormHeading slds-text-heading_small slds-p-
top_xxx-small" >
<label for="label" class="container">OUTBOUND
DETAILS</label>
</div>
<div class="slds-form">
<lightning-record-edit-form object-api-name="Case">
<div class="slds-grid slds-wrap">
<template for:each={outboundDynamicFields}
for:item="field">
<div key={[Link]} class="slds-
col slds-large-size_1-of-2 slds-size_1-of-1 slds-p-horizontal_medium"
if:true={[Link]}>
<div if:true={[Link]}>
<lightning-input type="date"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInputChange} value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input type="datetime"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInputChange} value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input type="email"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInputChange} value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input type="text"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInputChange} value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input type="number"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInputChange} value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
<div if:true={[Link]}>
<lightning-input class="slds-p-
top_medium" type="checkbox" name={[Link]} data-
name={[Link]} label={[Link]} onchange={handleInputChange}
checked={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
<div if:true={[Link]} >
<lightning-record-picker
data-name={[Link]}

placeholder="Search here..."
label={[Link]}
object-api-
name={[Link]}
onchange={handleInputChange}

required={[Link]}
></lightning-record-picker>
</div>
<div if:true={[Link]}>
<lightning-combobox
options={[Link]} name={[Link]} data-name={[Link]}
label={[Link]} onchange={handleInputChange} value={[Link]}
disabled={[Link]} required={[Link]}></lightning-
combobox>
</div>
<div if:true={[Link]}>
<lightning-dual-listbox
name={[Link]} data-name={[Link]} label={[Link]}
source-label="Available" selected-label="Selected" options={[Link]}
onchange={handleInputChange} value={[Link]}></lightning-dual-
listbox>
</div>
<div if:true={[Link]}>
<lightning-input type="text"
name={[Link]} data-name={[Link]} label={[Link]}
onchange={handleInputChange} value={[Link]} disabled={[Link]}
required={[Link]}></lightning-input>
</div>
</div>
</template>

</div>
</lightning-record-edit-form>
</div>
<br/>
<div class="FormHeading slds-text-heading_small" >
<label for="label" class="container">NOTES</label>
</div>
<div class="slds-p-horizontal_small slds-p-bottom_x-small">
<lightning-textarea name="notes" value={notes} data-
value="Notes" onchange={handleNotesChange}></lightning-textarea>
</div>
</div>
</article>
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button_neutral" aria-label="Cancel
and close" onclick={hideSCADAModel}>Cancel</button>
<button class="slds-button slds-button_brand"
onclick={handleSave}>Save</button>
</div>

<template if:true={showRecordDetails}>
<div class="slds-modal slds-fade-in-open slds-backdrop">
<div class="slds-modal__container" style="width: 50%;">
<!------HEADER Section-->
<div class="slds-modal__header">
<lightning-button-icon icon-name="utility:close"
alternative-text="Close this window" size="large"
variant="bare-inverse" onclick={closeModal}
class="slds-modal__close">
</lightning-button-icon>
<h2>Asset Locations</h2>
</div>
<!------Body Section-->
<div class="slds-modal__content slds-p-around_medium">
<template if:true={customerdata}>
<div class="custom-container">
<lightning-input class="custom-search-input"
type="text" label="Search" value={searchCriteria}
onchange={handleSearchChange}></lightning-input>
</div>
<div class="custom-spacing"></div>
<lightning-datatable data={customerdata}
columns={columns} key-field="Id" onrowselection={handleRowSelection}></lightning-
datatable>
</template>
</div>
<!------Footer Section-->
<div class="slds-modal__footer">
<lightning-button label="Select" variant="brand"
onclick={handleAssetLocationSelection}>
</lightning-button>
</div>
</div>
</div>
</template>

</div>
</section>
<div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
</template>

You might also like