Note: I wrote this post in October 2016 but didn’t publish it because I was getting issues trying to making Eclipse work. However, after few months and do not find a solution, I decided to publish what I wrote. Maybe first steps could help others. An if you have the answer to my issue, I would really appreciate your help.

In addition I have included a super simple Lightning Component and how to integrate in the new Utility Bar that Spring ’17 bring to us.

When you develop some code, which is the tool you use for it? If you have never created some complex line of code, maybe you think that Developer Console allows you to do what you need. However, if your daily basis is programming, you need a tool outside of the org for that.

Nowadays I use Mavensmate, but on my early days I was an Eclipse fan, so when I knew that there is a beta version of Force.com IDE in order to create Lightning Components, I decided I had to check it. And this post is about it. Well, more about how to install it, as well as create a super simple Lightning Component.

First of all, I tried to open my Eclipse and create a project againts my org. But I got this error:

Oh my God!! It’s true that long time ago since I don’t open Eclipse (Juno in my case) !!! So first of all, fix it. How? Here there is a link that explain you about this Salesforce change, but here is what I did on my Mac.

1. Run java -version on cmd — old version as well !! So via System Preferences, click on Java icon and updated the version to 8 one there. And also download latest JDK.

Now java -version returned to me 8 one. So I tried again and this time it worked.

However I tried to install Force.com IDE for lightning and I got an error, so checked more instructions and I found this article and I realized that my version was older than 4.5, so decided to download a newer version. If this is not your case, jump next section

How to install eclipse

From here you can download latest Eclipse version (be sure you get it for Mac or PC depending on your machine OS). Well, actually you download an installer. When I executed it, I got an error message, so after looking at several blogs, like this one, I realized that I had to update the installer via the top right coner icon.

Then just select Eclipse IDE for Java Developers and click on install. Again I got an error with Neon, so I decided to try with another Product which version is higher than 4.5, so I chose Mars

How to install Force.com IDE

The installation is quite straight forward, you just need to follow below steps (find also the information here)

1. In Eclipse, click Help > Install New Software.
2. Add this new update site: https://developer.salesforce.com/media/force-ide/beta_eclipse45
3. Be sure that Group items by category checkbox is not selected.
4. Select the checkbox next to Force.com IDE (required).
5. If you have Apex Debugger licenses, select the checkbox next to Force.com IDE Debugger.
6. Select the checkbox next to Force.com Lightning Support
7. Click Next and start the installation.

20170203 Note There is new link to Eclipse IDE because it is no beta anymore as well as you can also find more information on Salesforce page as well. I tried with them as well, but no luck, still does not work.

How to work with Eclipse

Now you can create the project as usual, but you will realize that the folder structure looks different. It also have the aura folder. If we want to add / create the aura element we will find the entry as well.

How to create a Lightning Component

As you can find lot of information related to Lightning Components creation (including Trailheads) I will not explain in deep what it is a Lightning Component and how to create it. Just show you how you can develop something super simple in Eclipse.

Use Case – Employee List

I have a custom object, Employee, in my organization

And I would like to create a Lightning Component that list all my Employees and be able to insert on the Home tab, for instance.

20170203 Note: I was not able to make Eclipse work, so this code has been developed in Salesforce Developer Console. Do you want me to help anyhow and get some credits? Find my question on stackExchange as well as Developer Forums

Super simple Employee List Lightning component

I will create 2 component.

The first one will just show the FirstName and Surname of an Employee

<!-- EmployeeListItem -->
<aura:component>
    <aura:attribute name="employee" type="Employee__c"/>
    <li>{!v.employee.FirstName__c}{!v.employee.Surname__c}</li>
</aura:component>

And the second one will iterate over a list of Employees and make calls to the above component in order to show the information.

<!-- EmployeeList -->
<aura:component controller="EmployeeController" 
                implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="employees" type="Employee__c[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <h3>Employees</h3>
    <aura:iteration items="{!v.employees}" var="empl">
       <c:EmployeeListItem employee="{!empl}"/>
    </aura:iteration>
</aura:component>

But for that, it needs to retrieve the information somehow. That’s why we have the reference to the server side controller EmployeeController.

/**
* @agarciaodeian
**/

public with sharing class EmployeeController
{
    @AuraEnabled
    public static List<Employee__c> getEmployees()
    {
        List<Employee__c> listRetrieved = new List<Employee__c>();        
        if(Schema.sObjectType.Employee__c.isAccessible())
        {
               listRetrieved = [SELECT Id, Name, FirstName__c, 
                                       Role__c, Surname__c 
                                FROM Employee__c];
        }
        return listRetrieved;
    }
}

Finally, in order to get the result, in the EmployeeList we execute the action that initialize the list of employees making a call to the JavaScript controller

({
    doInit : function(component, event) {
       var action = component.get("c.getEmployees");
       action.setCallback(this, function(a) {
          component.set("v.employees", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

Once I have the code in the organization, I can create a project on Eclipse and I would see my components under the aura folder

If I open EmployeeList, for instance, I can see also the EmployeeListController.js tab as well. So it is easier and it is sorter than in the Developer Console.

How to add my Lightning Component to the Utility Bar

 

 

 

Once I have the Lighting Component, I can show the result in the Home page tab for instance

 

 

 

And now that Spring ’17 is arriving, we can include also our lighting components into the Utility Bar. Previously we had to create it via metadata and deploy but now it’s a matter of point and clicks.

Go to App Manager and edit your app. Now, one of its steps is the Utility Bar  and after clicking on Add button you can find same Lightning Components than in the App Builder.

For instance, standard like Flow (Beta), Manage, and Custom. So I select my custom lighting Component Employee List.

And … that’s all!! Now I have my super simple LC in the Utility Bar, so that I can see the list of all Employees from everywhere, including Salesforce Setup page.