Scribd
Upload
25K views14 pages

LWC 1

This document contains an HTML template for displaying and editing account, assessment, case, and touchpoint records. The template conditionally displays data in view-only or edit modes using different Lightning components like record view form, record edit form, and input fields. Users can click edit buttons to switch to edit mode for each record section.

Uploaded by

Dinesh S
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
25K views14 pages

LWC 1

This document contains an HTML template for displaying and editing account, assessment, case, and touchpoint records. The template conditionally displays data in view-only or edit modes using different Lightning components like record view form, record edit form, and input fields. Users can click edit buttons to switch to edit mode for each record section.

Uploaded by

Dinesh S
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
You are on page 1/ 14

<<<-----------------------------------------

HTML---------------------------------------------->>>

<template>
<lightning-card>

<template if:false={isShow}>
<!--<lightning-button
class="slds-m-right_xxx-small slds-m-top_none slds-m-bottom_xxx-small"
slot="actions"
label="Edit"
name="click1"
onclick={handleClick}
variant="brand"></lightning-button> -->

<lightning-record-view-form>

<template for:each={Accounts} for:item="acc">


<div key={acc}>

<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
<div class="slds-m-left_xx-small">
<div class="slds-m-left_medium">
Name
<br/>
{acc.Name}
<lightning-button-icon
icon-name="utility:edit" alternative-text="update value"
variant="bare" size="medium" onclick={handleClick} ></lightning-button-icon>

<br/><br/>
Industry
<br/>
{acc.Industry}
<lightning-button-icon icon-name="utility:edit" alternative-
text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>
</div>
<br/>
</div>
</div>
<div class="slds-col slds-size_1-of-2">
AnnualRevenue
<br/>
{acc.AnnualRevenue}
<lightning-button-icon icon-name="utility:edit" alternative-
text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>

<br/><br/>
Website
<br/>
{acc.Website}
<lightning-button-icon icon-name="utility:edit" alternative-
text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>
</div>
</div>
</div>

</template>

<b>&nbsp;&nbsp; Assessments Details </b>


<template for:each={Assesments} for:item="asm">
<div key={asm}>

<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
<div class="slds-m-left_xx-small">
<div class="slds-m-left_medium">
Name
<br/>
{asm.Name}
<lightning-button-icon
icon-name="utility:edit" alternative-text="update value" variant="bare"
size="medium" onclick={handleClick} ></lightning-button-icon>

<br/><br/>
Daily Blood sugar range
<br/>
{asm.Daily_Blood_sugar_range__c}
<lightning-button-icon icon-name="utility:edit" alternative-text="update
value" variant="bare" size="medium" onclick={handleClick} ></lightning-button-icon>
</div>
<br/>
</div>
</div>
<div class="slds-col slds-size_1-of-2">
Daily weights
<br/>
{asm.Daily_weights__c}
<lightning-button-icon icon-name="utility:edit" alternative-text="update
value" variant="bare" size="medium" onclick={handleClick} ></lightning-button-icon>

<br/><br/>
Gender
<br/>
{asm.Gender__c}
<lightning-button-icon icon-name="utility:edit" alternative-text="update
value" variant="bare" size="medium" onclick={handleClick} ></lightning-button-icon>
</div>
</div>
</div>

</template>

<b>&nbsp;&nbsp;Case Assessment Details</b>


<template for:each={CaseAssesment} for:item="cas">
<div key={cas}>

<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
<div class="slds-m-left_xx-small">
<div class="slds-m-left_medium">
Name
<br/>
{cas.Name}
<lightning-button-icon icon-name="utility:edit" alternative-text="update
value" variant="bare" size="medium" onclick={handleClick} ></lightning-button-icon>

<br/><br/>
Patient Status
<br/>
{cas.Patient_Status__c}
<lightning-button-icon class="float-right" icon-name="utility:edit"
alternative-text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>
</div>
<br/>
</div>
</div>
<div class="slds-col slds-size_1-of-2">
Clinic Contact Name
<br/>
{cas.Clinic_Contact_Name__c }
<lightning-button-icon class="float-right" icon-name="utility:edit"
alternative-text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>

<br/><br/>
Contact Number
<br/>
{cas.Contact_Number__c}
<lightning-button-icon class="float-right" icon-name="utility:edit"
alternative-text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>

</div>
</div>
</div>

</template>

<b>&nbsp;&nbsp;Patient TouchPoint Details</b>


<template for:each={PatientTouchPoint} for:item="pt">
<div key={pt}>

<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">
<div class="slds-m-left_xx-small">
<div class="slds-m-left_medium">

Name
<br/>
{pt.Name}
<lightning-button-icon class="float-right" icon-name="utility:edit"
alternative-text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>

<br/><br/>
Source System
<br/>
{pt.Source_System__c}
<lightning-button-icon class="float-right" icon-name="utility:edit"
alternative-text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>

<br/>
</div></div>
</div>
<div class="slds-col slds-size_1-of-2">
Subject
<br/>
{pt.Subject__c}
<lightning-button-icon class="float-right" icon-name="utility:edit"
alternative-text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>

<br/><br/>
Service
<br/>
{pt.Service__c}
<lightning-button-icon class="float-right" icon-name="utility:edit"
alternative-text="update value" variant="bare" size="medium" onclick={handleClick}
></lightning-button-icon>

<br/>
</div>
</div>
</div>

</template>

</lightning-record-view-form>
</template>

<template if:true={isShow}>

<lightning-record-edit-form
object-api-name={objectApiName}
record-id={recordId}>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">

<lightning-input-field name="Namefields" field-name={nameField}


onchange={AccountValues}> </lightning-input-field>

<lightning-input-field name="IndustryField" field-name={Industry}


onchange={AccountValues}></lightning-input-field>

</div>
<div class="slds-col slds-size_1-of-2">

<lightning-input-field name="AnnualrevenueField" field-


name={AnnualRevenue} onchange={AccountValues}></lightning-input-field>

<lightning-input-field name="WebsiteField" field-name={Website}


onchange={AccountValues}></lightning-input-field>
</div>
</div>
</lightning-record-edit-form>
Assessments Details
<lightning-record-edit-form object-api-name="Assesment__c" record-
id={asmrecid}>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">

<lightning-input-field name="Name" field-name={nameasm}


onchange={AccountValues}></lightning-input-field>

<lightning-input-field name="BloodSugarField" field-name={dailybsr}


onchange={AccountValues}></lightning-input-field>

</div>
<div class="slds-col slds-size_1-of-2">

<lightning-input-field name="DailyWeightsField" field-name={dailywet}


onchange={AccountValues}></lightning-input-field>

<lightning-input-field name="GenderField" field-name={Gender}


onchange={AccountValues}></lightning-input-field>
</div>
</div>
</lightning-record-edit-form>

CaseAssessments Details
<lightning-record-edit-form object-api-name="Case_Assessment__c" record-
id={casmrecid}>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">

<lightning-input-field field-name={casmName}
onchange={AccountValues}></lightning-input-field>

<lightning-input-field name="PatientStatusField" field-name={patient}


onchange={AccountValues}></lightning-input-field>

</div>
<div class="slds-col slds-size_1-of-2">

<lightning-input-field name="ContactField" field-name={con}


onchange={AccountValues}></lightning-input-field>

<lightning-input-field name="ClinicContactField" field-name={ccon}


onchange={AccountValues}></lightning-input-field>
</div>
</div>
</lightning-record-edit-form>

Patient Touchpoint Details


<lightning-record-edit-form object-api-name="Patient_Touchpoints__c" record-
id={ptrecid}>
<div class="slds-grid">
<div class="slds-col slds-size_1-of-2">

<lightning-input-field name="PatientNumber" field-name={ptn}


onchange={AccountValues}></lightning-input-field>
<lightning-input-field name="ServiceField" field-name={ser}
onchange={AccountValues}></lightning-input-field>
</div>
<div class="slds-col slds-size_1-of-2">

<lightning-input-field name="SourceField" field-name={src}


onchange={AccountValues}></lightning-input-field>

<lightning-input-field name="SubjectField" field-name={sub}


onchange={AccountValues}></lightning-input-field>

</div>
</div>

<br/><br/><br/>
<div class="flex-parent jc-center">
<lightning-button
variant="brand"
label="Cancel"
onclick={handleCancel}> </lightning-button>

&nbsp;&nbsp;&nbsp;

<lightning-button
variant="brand"
label="Save"
onclick={handleSave}></lightning-button>

</div>
</lightning-record-edit-form>
</template>

</lightning-card>
</template>

<<<----------------------------------
JS--------------------------------------------------------->>>

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

import getAccountrec from '@salesforce/apex/AccountRec.getAccountrec';


import getAssessments from '@salesforce/apex/customObi.getAssessments';
import getCaseAssessment from '@salesforce/apex/caseAcc.getCaseAssessment';
import getpatientTouchPoint from
'@salesforce/apex/patientAcc.getpatientTouchPoint';
import getAccEdit from '@salesforce/apex/AccountRec.getAccEdit';

// Edit Form
import Name_FIELD from '@salesforce/schema/Account.Name';
import Industry_FIELD from '@salesforce/schema/Account.Industry';
import AnnualRevenue_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import Website_FIELD from '@salesforce/schema/Account.Website';

import asmName_FIELD from '@salesforce/schema/Assesment__c.Name';


import Daily_Blood_sugar_range__c_FIELD from
'@salesforce/schema/Assesment__c.Daily_Blood_sugar_range__c';
import Daily_weights__c_FIELD from
'@salesforce/schema/Assesment__c.Daily_weights__c';
import Gender__c_FIELD from '@salesforce/schema/Assesment__c.Gender__c';
import getasmedit from '@salesforce/apex/customObi.getasmedit';

import casmName_FIELD from '@salesforce/schema/Case_Assessment__c.Name';


import patient_FIELD from
'@salesforce/schema/Case_Assessment__c.Patient_Status__c';
import con_FIELD from '@salesforce/schema/Case_Assessment__c.Contact_Number__c';
import ccon_FIELD from
'@salesforce/schema/Case_Assessment__c.Clinic_Contact_Name__c';
import getcasmedit from '@salesforce/apex/caseAcc.getcasmedit';

import ptn_FIELD from '@salesforce/schema/Patient_Touchpoints__c.Name';


import ser_FIELD from '@salesforce/schema/Patient_Touchpoints__c.Service__c';
import src_FIELD from '@salesforce/schema/Patient_Touchpoints__c.Source_System__c';
import sub_FIELD from '@salesforce/schema/Patient_Touchpoints__c.Subject__c';
import getptedit from '@salesforce/apex/patientAcc.getptedit';

// Save Account and child objects Controller Fields


import updateAccountName from
'@salesforce/apex/saveAccountDetails.updateAccountName';
import updateAccountIndustry from
'@salesforce/apex/saveAccountDetails.updateAccountIndustry';
import updateAccountRevenue from
'@salesforce/apex/saveAccountDetails.updateAccountRevenue';
import updateAccountWebsite from
'@salesforce/apex/saveAccountDetails.updateAccountWebsite';

import updateAssessmentBsr from


'@salesforce/apex/saveAccountDetails.updateAssessmentBsr';
import updateAssessmentGen from
'@salesforce/apex/saveAccountDetails.updateAssessmentGen';
import updateAssessmentWeight from
'@salesforce/apex/saveAccountDetails.updateAssessmentWeight';

import updateCaseAssessmentStatus from


'@salesforce/apex/saveAccountDetails.updateCaseAssessmentStatus';
import updateCaseAssessmentContact from
'@salesforce/apex/saveAccountDetails.updateCaseAssessmentContact';
import updateCaseAssessmentClinic from
'@salesforce/apex/saveAccountDetails.updateCaseAssessmentClinic';

import updatePatientTouchPointService from


'@salesforce/apex/saveAccountDetails.updatePatientTouchPointService';
import updatePatientTouchPointSource from
'@salesforce/apex/saveAccountDetails.updatePatientTouchPointSource';
import updatePatientTouchPointSubject from
'@salesforce/apex/saveAccountDetails.updatePatientTouchPointSubject';

export default class TestEditAccount extends LightningElement {

@track isShow=false;
handleClick(){
this.isShow=true;
}
handleCancel(){
this.isShow=false;
}

@api recordId;
@api objectApiName;
@track Accounts;
@track Assesments;
@track CaseAssesment;
@track PatientTouchPoint;

nameField=Name_FIELD;
Industry=Industry_FIELD;
AnnualRevenue=AnnualRevenue_FIELD;
Website=Website_FIELD;

nameasm=asmName_FIELD;
dailybsr=Daily_Blood_sugar_range__c_FIELD;
dailywet = Daily_weights__c_FIELD;
Gender=Gender__c_FIELD;

casmName=casmName_FIELD;
patient=patient_FIELD;
con=con_FIELD;
ccon=ccon_FIELD;

ptn=ptn_FIELD;
ser=ser_FIELD;
src=src_FIELD;
sub=sub_FIELD;

//Passing Account Record Id


@wire(getAccountrec, {accId:'$recordId'})
WireAccountRecordsRecords(result){

if(result.data){
console.log('its working')
console.log(result.data);
//console.log(data.Id);
this.Accounts = result.data;

console.log('value is'+this.Accounts);
this.error = undefined;
}else{
this.error =result.error;
this.Accounts =undefined;
}
}

//Passing Account Id to Assessment Record

@wire(getAssessments, {accId:'$recordId'})
WireAssessmentsRecords(result){

if(result.data){
console.log('its working')
console.log(result.data);
//console.log(data.Id);
this.Assesments = result.data;

console.log('value is'+this.Assesments);
this.error = undefined;
}else{
this.error =result.error;
this.Assesments =undefined;
}
}
//Passing Account Id to CaseAssessment Record

@wire(getCaseAssessment, {accId:'$recordId'})
WireCaseAssessmentsRecords(result){

if(result.data){
console.log('its working')
console.log(result.data);
//console.log(data.Id);
this.CaseAssesment = result.data;

console.log('value is'+this.CaseAssesment);
this.error = undefined;
}else{
this.error =result.error;
this.CaseAssesment =undefined;
}
}

//Passing Account Id to Patient TouchPoint Record

@wire(getpatientTouchPoint, {accId:'$recordId'})
WirePatientRecords(result){

if(result.data){
console.log('its working')
console.log(result.data);
//console.log(data.Id);
this.PatientTouchPoint = result.data;

console.log('value is'+this.PatientTouchPoint);
this.error = undefined;
}else{
this.error =result.error;
this.PatientTouchPoint =undefined;
}

}
//nameField = NAME_FIELD;
//IndustryField = INDUSRTY_FIELD;
//AnnualRevenueField = ANNUALREVENUE_FIELD;
//WebsiteField = WEBSITE_FIELD;
actrecid;
asmrecid;
casmrecid;
ptrecid;
@wire(getAccEdit, {accId:'$recordId'})
WireAcceditRecords(result){

if(result.data){
console.log('its working')
console.log(result.data);
//console.log(data.Id);
this.actrecid = result.data;

console.log('value is'+this.actrecid);
this.error = undefined;
}else{
this.error =result.error;
this.actrecid =undefined;
}
}
@wire(getasmedit, {accId:'$recordId'})
WireAsmeditRecords(result){

if(result.data){
console.log('its working')
console.log(result.data);
//console.log(data.Id);
this.asmrecid = result.data;

console.log('value is'+this.asmrecid);
this.error = undefined;
}else{
this.error =result.error;
this.asmrecid =undefined;
}
}
@wire(getcasmedit, {accId:'$recordId'})
WireCasmeditRecords(result){

if(result.data){
console.log('its working')
console.log(result.data);
//console.log(data.Id);
this.casmrecid = result.data;

console.log('value is'+this.casmrecid);
this.error = undefined;
}else{
this.error =result.error;
this.casmrecid =undefined;
}
}
@wire(getptedit, {accId:'$recordId'})
WirepteditRecords(result){

if(result.data){
console.log('its working')
console.log(result.data);
//console.log(data.Id);
this.ptrecid = result.data;

console.log('value is'+this.ptrecid);
this.error = undefined;
}else{
this.error =result.error;
this.ptrecid =undefined;
}
}
Aname
AIndustry
ARevenue
AWebsite
AsmDailyBloodSugar
AGender
Aweights
Astatus
Acontact
Aclinic
Aservice
Asource
Asubject
inputvalue
// onChange Event
AccountValues(event)
{
this.inputvalue=event.target.name
if(this.inputvalue=='Namefields')
{
this.Aname=event.target.value

}
else if(this.inputvalue=='IndustryField')
{
this.AIndustry=event.target.value

}
else if(this.inputvalue=='AnnualrevenueField')
{
this.ARevenue=event.target.value

}
else if(this.inputvalue=='WebsiteField')
{
this.AWebsite=event.target.value
}
// Assessments

else if(this.inputvalue=='BloodSugarField')
{
this.AsmDailyBloodSugar=event.target.value
}
else if(this.inputvalue=='GenderField')
{
this.AGender=event.target.value
}
else if(this.inputvalue=='DailyWeightsField')
{
this.Aweights=event.target.value
}
// case Assessments
else if(this.inputvalue=='PatientStatusField')
{
this.Astatus=event.target.value
}
else if(this.inputvalue=='ContactField')
{
this.Acontact=event.target.value
}
else if(this.inputvalue=='ClinicContactField')
{
this.Aclinic=event.target.value
}
//Patient Touchpoint
else if(this.inputvalue=='ServiceField')
{
this.Aservice=event.target.value
}
else if(this.inputvalue=='SourceField')
{
this.Asource=event.target.value
}
else if(this.inputvalue=='SubjectField')
{
this.Asubject=event.target.value
}
}

//saveAc=this.recordId
handleSave(){

if(this.Aname != null)
{
updateAccountName({SAid:this.recordId,Sname:this.Aname})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('working method1')
}
if(this.AIndustry!= null)
{
updateAccountIndustry({SAid:this.recordId,Sind:this.AIndustry})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('working method2')

}
if(this.ARevenue!= null)
{
updateAccountRevenue({SAid:this.recordId,Srev:this.ARevenue})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('working method3')

}
if(this.AWebsite!= null)
{
updateAccountWebsite({SAid:this.recordId,Sweb:this.AWebsite})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('working method4')
}
//Assessment
if(this.AsmDailyBloodSugar!= null)
{

updateAssessmentBsr({asmid:this.recordId,AsmBloodSugar:this.AsmDailyBloodSugar})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('Assessment working method1')

}
if(this.AGender!= null)
{
updateAssessmentGen({asmid:this.recordId,AsmGender:this.AGender})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('Assessment working method2')

}
if(this.Aweights!= null)
{
updateAssessmentWeight({asmid:this.recordId,AsmWeight:this.Aweights})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('Assessment working method3')

}
// case Assessment
if(this.Astatus!= null)
{
updateCaseAssessmentStatus({casmid:this.recordId,casmStatus:this.Astatus})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('CaseAssessment working method1')

}
if(this.Acontact!= null)
{
updateCaseAssessmentContact({casmid:this.recordId,casmContact:this.Acontact})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('CaseAssessment working method2')

}
if(this.Aclinic!= null)
{
updateCaseAssessmentClinic({casmid:this.recordId,casmClinic:this.Aclinic})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('CaseAssessment working method3')

}
//Patient TouchPoint
if(this.Aservice!= null)
{
updatePatientTouchPointService({Ptid:this.recordId,ptService:this.Aservice})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('PatientTouchPoint working method1')
}
if(this.Asource!= null)
{
updatePatientTouchPointSource({Ptid:this.recordId,ptSource:this.Asource})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('PatientTouchPoint working method2')
}
if(this.Asubject!= null)
{
updatePatientTouchPointSubject({Ptid:this.recordId,ptSubject:this.Asubject})
.then((result)=>console.log(result))
.catch((error)=>alert('Error:'+JSON.stringify(error)));
console.log('PatientTouchPoint working method3')
}

You might also like