LWC Exchange – Scenario 6

LWC Practice Scenarios One comment

Get Custom Metadata and Populate Value in Lightning Web Component Record Form

In this LWC scenario, You are going to build a record form with the help of Lightning Web Component and populate a particular field value in the record form using metadata record stored in salesforce. Once user clicks on save button, the field should also gets saved with same value in record fetched from metadata.

This scenario has been designed for developer who are Intermediate in Lightning Web Component.

Problem Statement – Data Model

  • Create a custom metadata object named Bank Info
  • The custom metadata object should have these fields:-
    • Success Code (Data Type – Picklist)
    • Message (Data Type – Text, length 255)
  • Create a custom object named Transaction
  • The transaction custom object should have these fields:-
    • Name (Data Type – Text)
    • Success Code (Data Type – Picklist)
    • Account (Data Type – Lookup)
    • Message (Data Type – Text, length 255)
  • The picklist value of Success Code field on custom object should be same as picklist value of Success Code on Bank Info custom metadata object
  • Success Code Picklist values are:-
    • 101
    • 201
    • 301

LWC Record Form

Create a Lightning Web Component to allow users to create transaction object’s record. The form should show Name, Success Code, Account and Message field.

  1. Message field should be read only
  2. On selection of Success code, fetch the respective message from metadata and populate it on message field
  3. On click of save, record should be saved
  4. Make all the fields required on record form

Metadata Record To Create

  1. Success code = 101, Message = Records created in Oracle System
  2. Success code = 201, Message = Records are updated in Oracle System
  3. Success code = 301, Message = records are deleted in Oracle System

Test Case to validate

If users select 101 as success code in record form and save, respective message should be populated on transaction record i.e. Records created in Oracle System.

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

GET IN TOUCH

Schedule a 1:1 Meeting with me

Book Meeting For Free

Do not forget to paste your code in comment. It would help others in case they get stuck. Also check out https://salesforcediaries.com/category/lightning-web-component/ to learn more on LWC.

One comment

  1. import { LightningElement, track, wire } from ‘lwc’;
    import getMessageForSuccessCode from ‘@salesforce/apex/TransactionFormController.getMessageForSuccessCode’;

    export default class TransactionForm extends LightningElement {
    @track successCode = ”;
    successCodeOptions = [
    { label: ‘101’, value: ‘101’ },
    { label: ‘201’, value: ‘201’ },
    { label: ‘301’, value: ‘301’ },
    ];
    @track message = ”;

    handleSuccessCodeChange(event) {
    this.successCode = event.detail.value;
    this.fetchMessageForSuccessCode();
    }

    fetchMessageForSuccessCode() {
    getMessageForSuccessCode({ successCode: this.successCode })
    .then(result => {
    console.log(‘Apex Result:’, result);
    this.message = result;
    })
    .catch(error => {
    console.error(‘Error fetching message:’, error);
    });
    }

    handleSubmit(event) {
    alert(‘valsccccccc==>’+event.preventDefault());
    event.preventDefault();
    // Save the record
    alert(‘vals==>’+JSON.stringify(event.detail.fields));
    const fields = event.detail.fields;
    fields.Success_Code__c = this.successCode;
    fields.Message__c = this.message;
    //this.template.querySelector(‘lightning-record-edit-form’).submit(fields);
    alert(‘fields’+this.template.querySelector(‘lightning-record-edit-form’).submit(fields));
    }
    }

    public with sharing class TransactionFormController {
    @AuraEnabled(cacheable=true)
    public static String getMessageForSuccessCode(String successCode) {
    Bank_Info__mdt bankInfo = [SELECT Message__c FROM Bank_Info__mdt WHERE Success_Code__c = :successCode LIMIT 1];
    return bankInfo != null ? bankInfo.Message__c : ”;
    }

    }

    Provide you thoughts on this, am able to do above task successfully

    Reply

Leave a Reply