Tag: Visualforce

Finding What’s Hot and What’s Not with geolocation

Let’s see, clear some cobwebs, dust off some settings, check that it was indeed over a year since my last post. Yep, every thing seems in order. To kick off this post-a-versary, how about a quick exploration of Salesforce’s built in geolocation features, now that this data has been automatically added to the standard address fields!

A quick primer for the uninitiated, geolocation information is the location of something on the globe. Instead of using streets or landmarks, it uses latitude and longitude to find a location’s exact position. With this information at our disposal we can start to look at data on a geographic level. To illustrate this, we will look at a fictional company and how they can use geolocation to better outfit their sales people.

Path Skull

Introducing Path Skull, a fictional manufacturer of outdoor goods. They sell to retailers instead of directly to consumers so their sales people need to work to get their product into stores. To help them out when courting leads, they are going to use geolocation to figure out what sort of products sell well in a particular area. There is no need to show off your rugged sneakers when there is only demand for boots or your triple insulated sleeping bag when the market just wants to keep cool at night.

A clean sweep

All of this will depend on having the latitude and longitude of your accounts and leads. You do have that populated, right? No? That is fine because with Salesforce and Data.com it is all automatic, all you need to do first is to enable it. Go into the setting for your org and locate the ‘Clean Rules.’ For our examples, we will be activating ‘Geocodes for Account Shipping Address’ and ‘Geocodes for Lead Address’ but please activate whatever works for your use case. For more information, check out the official Salesforce release notes for the geocode clean rules.

Button Up

A new button on the lead will be the point of entry to this new functionality. Leads have a built in address field that will become the center of our area to report on. First off we will create a new visualforce page with the lead object as our standard controller and a new apex class to use as our controller extension. In the constructor of our extension we will use a distance query to find all the accounts within a 100 mile radius.

For this example I am just hard coding 100 miles, but for greater flexibility, consider a custom setting with the ability to change it on the results screen. Next we will grab the top five assets and products as well as the bottom five for the previously found accounts. The top five is the obvious one but the bottom five could just as well help you with what products not to even waste your breath on.

Once you have your data, it is up to you to display it in the most relevant way on your page. To wrap it all up, add a new button to the lead which opens the visualforce page and place the button on the lead’s page layout. With just a few lines of code your sales people now know what a lead may be interested in from the outset. How easy was it? With comments, the source for the controller turned out to be only 18 lines long.

The visualforce page to display the data as a pair of lists was only 15 lines long.

This was a simple example but with location-based SOQL queries and the location class, making use of location doesn’t have to be hard.

Using Gulp to Manage All Your Static Assets

The web development community continues its march towards more advanced methods and processes. CSS preprocessing, JavaScript testing and linting, image compression, and much more make up the web development landscape. Where does that leave you, humble Salesforce developer? Your JavaScript, css and images all get loaded into static resources and that’s it. Surely there is no way to integrate the Salesforce way with all these cool, new tools, right? Prepare to be mildly interested.

Now, before we get started, I am going to make a number of assumptions:

  • You are semi-comfortable with the command line
  • You have your own development environment. For reference, check Jesse Altman’s ideal explanation and for more depth, read the other articles he has in the series
  • You have your Salesforce code and metadata pulled down to your local machine for development
  • You have some way to deploy code (MavensMate, Force.com IDE, Ant migration tools, etc.)

Initial Gulp setup

The first part will be getting Gulp set up. To begin, you will have to download and install Node.js for whatever system you are using. After that is all set up, you are going to want to go into your Salesforce project and make a sibling folder to src. This is where we are going to load all of our assets, so name it appropriately. After that, make a folder for each asset type you are going to work with (i.e. js, css, img) and if you are going to use something like Sass or Less, then add a folder for that.

Next we are going to open the asset folder in a command line and enter the following commands:

The first command will bring up a series of prompts where you can enter some information on your project. The next two actually install Gulp.

Next we need to create gulpfile.js in the same folder and add these few lines

That file will set up the server (for now) so that typing the command gulp and navigating to localhost:8080 in a browser will show your asset directory.

Managing your dependencies

If you depend on a number of third party libraries, you may want to consider a package manager. If you don’t want this, it is not necessary for the article but it can be a huge help. I will be using a tool called Bower. Bower lets you search and download dependencies, much like npm, but with a focus on the front end. To get started with Bower, first we must run

What you actually install at this point is up to you, but for example I will install jQuery and Normalize.css. Like with npm, Bower has an init command that will prompt you for various values.

Local files, now with more cloud

Now that we have our files served up, we can use a bit of trickery to load from our little web server when developing locally, but then use the static resources in all the other environments. The basic premise of this is using a flag in a custom setting, something like Use Local, and either rendering a component with all the local assets, or the static resources. There are a lot of ways to actually lay this out, but for me, I will be using two sets of components so my CSS loads in the head and my JavaScript loads in the footer.

Before we even get to writing the components, we need a few things in place. First is the custom setting so you can turn the feature on and off. Next is some dummy static resources. Now this depends heavily on what you are going to do with your assets but for me, I plan on concatenating and minifying my JavaScript and CSS. I plan on zipping third party assets into their own file. For my purposes I will create a blank js file, css file, and zip file and upload it to the static resources. Once I get that done it is on to the components.

This design was originally from this GitHub repository for a Visualforce AngularJs Seed. The design was later refined by Peter Knole.

The story so far

If you have been following along you have all the bits and pieces set up. Now you need to put it together in a page and write up your CSS and JavaScript. The page can be anything, so long as it has the components for the CSS and JavaScript at the top and bottom respectively. Don’t forget to set the custom setting to true so you use your local files. If everything went well, then viewing your page should work. If it doesn’t, check that your browser isn’t blocking mixed content . If you really want to test, make a change to your CSS, save, then reload and see that your page changed without any long save times.

Example local page
I am not a designer

Building for now

You now can view your work in your own sandbox just fine, but what about everyone else? So this tutorial doesn’t become a colossal pain, we will be setting the custom setting to false to simulate the remote environment. Now, viewing the page shouldn’t look so good. That is because we haven’t done anything about the static resources. We are going to fix that, but we need a bit of help. First grab a few more dependencies:

Now for the script

To break that down, lets look at the tasks that were just added. The zip-vendor task  gets every file and directory in the bower_components folder, zips it up and puts it in the static resources. The process-css, and process-js task gets all our CSS and JavaScript files, concatenates them into their own files, minifies them, and then places them in the static resources. Once that is all set, run gulp build to rebuild the static resources. After that, you just need to get the files to the server however you are comfortable. For example, if you are using MavensMate, just run the compile.

Building for the future

There is so much more you can do than what I laid out. The tools and techniques of web development are constantly changing and shifting. This article was done so you can see a possibility. Nothing I have done is set in stone or even scratches the surface. The makers of jsForce, for instance, have a post I took inspiration from for deploying assets right from Gulp. There are also a wealth of tutorials on these tools as well as many others that can be added to your workflow.

I say to you now, welcome to the present age of web development, we’ve been expecting you.

Looping Slideshow Display With Visualforce and Apex Charting

Anyone ever seen pictures of west-cost start-ups with those TV screens front and center showing some sort of stat or metric? If it is a dev house maybe it is the builds, bugs, & deadlines. A sales firm may have revenue, opportunities and a highlight of recently closed deals. Either way, they are meant to highlight data and allow it to be consumed in a very passive manner, reading it as you pass by. Salesforce makes reports a breeze and dashboards are a snap too. However, what if you wanted to recreate that seamless look, without the tabs, browser UI, or any indication of what is driving the display at all? Sure, there are tons of articles that show you how to get PowerPoint to do that, but using stale data is for suckers. Let’s take a look at what some Apex, Visualforce and JavaScript could do for you.

We should start with the controller.

A good start but missing any real meat. Let’s look at what is there, shall we? Pretty much the only thing in this class so far is a nested wrapper class. This is just a convenient way to get data to the charts. Feel free to do your own thing if this isn’t your style. We better add a way to get some data.

This looks promising! This method grabs all the cases, groups them by priority, then counts the number of cases in those groups. We iterate over that data and toss it into that wrapper object from the prior code block. Add as many of these chunks of code as you want, one for each chart you feel like creating. We are almost done the controller, just one more piece.

This to-the-point bit of code is there to erase the current set of data so it can be refreshed. Remember what I said about stale data being for suckers? This prevents you from being a sucker. Put all of those together and you get a completed controller (mine has a second list of chart data because a one slide slideshow is boring).

On to the Visualforce. We will start off small again and build from there.

This is the base, telling the page to use the ChartController and to not show the header or sidebar. Remember, we don’t want this looking like a webpage or a browser, just a slideshow. Now we need a chart.

This is an apex chart. The width and the height shown here are based on my screen size and layout. If you have extra styling or branding on your slideshow (Trust me, you will want it. The end result of this is bare bones.) you will need to change these values to fit. The apex:chart tag also tells the page what data to use and the id will be used to keep the data fresh. The apex:pieSeries tag tells the page that the data comes from the data field on the wrapper and that the label comes from the name field. There is also the apex:legend tag which provides a legend in the position specified. Finally all of that is wrapped in a div that will provide us the means to allow for movement. Like with the controller, you need one of these for each list of ChartData that you created, just leave the ‘activeSlide’ style off the rest. We still need to code to bring this to life. Let’s begin with the styling first.

Simple stuff here. The ‘side’ class has an absolute position, a white background and is glued to the top left. Every slide has that and therefore, every slide is stacked on top of each other. The slide that also has the ‘activeSlide’ class rises to the top, thanks to its high z-index. To make these slides shuffle, we also need some JavaScript.

First off, I am lazy at times. Seriously, no joke. That is why I included JQuery, because it makes things so darn easy. The next bit sets up a JavaScript method named ‘refreshCharts’ that calls the controller method ‘refreshCharts’ and re-renders my two charts with that data. This is done with the apex:actionFunction tag and will automatically generate the appropriate code. After that, I set up another JavaScript method that will determine the next slide, remove the ‘activeSlide’ class from the currently visible slide, and add it to the next one. To set things in motion, I call that method every 5 seconds and the ‘refreshCharts’ method every 10 minutes. Mix it all together and cook at 350 degrees and your Visualforce should look like this:

What does this look like in action? A chart, then another chart. This is not worth a picture because a still image won’t show it in action and an animated gif can be staged. The best way to see this is to follow along and get this code into any developer account. After you do that, just type in the URL, ‘<YOUR_SALESFORCE_URL>/apex/<YOUR_VISUALFORCE_PAGE_LABEL>’. Tapping F11 should remove all of the browser UI and dragging the mouse to the right side will hide it from view. There you go, a live slideshow. This is the perfect project to dedicate some old hardware to.