• 2 Objects
  • 1 Design__c Record
  • 5 Array_Details__c

When on the Design__c record, I want to see a list of Array_Details__c, and be able to edit the records. 
 

HTML

<template>
    <lightning-datatable 
        data={data} 
        columns={columns} 
        key-field="Id" 
        onrowaction={handleRowAction} 
        onsave={handleSave} >
    </lightning-datatable>
</template>

 

.js

import { LightningElement, wire, api } from 'lwc';
import { getRecord, updateRecord,getRelatedRecords } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';

import Array_Details__c_OBJECT from '@salesforce/schema/Array_Details__c';
import Array_Details__c_LOOKUP_FIELD from '@salesforce/schema/Array_Details__c.Design__c';

import Name from '@salesforce/schema/Array_Details__c.Name';
import Array_System_Size__c from '@salesforce/schema/Array_Details__c.Array_System_Size__c';
import System_Size_kW__c from '@salesforce/schema/Array_Details__c.System_Size_kW__c';
import Installation_Type__c from '@salesforce/schema/Array_Details__c.Installation_Type__c';
import Roof_Material__c from '@salesforce/schema/Array_Details__c.Roof_Material__c';
import Module_Asset__c from '@salesforce/schema/Array_Details__c.Module_Asset__c';
import Number_of_Modules__c from '@salesforce/schema/Array_Details__c.Number_of_Modules__c';
import DV_Reviewed__c from '@salesforce/schema/Array_Details__c.DV_Reviewed__c';

export default class ArrayDetailsTable extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [] })
    Design__c;
    @wire(getRelatedRecords, {
        recordId: '$recordId',
        relationshipApiName: Array_Details__c_LOOKUP_FIELD,
        objectApiName: Array_Details__c_OBJECT })
        Array_Details__c = { data: [] };


connectedCallback() {
   console.log(' connectedCallback Design Data', typeof this.Design__c, this.Design__c);
    }

renderedCallback() {
    console.log(' renderedCallback Design Data', typeof this.Design__c, this.Design__c);
    }

   Columns = [
    { label: 'Name', fieldName: Name, type: 'text', editable: false },
    { label: 'Array System Size', fieldName: Array_System_Size__c, type: 'text', editable: true },
    { label: 'System Size kW', fieldName: System_Size_kW__c, type: 'number', editable: true },
    { label: 'Installation Type', fieldName: Installation_Type__c, type: 'text', editable: true },
    { label: 'Roof Material', fieldName: Roof_Material__c, type: 'text', editable: true },
    { label: 'Module Asset', fieldName: Module_Asset__c, type: 'text', editable: true },
    { label: 'Number of Modules', fieldName: Number_of_Modules__c, type: 'number', editable: true },
    { label: 'DV Reviewed', fieldName: DV_Reviewed__c, type: 'date-local', editable: true }
];

handleRowAction(event) {
    const action = event.detail.template.action;
    const rowId = event.detail.template.row.Id;
    switch (action.name) {
        case 'edit':
            this.editRecord(rowId);
            break;
        case 'update':
            this.updateRecord(rowId);
            break;
    }
}


handleSave(event) {
    const draftValues = event.detail.template.draftValues;
    const rowId = event.detail.template.row.Id;
    this.updateRecord(draftValues,rowId);
}


updateRecord(draftValues, rowId) {
    updateRecord({ fields: draftValues, recordId: rowId })
        .then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Record updated',
                    variant: 'success'
                })
            );
            // Refresh the view with the latest data
            return refreshApex(this.Array_Details__c);
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error updating record',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        });
}
}

 

.XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="inlineEditRelatedList">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

 

<template>
    <lightning-input 
    label="Sold Production" 
    name="num1" 
    onchange={SoldProduction}
    required>
    </lightning-input>

    <lightning-input
      label="Design Production"
      name="num2"
      onchange={DeisgnProduction}
      required>
    </lightning-input>

    <lightning-button label="Calculate Production Differnce" onclick={calcExpr}></lightning-button>

    <lightning-input
      label="Result"
      name="result"
      read-only="true"
      value={result}>   
    </lightning-input>

  </template>

.js

import { LightningElement, api, track } from 'lwc';
import {FlowAttributeChangeEvent,FlowNavigationNextEvent} from 'lightning/flowSupport';

export default class calculator extends LightningElement {
  @track num1;
  @track num2;
  @track result;
  @api result;
  @api num1;
  @api num2;
  @api required;

  calcExpr() {
    this.result = (Number(this.num1) - Number(this.num2)) / ((Number(this.num1) + Number(this.num2))/ 2);
  }

  SoldProduction(evt) {
    this.num1 = evt.target.value;
  }

  DeisgnProduction(evt) {
    this.num2 = evt.target.value;
  }


}

xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>47.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Calculator</masterLabel>
  <description>Calculator to find percentage</description>
  <targets>
      <target>lightning__FlowScreen</target>
  </targets>
<targetConfigs>
       <targetConfig targets="lightning__FlowScreen">
        <property name="result" type="Integer" />
        <property name="num1" type="Integer"/>
        <property name="num2" type="Integer"/>
        <property name="required" type="Boolean" default="true"/>
    </targetConfig>
</targetConfigs>
</LightningComponentBundle>

Values:

• I have two numbers from a record "num1" and "num2"

Problem:

• I am not sure how to take these two values and use them as default values when the LWC loads. 

Goal:

• Once the values change the dafault values should not be used. 

 

• 2 Objects
  • 1 Design__c Record
  • 5 Array_Details__c

When on the Design__c record, I want to see a list of Array_Details__c, and be able to edit the records. 
 

HTML

<template>
    <lightning-datatable 
        data={data} 
        columns={columns} 
        key-field="Id" 
        onrowaction={handleRowAction} 
        onsave={handleSave} >
    </lightning-datatable>
</template>

 

.js

import { LightningElement, wire, api } from 'lwc';
import { getRecord, updateRecord,getRelatedRecords } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';

import Array_Details__c_OBJECT from '@salesforce/schema/Array_Details__c';
import Array_Details__c_LOOKUP_FIELD from '@salesforce/schema/Array_Details__c.Design__c';

import Name from '@salesforce/schema/Array_Details__c.Name';
import Array_System_Size__c from '@salesforce/schema/Array_Details__c.Array_System_Size__c';
import System_Size_kW__c from '@salesforce/schema/Array_Details__c.System_Size_kW__c';
import Installation_Type__c from '@salesforce/schema/Array_Details__c.Installation_Type__c';
import Roof_Material__c from '@salesforce/schema/Array_Details__c.Roof_Material__c';
import Module_Asset__c from '@salesforce/schema/Array_Details__c.Module_Asset__c';
import Number_of_Modules__c from '@salesforce/schema/Array_Details__c.Number_of_Modules__c';
import DV_Reviewed__c from '@salesforce/schema/Array_Details__c.DV_Reviewed__c';

export default class ArrayDetailsTable extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [] })
    Design__c;
    @wire(getRelatedRecords, {
        recordId: '$recordId',
        relationshipApiName: Array_Details__c_LOOKUP_FIELD,
        objectApiName: Array_Details__c_OBJECT })
        Array_Details__c = { data: [] };


connectedCallback() {
   console.log(' connectedCallback Design Data', typeof this.Design__c, this.Design__c);
    }

renderedCallback() {
    console.log(' renderedCallback Design Data', typeof this.Design__c, this.Design__c);
    }

   Columns = [
    { label: 'Name', fieldName: Name, type: 'text', editable: false },
    { label: 'Array System Size', fieldName: Array_System_Size__c, type: 'text', editable: true },
    { label: 'System Size kW', fieldName: System_Size_kW__c, type: 'number', editable: true },
    { label: 'Installation Type', fieldName: Installation_Type__c, type: 'text', editable: true },
    { label: 'Roof Material', fieldName: Roof_Material__c, type: 'text', editable: true },
    { label: 'Module Asset', fieldName: Module_Asset__c, type: 'text', editable: true },
    { label: 'Number of Modules', fieldName: Number_of_Modules__c, type: 'number', editable: true },
    { label: 'DV Reviewed', fieldName: DV_Reviewed__c, type: 'date-local', editable: true }
];

handleRowAction(event) {
    const action = event.detail.template.action;
    const rowId = event.detail.template.row.Id;
    switch (action.name) {
        case 'edit':
            this.editRecord(rowId);
            break;
        case 'update':
            this.updateRecord(rowId);
            break;
    }
}


handleSave(event) {
    const draftValues = event.detail.template.draftValues;
    const rowId = event.detail.template.row.Id;
    this.updateRecord(draftValues,rowId);
}


updateRecord(draftValues, rowId) {
    updateRecord({ fields: draftValues, recordId: rowId })
        .then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Record updated',
                    variant: 'success'
                })
            );
            // Refresh the view with the latest data
            return refreshApex(this.Array_Details__c);
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error updating record',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        });
}
}

 

.XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="inlineEditRelatedList">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

 

<template>
    <lightning-input 
    label="Sold Production" 
    name="num1" 
    onchange={SoldProduction}
    required>
    </lightning-input>

    <lightning-input
      label="Design Production"
      name="num2"
      onchange={DeisgnProduction}
      required>
    </lightning-input>

    <lightning-button label="Calculate Production Differnce" onclick={calcExpr}></lightning-button>

    <lightning-input
      label="Result"
      name="result"
      read-only="true"
      value={result}>   
    </lightning-input>

  </template>

.js

import { LightningElement, api, track } from 'lwc';
import {FlowAttributeChangeEvent,FlowNavigationNextEvent} from 'lightning/flowSupport';

export default class calculator extends LightningElement {
  @track num1;
  @track num2;
  @track result;
  @api result;
  @api num1;
  @api num2;
  @api required;

  calcExpr() {
    this.result = (Number(this.num1) - Number(this.num2)) / ((Number(this.num1) + Number(this.num2))/ 2);
  }

  SoldProduction(evt) {
    this.num1 = evt.target.value;
  }

  DeisgnProduction(evt) {
    this.num2 = evt.target.value;
  }


}

xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>47.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Calculator</masterLabel>
  <description>Calculator to find percentage</description>
  <targets>
      <target>lightning__FlowScreen</target>
  </targets>
<targetConfigs>
       <targetConfig targets="lightning__FlowScreen">
        <property name="result" type="Integer" />
        <property name="num1" type="Integer"/>
        <property name="num2" type="Integer"/>
        <property name="required" type="Boolean" default="true"/>
    </targetConfig>
</targetConfigs>
</LightningComponentBundle>

Values:

• I have two numbers from a record "num1" and "num2"

Problem:

• I am not sure how to take these two values and use them as default values when the LWC loads. 

Goal:

• Once the values change the dafault values should not be used. 

 

It appears that 'most' of the options available for customizing page layout, only affects the 'edit' page layout and not the 'new' record page layout.
I am looking at customizing page layout while creating 'new' record.

I want to have some field as 'read only' and some fields not visible in new record page layout (just like formula field)
a. Do I have to go with creating new VF page?
b. Is there any other way in Salesforce?

Need Help