Get Set, Go with VS Code for Salesforce

Salesforce have stopped the support for Eclipse IDE and has introduced the extension in VS Code. This is the only tool that is available from Salesforce where you can build Lightning Web Component. 

I have tried to make it easy by creating step by step instructions. 

Install the following:

1. Java-8 
4. Salesforce Extension in VS Code

Set path in the environment variable for Java & CLI.

Create Salesforce Project:

1. Open VS Code. Press Ctrl + Shift + p buttons. You will see command palette on the top. Type SFDX: Create Project with Manifest and select it.

2. Enter the project name.

3. Select the workspace where you want to create the project. In my case I have selected SFDC Workspace.

4. A project will be created. All the metadata is stored under force-app -> main -> default folder.

5. In this step you need to do the authorization of the org. Press Ctrl + Shift + p buttons, Type SFDX: Authorize an Org in command palette and select it. It will ask for login URL. Select Project Default if it is Dev/Production org.

6. It will ask to set the default alias name for the org. In my case I have set it as NumaanDevOrg. Set the name and hit enter. It will authorize a Salesforce org by opening the login page in browser.

7. Specify the metadata that you want to retrieve by opening the package.xml file in metadata folder. Right click on the package.xml and select SFDX: Retrieve Source in Manifest from Org. There are many options to retrieve metadata, You can check the options here.

8. To deploy the metadata to Org there are two ways. One option is to press ctrl+s to save then right click on the file and select SFDX: Deploy This Source to Org. Second option is to deploy the metadata automatically on save (ctrl+s). To enable this feature, we need to config in VS Code. Go to File -> Preference -> Settings -> Click on Extensions -> Select Salesforce Feature Previews -> Click on Edit under Push-or-deploy-on-save option.

Enjoy coding....

Dynamic Fields View in Lightning Component

Are you trying for dynamic fields view in Lightning Component then you are on the right place. I was having this requirement to get the fields of the object dynamically but this feature is not yet available in lighting so I have build it myself.

We will leverage $A.createComponents of lighting. In lighting if you want to add a div to the component then you need to create it as component.

Lets start with the code that we need to put in.

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >  
   <aura:attribute name="fieldsMap" type="Map"/>  
   <aura:attribute name="outputFields" type="Aura.Component[]"/>  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
   <div class="slds-form slds-form_stacked">  

In this component we are having two attributes one is to store the field & its value and second is to store the dynamic components. Map of fields will like this {"Name":"Numaan","Email":""}.

Component Controller:

   doInit : function(component, event, helper) {  

Simple JS controller which contains doInit method. This is called on the intial load of the component. We will directly call the helper create component method. All our magic is happening in the helper.

Component Helper:

    createComponents : function(component) {
        var fieldsMap = component.get("v.fieldsMap");
        var fields = Object.keys(fieldsMap); 
        var newComponents = [];
        //Building the structure of component
        for(var i=0;i<fields.length;i++){
                ["aura:HTML", {
                    tag: "div",
                    HTMLAttributes:{"class": "slds-form-element"}             
                ["aura:HTML", {
                    tag: "label",
                    HTMLAttributes:{"class": "slds-form-element__label"}    
                ["ui:outputText", {
                    "value": fields[i]
                ["aura:HTML", {
                    tag: "div",
                    HTMLAttributes:{"class": "slds-form-element__control"}    
                ["aura:HTML", {
                    tag: "input",
                    HTMLAttributes:{"type":"text","disabled":"true","class": "slds-input","placeholder":fieldsMap[fields[i]] }    
        //Creating the components in one shot
        $A.createComponents(newComponents,function(components, status, errorMessage){
                if (status === "SUCCESS") {
                    var outputFields = [];
                    for(var i=0;i<components.length;i+=5){
                        var divComp = components[i];
                        var labelComp = components[i+1];
                        var outputComp = components[i+2];
                        var div2Comp = components[i+3];
                        var output2Comp = components[i+4];
                        labelComp.set("v.body", outputComp);
                        div2Comp.set("v.body", output2Comp);
                        var tddd = [];
                        divComp.set("v.body", tddd);
                else {
                    // Show error message
                    console.log("Error: ");

If you see in the above helper JS you will find that I am first building the structure and then creating the components. It is always a good practice to create the structure first and then call the $A.createComponent, by doing this you will increase the performance of your component onload. I have used the SLDS for styling.

Lightning App:

We will create a lighting app to test the component which we have built. I am passing the static fields and its value to the <c:DynamicFieldsView /> which we have created.

 <aura:application extends="force:slds">  
   <aura:attribute name="fieldsMap" type="Map" default="{'Name':'Numaan','Email':'','Phone':'7XXXXXXXX0'}"/>  
   <c:DynamicFieldsView fieldsMap="{!v.fieldsMap}"/>  

Component Preview:

Pretty simple isn't it. Use the lightning design system to modify the look and feel of the component.