How to Use force:inputField in Lightning Components?

The force:inputField component in Salesforce Lightning is designed to replicate the behavior of apex:inputField in Visualforce, providing a way to bind a field on an sObject to the Lightning UI. However, developers often face challenges when implementing it due to subtle nuances in its configuration and behavior. Let’s address the usage and common issues with force:inputField by examining examples and solutions.

CRS Info Solutions provides comprehensive Salesforce training in Pune, tailored for beginners keen to explore the Salesforce platform. This engaging program focuses on building practical expertise through hands-on activities. Learners will gain access to daily notes, recorded sessions, interview guidance, and practice with real-world scenarios. Join now and experience a free demo session!

Example 1: Displaying and Editing an Account Name

This example demonstrates how to bind an Account’s Name field to the force:inputField.

Lightning Component

<aura:component controller="AccountController" implements="force:appHostable">
    <aura:attribute name="account" type="Account" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <!-- Display an editable field for Account Name -->
    <form>
        <force:inputField value="{!v.account.Name}" />
    </form>
</aura:component>

Code Explanation:

This Lightning Component declares an account attribute of type Account and initializes it with a server-side controller. The force:inputField is bound to v.account.Name, allowing the Name field to be editable. The doInit handler ensures the attribute is populated when the component loads.

Component Controller

({
    doInit: function(component, event, helper) {
        var action = component.get("c.getAccount");
        action.setCallback(this, function(response) {
            component.set("v.account", response.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

Code Explanation:

The doInit method retrieves the first Account record using the getAccount Apex method. It sets the account attribute on the component with the server’s response, ensuring the UI is populated with the Account data.

Apex Controller

public class AccountController {
    @AuraEnabled
    public static Account getAccount() {
        return [SELECT Id, Name FROM Account LIMIT 1];
    }
}

Code Explanation:

The Apex controller fetches the first Account record from the database, selecting only the Id and Name fields. The @AuraEnabled annotation allows this method to be called by the Lightning Component’s controller.

Common Issue: Picklists Render as Disabled

When using force:inputField with picklist fields, they may appear disabled by default. This behavior occurs due to Salesforce’s underlying rendering logic. To resolve this, you can use jQuery to enable the picklist.

See also: Salesforce Approval Process Interview Questions

Solution Using jQuery

Lightning Component

<aura:component controller="PicklistController" implements="forceCommunity:availableForAllPageTypes,force:appHostable">
    <aura:attribute name="account" type="Account" default="{ sobjectType: 'Account' }" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    
    <!-- Fields for editing -->
    <form>
        <force:inputField value="{!v.account.Type}" class="elfForceEditable" />
        <force:inputField value="{!v.account.Rating}" class="elfForceEditable" />
        <ui:button label="Save" press="{!c.save}" />
    </form>
</aura:component>

Code Explanation:

This component binds the Type and Rating picklist fields to force:inputField. The class attribute (elfForceEditable) marks the picklists for custom enablement using jQuery. A save button is included to persist changes.

Component Controller

({
    init: function(component, event, helper) {
        var action = component.get("c.getAccount");
        action.setCallback(this, function(response) {
            component.set("v.account", response.getReturnValue());
            
            // Enable disabled picklists
            $('select.elfForceEditable').removeAttr('disabled');
        });
        $A.enqueueAction(action);
    },
    save: function(component, event, helper) {
        var action = component.get("c.saveAccount");
        action.setParams({ account: component.get("v.account") });
        action.setCallback(this, function() {
            console.log("Account saved successfully.");
        });
        $A.enqueueAction(action);
    }
})

Code Explanation:

The init method fetches the Account record and enables picklists by removing the disabled attribute using jQuery. The save method sends the updated Account data back to the server for persistence.

Apex Controller

public class PicklistController {
    @AuraEnabled
    public static Account getAccount() {
        return [SELECT Id, Type, Rating FROM Account LIMIT 1];
    }
    
    @AuraEnabled
    public static void saveAccount(Account account) {
        upsert account;
    }
}

The jQuery snippet $('select.elfForceEditable').removeAttr('disabled') ensures that the picklists are editable. This workaround works in environments like the Napili Community Template, where jQuery is preloaded.

See also: What is a Salesforce Certified Administrator?

Key Insights

1. Use the Correct Attribute Type: Ensure the attribute in your Lightning Component is bound to the correct sObject type (Account, Contact, etc.).
2. Debug Disabled Fields: If fields like picklists appear disabled, consider using a jQuery workaround.
3. Styling Consistency: Add appropriate classes (e.g., form-control) to maintain UI consistency.

By understanding these nuances, you can effectively utilize force:inputField to bind and display sObject fields in your Lightning components.

See also: Salesforce Technical Lead Interview Questions

Summing Up

Using force:inputField in Lightning Components allows developers to easily bind Salesforce object fields to the user interface, providing a seamless way to handle standard Salesforce fields within Lightning. By leveraging the force:inputField component, you can create editable fields that automatically handle field types such as picklists, text, and more, without writing complex code. However, challenges such as picklists rendering as disabled can arise, but these can be overcome with simple solutions like jQuery workarounds. Overall, force:inputField offers a powerful and flexible tool for building interactive and user-friendly interfaces in Salesforce Lightning.

CRS Info Solutions offers a comprehensive Salesforce training in Pune, designed to help you build the necessary skills to excel in the Salesforce ecosystem. Our program covers everything from interview preparation and certification exam guidance to the latest industry developments, ensuring you are well-prepared for the job market. We provide daily notes and recorded sessions, so you can access the material whenever needed. With mock interviews and practical training, we focus on equipping you with hands-on experience and job-ready expertise. Our experienced trainers, who have mentored over 12,000 students, are dedicated to your success.

Sign up for our free demo session today and begin your Salesforce journey with CRS Info Solutions, where expert training and personalized mentorship will help you achieve your career goals.!!

See also: Infosys LWC Developer Interview Questions

Why Salesforce is a Must-Learn Skill in Pune?

Pune has secured its place as a major player in India’s IT sector, attracting multinational corporations and creating a continuous need for skilled professionals. Salesforce CRM, being one of the most popular platforms, is central to this growing demand. Salesforce training in Pune provides a unique opportunity to tap into the city’s thriving job market. Leading companies such as Deloitte, Accenture, Infosys, TCS, and Capgemini are consistently in search of certified Salesforce experts. These organizations rely on professionals skilled in Admin, Developer (Apex), Lightning, Salesforce Marketing Cloud, CPQ, and Integration to efficiently manage and optimize their Salesforce environments.

The demand for certified Salesforce professionals is growing rapidly, and they enjoy highly competitive salaries in Pune. Salesforce developers and administrators in the city benefit from some of the best pay packages in the tech industry, making Salesforce a valuable and promising skill. Earning your Salesforce certification from a reputable training institute will significantly improve your chances of landing high-paying roles and boosting your career trajectory.

Why Choose CRS Info Solutions in Pune?

CRS Info Solutions is one of the premier institutes offering Salesforce training in Pune. We provide a comprehensive curriculum that covers Salesforce Admin, Developer, Integration, Marketing Cloud, CPQ, and Lightning Web Components (LWC). Our expert instructors offer not just theoretical lessons, but also practical, hands-on experience to prepare you for real-world challenges. At CRS Info Solutions, we are dedicated to helping you become a certified Salesforce professional, ready to embark on a rewarding career. Our well-rounded approach ensures that you meet the requirements of top companies in Pune. Begin your journey today and become a certified Salesforce expert.