A Few Tips When Developing Lightning Components in Salesforce

UPDATE: Well it looks like I was wrong about appHostable as this actually works when I created a new developer instance. So looks like even though my original instance was on 16 it doesn’t have everything enabled. All good learning experience.

This week I have been diving into developing Lightning Components and have been really excited how I can build some common business UI as a re-usable component I can just drop onto the Lightening App Builder page.


The above image shows a test component I originally created when I was learning how to build one. It took me a little while to get things working due to changes in Salesforce software releases and working out what was the old way to code against what was new.

Interestingly if you watch the videos in the Lightning Components Trailhead the code shown in the video is out of date. I guess as things are still being developed on the platform, its difficult to keep in line.

First thing to watch out for is the implements attribute on aura:component. Originally it looked something like this:

<aura:component controller=”ContactController” implements=”force:appHostable” >

In the release 16 I am using the force:appHostable is now:

<aura:component controller=”ContacController” implements=”flexipage:availableForAllPageTypes” >

So be aware of this as your component won’t show in the list of Custom Components if you use the old implements.

The other tip is that you no longer need to create a Lightning Component Tab to implement your new component. This option is no longer available in the Setup / Tabs section and you should just create a Lightning app page, where you will automatically see your component in the left panel.

I hope these few tips help you as they were a couple of annoyances for me when I started out coding the components. If you have any questions of further tips then please leave a comment.


Tagged ,

ASP.NET v5 vs Meteor – Using Less

I was watching a video today from Microsoft going through Visual Studio 2015 and how well it works with bower, npm and grunt. This might be the case but it just seams to me that Microsoft are making development more time consuming.

It’s 2015 and developers should be able to focus on the web app they need to complete in the least amount of coding possible. I know there’s a fine line and there needs to be enough flexibility for the developer but I think Microsoft are giving the developer too much, which in turn makes them unproductive.

Recently I have been really enjoying developing on the Meteor framework. I’ve use C9 as my development environment and its been great.

I still develop in ASP.NET MVC so it’s very interesting to compare these two.

Anyway back to watching the video, they were explaining how you get less to work in an ASP.NET 5 project and I was amazed how many steps and how much code you have to write just to get it working.

So you have add a line to the package.json file to include grunt-contrib-less, then you have to write another line in your gruntfile.js and finally you have to add 10 lines of code (ok some are { } ) to get things working.

In Meteor you just call the command line meteor add less and your good to continue with your development. I can continue to stay focused on my project and don’t have to think which files I need to update to get a package working.

I would love to get your thoughts and comments on this.

Tagged ,

Meteor Resources to Get You Started

As with any new development platform or framework, it takes time to master. Getting the right information to start you off is the key to enjoying the ride and building successful web apps.

I have collected a number of references to sites and videos that I refer to and used to learn the way.

In the Beginning

If you know nothing about Meteor then to get you started I would recommend Discover Meteor eBook, which takes you through the main features of Meteor while you build an app. You can get the first part of the book for free if you sign up with your meteor.com account


Another great tutorial is provided by tuts+ and aimed at prototyping with Meteor. It’s a great primer for learning though.


BulletProof Meteor is a good turtorial that goes deeper into MongoDB and NodeJS, so recommended after you have completed Discover Meteor.


Learning Resource

There’s a great selection of resources at https://www.yauh.de/best-learning-resources-for-meteorjs/ which has some great links, including resources on Javascript if your not experienced in the language yet.

Best resources to become a master is another great page for Meteor related websites, blogs, books, Youtube videos and communities.


Meteor Hacks has a growing resource of tutorials, hacks and projects.


Once you understand Meteor then Meteor Tips and Workarounds is a handy site for you to get some useful info.


Video Tutorials

Meteor tips has a complete video training course if you prefer this form of training. The course is very reasonable at $39.


You should defiantly subscribe to the Meteor channel on YouTube to get the latest information and see videos from Dev Shops and conferences.


Cheat Sheet

Patrick Leet as created a cool cheat sheet on GitHub that I reference and I highly recommend. It’s code with comments but helps you remember functionality. I would recommend understanding the structure of a Meteor app before using this though.


Meteor Packages

One of Meteor’s strengths is the ability to extend its features with meteor packages. So adding login accounts features or including Bootstrap is a breeze. AtmosphereJS is a fantastic site where you can search for these Meteor packages.


News Sites

The following news sites are a great resource to keep up with what’s happening in the Meteor world, so keep an eye on them.


Tagged ,

Meteor Project Startup Sheet

Recently I have been developing web projects in Meteor and really enjoying the platform. Whenever I develop in a new platform or framework I create a kind of crib sheet of commands I use to start a project up.

Here’s the list I use for Meteor:

  • meteor create <project name>
  • add folders to project – client [helpers, stylesheets, templates], lib [collections], public & server
  • meteor add jquery
  • meteor add bootstrap
  • meteor add iron:router
  • meteor add accounts-base
  • meteor add accounts-password
  • meteor remove autopublish
  • create server/publications.js
  • create client/template/application/layout.html
  • create lib/router.js
  • create server/fixtures.js
  • create client/main.js

In addition I have been experimenting with polymer, which you can add to your project with meteor add ecwyne:polymer-elements

Tagged , ,

Salesforce – Re-assigning Event Re-occurrence Instance

Utilising the Salesforce Calendar for events has many benefits compared to using Outlook.

One of my clients came across a limitation recently when they create a weekly re-occurring event for their team member. The problem is that when the staff member cannot attend the appointment they then need to re-assign it to someone else.

With the current version of Salesforce you cannot do this, you can only reassign the complete series to someone else.

The good thing is that with a bit of research I found that each occurrence is a record. So my first attempt was to find the event and then using a Visual Force page I asked who they want to reassign it to.

I wrote some Apex code to update the record to the newly assigned user, but the Salesforce business rules do not allow this.

So the solution was to clone the event into a new object, delete the original and insert the new. This worked beautifully.

public class ReassignEventController

    public String assignTo { get; set; }

    public List getUsers() {
        List options = new List();

        for(User u :[SELECT Id, Name FROM User]) {
            options.add(new SelectOption(u.id, u.Name));
        return options;

    public Event getEvent() {
        return [SELECT Id, Description, Owner.Id, Owner.Name FROM Event
                WHERE Id = :ApexPages.currentPage().getParameters().get('id')];

    public PageReference reassign() {
        System.debug('Save clicked: ' + assignTo);

        Event ev = [SELECT Id, WhoId, WhatId, Subject, 
                    Location, IsAllDayEvent, ActivityDateTime, 
                    ActivityDate, DurationInMinutes, StartDateTime, 
                    EndDateTime, Description, AccountId, OwnerId, Type, 
                    IsReminderSet FROM Event
                WHERE Id = :ApexPages.currentPage().getParameters().get('id')];
        ev.OwnerId = assignTo;

		Event ev2 = ev.clone(false,true);
        ev2.OwnerId = assignTo;

        Insert ev2;

        Delete ev;

        PageReference redirecturl = new PageReference('/' + ev2.Id);

        return redirecturl;

Once the event has been created then it redirects to the newly created one details page.

The Visual Force page is very simple and I will probably include this in the Event details page.

<apex:page controller="ReassignEventController" >
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection title="Re-assign Event to User" >
                <apex:outputField value="{!event.Owner.Name}" />
                <apex:selectList label="Assign to" id="assignTo" value="{!assignTo}">
                    <apex:selectOptions value="{!users}" />
                <apex:commandButton action="{!reassign}" value="Re-assign" />

I hope this helps you if you come across the same situation too. Leave a comment if you need help.

Tagged , , ,

The Road to Become a Salesforce Developer

If you are considering becoming a Salesforce / Force.com developer and confused how to get started then have a look at my chart that shows the skills you need to learn and the approach I am taking.

I will post enhancements to this from feedback and my own experiences.

The Road to Become a Salesforce Developer

Tagged , ,

Integrating Google Maps V3 into a VisualForce Page

I recently had a requirement to implement a Google Maps view for an Account and thought I would share the code I wrote to implement this functionality.

Firstly I needed to create a Visual Force Page containing the same structure as the default page, which is easy with just one line of code:

<span class="kwrd">&lt;</span><span class="html">apex:detail</span> <span class="kwrd">/&gt;</span>

The rest of the implementation requires a bit of Javascript to convert the UK Postal code into coordinates and then generate the map.

To convert a Postal code into coordinates you need to use the geocoder object:

<span class="kwrd"> var</span> geocoder = <span class="kwrd">new</span> google.maps.Geocoder();
   address: <span class="str">&quot;{!Account.BillingPostalCode}&quot;</span>
   }, <span class="kwrd">function</span>(locResult) {
     <span class="kwrd">var</span> lat1 = locResult[0].geometry.location.lat();
     <span class="kwrd">var</span> lng1 = locResult[0].geometry.location.lng();
     <span class="kwrd">var</span> myLatlng = <span class="kwrd">new</span> google.maps.LatLng(lat1, lng1);
     <span class="kwrd">var</span> myOptions = {
       zoom: 14,
       center: myLatlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     <span class="kwrd">var</span> mapComp = document.getElementById(<span class="str">&quot;map_canvas&quot;</span>);
     mapComp.style.width = <span class="str">'900px'</span>;
     mapComp.style.height = <span class="str">'500px'</span>;
     <span class="kwrd">var</span> map = <span class="kwrd">new</span> google.maps.Map(mapComp, myOptions); 
     <span class="kwrd">var</span> marker = <span class="kwrd">new</span> google.maps.Marker(<br />             {position: myLatlng, map: map, title: address});  

The code above also generates a map object which can be rendered on the page.

The complete code sample can be downloaded here (don’t forget to put your own API key into the code.


Tagged , ,

Button Click Admin Podcast

If you are into Salesforce and Force.com like I am then I highly recommend you listen to the the Button Click Admin Podcast. Mike and Jared to an amazing job talking to people in the Salesforce community


I especially love hearing at the end of each podcast when they ask the interviewee what their favourite Dreamforce moment was.

Hop along to http://buttonclickadmin.com to subscribe to their podcast. I also recommend reading the 5 tips to landing a Salesforce.com Admin job

Salesforce Chatter Triggers

Today I wanted to create an app that would allow me to add my activity so that I can analyse my time at a future date. I started my trusty IDE to start mocking up the idea when I had to step back for a moment and think there must be a simpler way to do this.

I use Salesforce for managing my projects and I usually post chatter messages to myself and others. What if I could post a custom # message that would be intercepted and posted to a custom object.

No problem… I created a custom object called Activity:


Then all you need to do is go to Customize > Chatter > Triggers and add a new trigger on the Feed Item.It’s then a matter of looking for a #activity tag in the feed item body, pulling the entry out and inserting it into my Activity custom object.

<span class="lnum">   1:  </span>trigger ActivityPost on FeedItem (after insert) {
<span class="lnum">   2:  </span>    <span class="kwrd">for</span> (FeedItem f : trigger.<span class="kwrd">new</span>)
<span class="lnum">   3:  </span>    {
<span class="lnum">   4:  </span>        <span class="kwrd">if</span> (f.Body.startsWith(<span class="str">'#activity'</span>)) {
<span class="lnum">   5:  </span>            funcoder__Activity__c a = <span class="kwrd">new</span> <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; funcoder__Activity__c (
<span class="lnum">   6:  </span>                Name = f.Body.replace(<span class="str">'#activity'</span>,<span class="str">''</span>)
<span class="lnum">   7:  </span>            );
<span class="lnum">   8:  </span>                    
<span class="lnum">   9:  </span>            insert a;
<span class="lnum">  10:  </span>        }
<span class="lnum">  11:  </span>    }
<span class="lnum">  12:  </span>}

Now just go and enter a chatter message, for example #activity Developed an activity application in Salesforce.

Tagged ,