Fill the form and display data into data table without storing it into sObject/database using LWC

SCENARIO

While working on one of the requirements for an Automobile sector project for a client based out of Dallas, Texas, there was a requirement to add data using a form in LWC and display it into the dataTable without storing it into sObject/database.

CHALLENGE

Although the requirement seems easy, we faced challenges while displaying records into the dataTable and reRendering it when a new record is added.

 

APPROACH

To display records without storing them into sObject/database, We used a JSON object that will be responsible to store all the data to be displayed in the dataTable.
Also, we declared that JSON object as a reactive property using the @track decorator. So the table can be reRendered automatically when the value of that variable is changed/updated.

Data.html

<template>
    <lightning-card title="Add data into Datatable">
        <lightning-layout>
            <lightning-input class="slds-p-around_medium" label="Make"  type="string" name="Make"  onchange={makeChangedHandler} required="true"> </lightning-input>
            <lightning-input class="slds-p-around_medium" label="Model" type="string" name="Model" onchange={modelChangedHandler} required="true"> </lightning-input>
            <lightning-input class="slds-p-around_medium" label="Year" type="date" name="Year" onchange={yearChangedHandler} required="true"> </lightning-input>
        </lightning-layout>
        <lightning-button class="slds-m-left_x-small" label="Display" variant="brand" onclick={handleClick}>
        </lightning-button>
        <lightning-datatable key-field="id" id="datatable" data={fields} columns={columns}>
        </lightning-datatable>                 
    </lightning-card>  
</template>

Data.js

import { LightningElement,track } from 'lwc';

export default class Data extends LightningElement {
     columns = [{
        label: 'Make',
        fieldName: 'Make',
        type: 'text',
        sortable: true
    },
    {
        label: 'Model',
        fieldName: 'Model',
        type: 'text',
        sortable: true
    },
    {
        label: 'Year',
        fieldName: 'Year',
        type: 'Date',
        sortable: true
    },
];

    strMake;
    strModel;
    strYear;
    @track fields =[];
    
    makeChangedHandler(event){
        this.strMake = event.target.value;  
    }
    modelChangedHandler(event){
        this.strModel = event.target.value;
    }
    yearChangedHandler(event){
        this.strYear = event.target.value;
    }

    handleClick(){
        if(this.strMake  &&  this.strModel  && this.strYear)
        {
            this.fields = [...this.fields,{'Make' : this.strMake, 'Model' : this.strModel, 'Year' : this.strYear}];   
        }
        this.strMake ='';
        this.strModel ='';
        this.strYear ='';
        //code to clear field once values are entered
        this.template.querySelectorAll('lightning-input').forEach(element => {
        element.value = null;     
        });
    }
}

There are 3 input fields in the form. Whenever the values will be entered in these fields, it will get stored in their respective variables (strMake, strModel, strYear).

On click of Display button, these 3 inputs will be validated and pushed into an array, which is then used to display data in the data table. Also, it will clear these 3 input fields and allow users to enter another record.

As the array is declared as a reactive property, it will reRender the table automatically to display the newly created record.

OUTPUT

CONCLUSION

By using the above-mentioned approach & code, We will be able to add data into the data table without using sObject or saving data into a database in LWC.

If you have any questions you can reach out to our Salesforce Consulting team here.

A new way to enforce user level security with Apex code

By the release of Summer 22, Major expansion in the Apex security model. Now we can declare Apex database operations run on user or system modes. In this blog, we will see how to write Secure Apex Code with User Mode Database Operations (Summer '22 release) in a remarkably simplified manner. This feature is currently under Beta.

The new Database methods support an AccessLevel parameter that lets you run database operations in user mode instead of in the default system mode. By default Apex code runs in system mode,  Which means that it runs with substantially elevated permissions over the user running the code. To enhance the security context of Apex, you can specify user mode access for database operations. Field-level security (FLS) and object permissions of the running user are respected in user mode, unlike in system mode. User mode always applies sharing rules. in system mode they’re controlled by the class sharing keywords.

USER_MODE AND SYSTEM_MODE

In SOQL queries we can indicate the mode of the operation by using USER_MODE or SYSTEM_MODE. Below is an example that specifies the user mode.

List<Account> accts = [SELECT Id, Name, Phone, BillingCity FROM Account WITH USER_MODE];

List<Contact> cons = [SELECT Id, FirstName, LastName, Account.Name FROM Contact WITH USER_MODE]; 

Database operation with USER or SYSTEM MODE

Database operations can specify user or system mode. Below is an example to insert a new account with user mode.

Account acct = new Account(
    Name='Binary Republik',
    Phone='9909950592');

insert as USER acct;

Account acc = [SELECT Id, Name, Phone FROM Account WHERE Name ='Binary Republik'];

acc.Email = 'info@binaryrepublik.com';
update as SYSTEM acc; 
 

Dynamic at runtime syntax

The new AccessLevel class represents the two modes in which Apex runs database operations. Use this new class to define the execution mode as user mode or system mode. Use these new overloaded methods to perform DML and query operations.

• Database.query methods
• Search.query methods
• Database DML methods (insert, update, upsert, merge, delete, undelete, and convertLead)

Below are some examples.

//Database.query example

Account acc = Database.query('SELECT Id, Name FROM Account WHERE Name = 'Binary Republic'', AccessLevel.USER_MODE);

//Database.insert example

Database.insert(new Account(Name = 'Binary Republik'),AccessLevel.USER_MODE);

Click here see release notes on secure apex Code with user mode database operations. 

If you have any questions you can reach out our Salesforce Consulting team here.

Display a notification banner using the lightning web component

SCENARIO

While working on one of the requirements for a Health sector project for a client based out of Atlanta, GA, there was a requirement to display a notification banner or greeting message based on a time frame using the lightning web component.

CHALLENGE

The requirement is to display a greeting message or a notification banner for a specific duration. after the duration, the message will be changed or not display any banner. So they conditionally render notification messages or greeting messages based on a time frame without user interaction.

APPROACH

Notification banners communicate a state that affects the entire system, not just a feature or page. It appears automatically and lasts for the duration of the session.

Bellow is our approach to achieve the requirement by using Lightning Web Component and Custom Metadata Type.

1. Create a custom metadata type to store the banner details.
1. Start Date
2. End Date
3. Message
2. Create an Apex class to retrieve custom metadata type records.
3. Create a lightning web component to conditionally render a notification banner.

Step 1:- Create a Custom Metadata Type to store the banner details.

Below are the steps to create a custom metadata type.

• Click on Setup, In the Quick Find box type Custom Metadata Type.
• Select New Custom Metadata Type and enter Label and Plural Label.
• Click on Save.
• Create 3 custom fields to store the start date, end date, and message. below is an image of Custom Metadata Type.

Custom Metadata Type

• The next step is to create a record into a custom metadata type. Click on Manage Notification Banners and fill in the details and click on Save. Below is an image of the record.

Custom Metadata Type Record

Step 2:- Create an Apex Class to retrieve custom metadata type records.

Step 3:- Create a Lightning Web Component to conditionally render a notification banner.

Output:-

Output

If you have any questions you can reach out our Salesforce Consulting team here.

Actions Missing in Activity Composer on Objects

SCENARIO

While working on one of the requirements for the client based in Atlanta, a few users were unable to see some actions under Activity composer on the Lead object.

CHALLENGE

As an administrator, we were able to see all the actions like 'Log a call', 'New task', 'Email', 'New Event'  but some of the users were unable to see a few actions like 'New Task' and 'Log a call'. It was challenging to identify the problem that certain users were experiencing. We had some trouble going through all the settings and checking user and object setups because we were unsure of which configuration was acting inconsistently.

SOLUTION

To resolve this issue, we tried a lot of solutions and found a bunch of configurations we should check to control user access over Activity composers.

Below are 5 configurations that are useful to resolve this kind of issue.

1. Make sure the user has permission to the Task object
2. Check page layout assignment for the record type
3. Check object page layout
4. Check the default record type of the Global action and record type permission to the user
5. Ensure that users have permission to view the record type

Follow the below steps to verify all permissions and configurations.

1. Make sure the user has permission to the Task object.

• Open respective Profiles for the user who is facing the issue.
• Click on 'System Permission and verify user permission to the Task object.

2. Check page layout assignment for the record type.

• Go to Object Manager, find the 'Lead' object.
• Click on Record Types, Click on the 'Page layout Assignment' button and verify the page layout assigned to the user.

3. Check object page layout.

• Go to Object Manager, find the Lead object.
• Click on Page Layouts, Open the respective page layout where you want to add the missing action.
• Click 'Override the Predefined Actions' under Salesforce Mobile and Lightning Actions.
• Drag and Drop 'Log a Call' and 'Create Task' from Mobile & Lightning Actions and Save the page.

If the actions are added to the page layout even though users are not able to see the actions you can check another step.

4. Check the default record type of the Global action and record type permission to the user.

• Make sure the user has permission to the record type selected under the Global actions.

5. Ensure that users have permission to view the record type.

• Open respective Profiles for the user who is facing the issue.
• Click on 'Object Settings' and open the Task object.
• Make sure the user has permission to the record type for a particular action.

OUTPUT

Before modifying permissions

After modifying permissions

CONCLUSION

By following the above steps, we can verify the user permission & object configurations and modify them to make the actions visible to the user.

If you have any questions you can reach out our Salesforce Consulting team here.