Thursday, 4 March 2021

Lightning Web Component : Validate/Format currency field using lighting- input Attribute


INTRODUCTION/SCENARIO

While working on the Lightning Web Components for our most recent project, a Banking website for our client's business in Naples, Florida, USA. we came across a scenario where had to validate the input field accepting a value between 1 to 150,000 and formatted with leading $ sign. 

CHALLENGE

We implemented this functionality using LWC, but challenging part was formatting the input value with $ sign using an input element of HTML. 

APPROACH / SOLUTION 

We've used lightning-input instead of an HTML input element. The Lightning input field itself has attributes with validation as well as a format for currency. We only need to set attributes as per the requirement and, it would perform the desired action in the OOTB manner. 

A Lightning Web Component renders UI that must include an HTML file, a JavaScript file, and a metadata configuration file. 


Every UI component must have an HTML file with the root tag <template>.


myComponent.html


<template>
    <div class="slds-card">

        <!--show hide the form based on the validation-->
        <template if:true={showAmountInputBox}>

            <div class="slds-p-around_medium">
                <h2>Tell us what you need</h2>
                <lightning-input type="number" formatter="currency" step="1" 
                class="form-control is-invalid" onfocusout={checkAmountValue} value={inputAmount}
                label="How much would you like to borrow?">
                </lightning-input>
            </div>

        </template>

    <!-- Check on focusout of the box if amount is between $1 to $150000 -->
    <template if:true={greaterAmount}>
        <p class="slds-p-around_medium">Amount must not be greater than $150000. </p>
    </template>
    <template if:true={lesserAmount}>
        <p class="slds-p-around_medium">Amount must not be less than $1. </p>
    </template>
    </div>
</template>

myComponent.js


import { LightningElement,track } from 'lwc';

export default class myComponent extends LightningElement {

    @track inputAmount; // to store amount from input box
    @track greaterAmount=false; // check if amount is greater than $150000
    @track lesserAmount=false; // check if amount is less than $1
  
// handle onfocusout event to verify input amount

 checkAmountValue(event){
    const typedValue = event.target.value;
        
    if(typedValue !== undefined){
        event.target.value=typedValue;
    }

    this.inputAmount=typedValue;
    this.showPrevNext = false; 

    if(this.inputAmount>150000){ 
        this.greaterAmount=true; 
        this.lesserAmount=false; 
     } 
     else if(this.inputAmount<1){ 
        this.lesserAmount=true; 
        this.greaterAmount=false; 
    }
    else if(this.inputAmount === "" || this.inputAmount == null || this.inputAmount < 150000 || this.inputAmount >1){
        this.greaterAmount=false; 
        this.lesserAmount=false; 
   }
    
 }
    
}

myComponent.js-meta.xml



<?xml version="1.0" encoding="UTF-8"?> 
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myComponent"><apiVersion>45.0</apiVersion> 
    <isExposed>true</isExposed> 
    <targets> 
        <target>lightning__AppPage</target> 
        <target>lightning__RecordPage</target> 
        <target>lightning__HomePage</target> 
        <target>lightningCommunity__Page</target> 
        <target>lightningCommunity__Default</target> 
    </targets> 
</LightningComponentBundle> 

OUTPUT


SUMMARY

Hence, we have validation implemented with the formatting applied using the attributes of Lightning Input without any custom function OR JavaScript. 

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

Thursday, 25 February 2021

[Resolved]: Add Tooltip over a field section using visual force page in Object Page Layout.

Introduction/SCenario

There was a need of implementing tooltip on mouse hover for field section label on the object page layout for one of the our client - consulting firm based out of Atlanta, GA, USA.

We, all are familiar with showing tooltip on page layout by dragging & dropping the Lightning Component for a specific object field on the page layout, but displaying a tooltip on the Field Section label on the record/object page layout is quite challenging. So, in this blog, I will go through in detail how Tooltip can be displayed on the mouse hover for Field Section label on the object page layout.

APPROACH
To display the tooltip on the field section label, we need to utilize custom Visual Force page in the page layout. In that page, we can have customized HTML & CSS to show tooltip on the mouse hover.
PROCESS
I've developed a custom solution that involves creating a custom Visual Force Page called ToolTip. This Page contains the mechanism to display the Tooltip of  Account Name. The page needs to be customized using HTML and CSS to show the tooltip of an Account name on a Field Section Label.
ToolTip.vfp
After creating the visual force page, we need to drag & drop the page to the specific record page layout. As, I need to show tooltip of Account Name, I've used it on the account page layout.
OUTPUT
If you have any questions you can reach out our Salesforce Consulting team here.

Thursday, 18 February 2021

Overview of Workbench in Salesforce

INTRODUCTION

Recently, working on one of the Networking domain project for our client based out in Louisville, Colorado, USA, utilized workbench with Salesforce to test out REST APIs, where Salesforce accepts order data from the third-party application.


Hence Workbench tool is very helpful, here on introductory blog, I am going to explain how we can utilize Workbench with Salesforce. Workbench with Salesforce is a versatile web-based tool developed for Salesforce administrators and developers to communicate with Salesforce.com by Force.com APIs.  


Using the Workbench with Salesforce platform, one can efficiently execute Salesforce Object Query Language (SOQL) and Salesforce Object Search Language (SOSL), access organization's records, perform data loading, data manipulation, and data migration, testing, deploy and troubleshoot any applications, and configure session settings, testing of REST APIs with Raw Response and Asynchronous Methods. 


CONNECT WORKBENCH WITH YOUR SALESFORCE ENVIRONMENT

In order, to connect Workbench with your Salesforce Org, go to the below website, 

For the next course of action, refer to the below image, 


 


Note: You can select Production as Environment, if you are working in Developer Edition.

  

Once you click on the Login with Salesforce button you will navigate to the Salesforce login page. Enter your username and password of your Salesforce instance and click Log In. 

 

                                     

After login successfully into Workbench Salesforce, it allows you to Jump to different options like Standard & Custom Objects, Metadata Types and Components, SOQL Query, SOSL Search, Insert, Update, Upsert, Delete, Undelete, Purge, Deploy, Retrieve, and many more. 


                     

On the top menu bar, you will see five different sections, info, queries, data, migration, utilities. 


1. Info section as the name itself suggests, will provide information about all features there are in Salesforce. For example, Standard & Custom Object, Apex Class & Triggers, Permission sets & Profiles, Workflows & Processes, and so on.
  • The users can view all the information on any Standard and Custom object. The detail of object display on the screen contains Attributes of the object detail like searchable, custom or standard object, Child Relationships which provides the information on all the child objects, List of Fields and its details, Record Type Info which provides a list of Record Types of the selected object and its detail, and Supported Scopes for an object like Account teams, my territory’s, etc. 

  • Metadata Types & Components feature is used to display the description and components of a list of metadata types such as Permission Sets, Queue, Apex Class, Apex Page, Apex Trigger Workflow, etc. 

  • Session Information feature will show the current user session details. It displays details about current user sessions like Connection, Accessibility mode, profileId, Session seconds valid, user Email, user FullNameUserLocaleUserType, and many more. Only the System Administrator can end or cancel any other session present in Salesforce Workbench.


2. Queries section permits a user to perform SOQL Query, Async SOQL question, SOSL search, and Streaming Push Topics which assists with questioning the items and get the information from the associated salesforce organization.
  • Users can provide inputs such as Object to query. There is also a feature Sort and Filter which is used to sort the data ascending or descending and to filter the data. 
  • Workbench will develop the Query based on the object, fields, and the rest of the parameters selected. 
  • Workbench will render the Query Results in the form of the ListView, Matrix view, etc. selected in ‘View As’. There will be two other options to view results such as Bulk CSV and Bulk XML.

3. Data section allows you to perform DML operations such as Insert, Update, Upsert, Delete, Undelete, Purge on any desired Object from your Salesforce Instance. Workbench provides two ways to perform all these operations. One is to insert one record at a time. The second is to upload a CSV file for data in bulk.

4. Migration provides the feature for deploying and retrieving packages from/to Salesforce InstanceThe package can be retrieved from Salesforce Org using Retrieve. To deploy, you can use package.xml and directly deploy it in the Salesforce instance. 

5. Utilities section has five features including the use of the HTTP methods and Apex code etc. 
  • Rest Explorer is used to performing the Rest API service with the HTTP method such as GET, POST, PUT, PATCH, DELETE. 
  • Apex Code can be executed in a workbench using Asynchronous methods with help of another feature of Utilities which is Apex Execute. Users can create, update, or delete records with apex code.
  • User can set or Reset your Org password through workbench using Password Management. 
  • Bulk API Job Status is used to see the result and status of asynchronous data load. By providing jodId in the input box, one can see the result. 
  • Metadata API Process Status lets users see the status and result of Async Operations such as Deploy and Retrieve which are performed with the workbench feature Migration.

SUMMARY

Using workbench in Salesforce, you can perform various activities such as SOSL, SOQL, DML operations, migrating packages, REST API services, execution of apex code, and much more.

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