Ever since Dreamforce 13 and the announcement of Salesforce1 I’ve been itching to get at some mobile dev. I couldn’t wait to get started on it when we returned. However my excitement dwindled when I realized that there was very little one could do from a development standpoint with Salesforce1 at that point. Fast forward to Dreamforce 14 and the announcement of Lightning Components. The fire was once again lit.

Today I begin my first tutorial in creating a simple lightning application. But first a bit of a disclaimer. I’m doing some things “wrong” and have every intention of coming back and cleaning up afterward. (And a few things may go awry as I remove bits of code that I want to present later but will do my best to not break it).

We will be building a simple Poll application that will allow you to present a question to your users. Each question will have a group of answers that can be voted on. In the end we will plug the whole thing into the streaming API so that as people vote, the results are updated in real time right in Salesforce1. (This is the part where you say “oooooohhh, aaaaahhhh” — it makes me feel better).

Coming in the Summer 15 release is the Lighnting App Builder. We will build a very simple component and make it available for use with this new feature.

For this tutorial you will need a developer org that has Summer 15 features. (Currently only available as a pre-release org), and a familiarity with HTML, CSS and Javascript. I don’t even understand it all 100% yet, but I’m getting there. (I won’t tell if you won’t…)

First, admire the beauty that is Lightning App Builder (we won’t “use” it yet, but I just want you to see it and notice whats available).

• Click on Setup->Lightning App Builder
• It will give you a brief intro screen
• Clicking Next will prompt you to select a layout. This is a simple test app so I kept it simple and chose the 1 column layout.
• Clicking Next will ask you to give it a name. I call mine Poll of the Moment.
• Clicking Next brings you to the App Builder itself

Along the left hand side is a list of pre-made components. At this point in time there appear to be 5 “Standard” components: Filter List, Recent Items, Report Chart, Rich Text, and Visualforce. For this demo however, I wanted to see something completely custom so I didn’t choose any of them and therefore won’t cover them here.

Underneath that area is the place where you’d find any custom components you write. THIS is what I wanted. Below that is the Custom Managed area, I’m assuming this is where any third party components you install from the app exchange will appear.

For now just click Back to Setup. We want to figure out how to get a simple custom component to appear in that list. I will show you how to do that.

We will need to use the Developer Console to create our Lightning Component. If you’re not familiar with how to get there, click on your Name and choose Developer Console. A new window should open up and this is where we will write our code. In the new window select File->New->Lightning Component.

• A small dialog box will pop up asking us to name the component. I called mine “PollItem” (notice the case and no spaces. I believe you aren’t allowed to have spaces in your names, so using a “camel case” makes it at least easier to read). Enter a description if you want to, we’re used to entering descriptions for everything right?
• Clicking Submit will open a couple tabs in our console.
• Click on the tab labeled “PollItem.cmp” — you will notice that it has already populated some minor code for us.

The tags that it created should look something like this:

<aura:component >

</aura:component>

For part one of this example we will keep it very low key and simple. Lets add a heading.

<aura:component >
    <h1 style="text-align:center">Poll of the Moment</h1>
</aura:component>

With this, it isn’t much and isn’t very useful, but it *is* a new component. Albeit its always going to have that title, not be interactive at all and completely boring and useless. Matter of fact we can’t even use it in the App Builder yet. If you were to save this and hop over to App Builder, it would not yet appear in the Custom Components area. We are going to remedy that right now. Lets get it ready for Lightning App Builder, that way we can add it to an app, view it in Salesforce1 and then begin writing code so we can see how what we write affects our app in SF1.

In order for our component to be available to to the App Builder, we need to tell Salesforce where this component can be used and the type of component it is. This is done with a very simple declaration: implements=”flexipage:availableForAllPageTypes” — so now we should have:

<aura:component implements="flexipage:availableForAllPageTypes" >
    <h1 style="text-align:center">Poll of the Moment</h1>
</aura:component>

While we are at it, lets make it so that our admin can title the page whatever they want. This will be done by creating an aura:attribute tag to hold the title of the page that the admin is going to type in when they configure the component in App Builder. But first, an aura:attribute is like a variable for components. They will hold values that can be retrieved or set within the component. Since we are creating a title for this component lets just call it “title” and will be string of characters:

<aura:component implements="flexipage:availableForAllPageTypes" >
    <aura:attribute name="title" type="String" />
    <h1 style="text-align:center">{!v.title}</h1>
</aura:component>

Now that we’ve added just a simple touch of interactivity so that the admin can specify a title, we need to tell the App Builder which properties are available to be set via App Builder. This is done with a new component type called a design. You’ll notice on the far right side of the developer console there is a menu. Make sure you are in the PollItem.cmp tab and click over on that menu on the Design button. This will open a new tab automatically called PollItem.design and will look like this:

<design:component>
	
</design:component>

We need to tell App Builder about our Title field that the admin will be able to set. We do that like so:

<design:component>
    <design:attribute name="title" label="Title" Description="Title for the component on the page" />
</design:component>

Before we hop back over to the App Builder, I want to point out one of the things I’m doing “wrong.” You will notice that I have some style tags in some of my markup. I prefer to work this way when developing so I can affect just the pieces I need to. Once happy with my styling and going production ready, any inline styles I’ve created will be ripped out and placed in the Lightning Component’s CSS file.

Save your files and hope back over to the App Builder. Choose the single column layout as you did earlier in the tutorial, give it a name, (Poll of the Moment sounds good). You should now see your custom component in the App Builder listing. Drag it to the panel in the middle of the App Builder screen. You will see our Title field become editable on the right hand side. Enter a title for our page. (Current Poll works). Lastly click Save and then click Activate. A final dialog will pop up allowing you to give the Salesforce1 menu option a name for the app. It should default Poll of the Moment (if that’s what you entered a few minutes ago).

Fire up Salesforce1 and when you go to the main menu under the Apps section, you should see your new app. Tap on it and bask in all your glory. You’ve just added your first app to Salesforce1 using the App Builder and Lightning components.

Up next, we’ll create our Poll Object and Options and display the latest one on the screen for our users to see. We still have to add the capability to vote, and finally tie it to the streaming API for a nice finishing touch.

Until next time — I’m out.

:wq!