Author Archives: sdrucker

About sdrucker

Founder/President of Fig Leaf Software, a Washington-DC based veteran-owned small business providing I.T. services and solutions around Acquia, Adobe, Google,, Sencha, and Paperthin.

Using optgroup in lightning:select


Grouped Options in Salesforce Mobile

Every coding framework/toolset has strengths and weaknesses. There are some incredibly powerful things that you can do very simply, but often times there are incredibly simple things that require more brainpower (and a lot more coding) than should really be necessary.

Unfortunately, grouping options read from in a Salesforce lightning:select control falls into the latter category.

In order to achieve the grouping effect, as seen in the screenshot at right, I needed to pull data using Apex, group it client-side into an array of objects, and then loop through that array of objects in the lightning component.

In this use-case, we’re working with a custom object named Beer__c with a field named Type__c that holds our types of beer, e.g. Ale, Lager, Stout, etc.

Why beer? Because beer is both the cause and solution to all of our problems. Clearly.

Step 1: Ordering Apex Results

public with sharing class BeerContacts {

   public static List<Beer__c> getBeers() {
     return [ 
       select Id,Name,Type__c,Country__c
       from Beer__c
       order by Type__c,Name

Step 2: Group the Results into an Array of Objects

    doInit : function(component, event, helper) {
            function(response) {
                // transform into object array
                var result = [];
                var groupName = "";
                var thisGroup = {items : []};
                for (var i=0; i<response.length; i++) {
                    if (groupName != response[i].Type__c) {
                        if (thisGroup.items.length > 0) {
                        groupName = response[i].Type__c;
                        thisGroup = {
                            Name: response[i].Type__c,
                            items : []
                        Id: response[i].Id,
                        Name: response[i].Name

Step 3: Output the Array of Objects into a lightning:select

<lightning:select name="beerId"
             label="Select Beer"
  <option value="">Select Beer</option>    
  <aura:iteration items="{!v.beers}" var="thisBeerGroup">
     <optgroup label="{!thisBeerGroup.Name}">
     <aura:iteration items="{!thisBeerGroup.items}" var="thisBeer">
         <option value="{!thisBeer.Id}">{!thisBeer.Name}</option>

Screenshots from Dev601: Programming Lightning Components

I recently completed revamping the Dev601: Programming Lightning Components course for Dev601 is a 450-page, 5-day instructor-led course that comprehensively walks developers through building custom extensions for Lightning Experience, Salesforce Mobile, and other platforms.

You learn how to build custom query-by-example interfaces using Apex, Lightning Data Service, and standard components…

You coordinate the display of multiple views using Application and Component events…

Build sophisticated forms with data validation and execute CRUD operations with Lightning Data Service…

And implement loosely-coupled components that are flexible enough to be assembled by non-programmers in Lightning App Builder…



Need some Lightning Component consulting/professional services? Contact my company, Fig Leaf Software, at

Turn an Ext JS 6 Segmented Button into an Activity Timeline with CSS

My Ext JS 6/Java project for the National Institutes of Standards (NIST) requires an “activity path” indicator. No such widget exists directly in Ext, so I created a CSS override to the ExtJS segmented button in order to give me what I needed. Ultimately I’ll make this more robust by converting it over to Sass and using Ext JS Sass variables, but the raw overrides are presented here for your consideration.

Ext JS button definition:

   xtype: 'segmentedbutton',
   cls: 'timeline',
   height: 40,
   items: [
       text: 'Step 1'
       text: 'Step 2'
       text: 'Step 3'

CSS overrides:


    /* white right-facing triangle */
    .timeline .x-segmented-button-item-horizontal:before {
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    left: 2px;
	    top: 0px;
	    border-style: solid;
	    border-width: 19px 0 19px 19px;
	    border-color: transparent transparent transparent #fff;
	    z-index: 0;

	.timeline .x-btn-default-small {
		border: 0px !important;

	/* overlay right-facing triangle of standard button color, leaving
	edges of white right-facing triangle */
    .timeline .x-segmented-button-item-horizontal:after {
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    left: 0px;
	    top: 0px;
	    border-style: solid;
	    border-width: 19px 0 19px 19px;
	    border-color: transparent transparent transparent #5fa2dd;
	    z-index: 10;

	/* white arrow overlay to left of first button */
	.timeline .x-segmented-button-item-horizontal:first-child:after {
		 border-color: transparent transparent transparent white;

	.timeline .x-segmented-button-item-horizontal:first-child:after, .timeline .x-segmented-button-item-horizontal.x-btn-pressed:first-child:after {
		 border-color: transparent transparent transparent white !important;

	.timelinebutton.x-btn-pressed:after {
	    border-left-color: #477aa6;

 	.timeline .x-segmented-button-item-horizontal.x-btn-pressed + .x-segmented-button-item-horizontal:after {
 		border-color: transparent transparent transparent #477aa6;

 	.timeline .x-segmented-button-item-horizontal.x-btn-pressed:after {
 		border-color: transparent transparent transparent #5fa2dd;

 	/* eliminate right edge border that Ext JS puts into place. */
 	.timeline .x-btn-focus.x-btn-pressed {
 		box-shadow: none !important;

 	/* set hover of triangle to standard hover color of button */
 	.timeline .x-btn-over + .x-segmented-button-item-horizontal:after {
 		border-color: transparent transparent transparent #5795cb;

My Review of Alien:Covenant

(mild spoilers)

I desperately wanted to like Alien Covenant, if not simply for the fact that they killed off James Franco within the first 5 minutes. Unfortunately, I found it to be a grossly derivative rehashing of “best of” moments from other Alien and rogue AI movies. By the time the credits roll, it’s clear that the “Engineers” from Prometheus not only developed the xenomorphs, but also created a virus that activated in 1987 and wiped out all creativity in Hollywood.

The plot is basically this:

In about 100 years, humanity has advanced to the point where we can create huge interstellar spaceships crewed with absolute morons, Danny McBride, and the daughter of actor Sam Waterston. A solar flare interrupts their trip so that they can receive a recorded message from the sole survivor of Prometheus mission singing “Country Roads” and change course to investigate.

No, I am not making this up.

Once they arrive it becomes quite evident that not a single member of the crew or the ship’s other 2000 inhabitants who are tasked with colonizing another planet, were ever trained in exobiology. Also, none of them have apparently ever seen a James Cameron or Ridley Scott movie before. They all received automatic weapons training, however. So I’m thinking that in the year 2100, everyone is a Republican.

On the bright side, the crew member who lights up a Marlboro on the strange, new planet is the first one to die.  Apparently he never got the Surgeon General’s memo that smoking and alien spores are bad for your health.

This, of course, is followed in short order by the blatant ignoring of quarantine procedures and series movie continuity.  Also, we see the use of firearms within a spaceship because in the future, there’s nothing that could possibly go “boom” on a spaceship. Oh, wait… no.

Anyway, the surviving crew members meet up with the android “David” from Prometheus who’s been living on this alien world for 10 years. Apparently, “David” has developed a deep hatred of humanity because his creator foolishly gave him access to Facebook and Instagram. This triggers his built-in HAL-9000 subroutines to further drive the plot towards an ending that should surprise absolutely no one at all.

In summary, a more appropriate title for this movie would have been “Alien: Been there, done that.”

Developing Skills for Amazon Alexa with Adobe ColdFusion.

Topics include:

  • Creating Skills for Amazon Alexa
  • Using the Amazon Skills Kit (ASK)
  • Supporting Skill Cards
  • Developing Custom Skills
  • Developing Custom Intents
  • Defining Slots
  • Defining Utterances
  • Using Built-In Intents
  • Choosing the Invocation Name for a Custom Skill
  • Creating the ColdFusion Web Service to Handle Alexa Requests
  • Registering your Skill in the Developer Portal
  • Configuring your Endpoint
  • Testing the Skill


See the recorded presentation here:

Download the source code here:

If you’d like to have an Alexa skill designed and developed by Fig Leaf Software, please mail us at

Integrating Ext JS 6, Sencha Architect 4, and TinyMCE

Note: This is a follow-up to my post from 2014

I’ve re-packaged and enhanced the plugin as a Sencha Architect Extension (.aux) file.

New features include:

  • Ext JS 5.x/6.x compatibility
  • Sencha Architect 4.x compatibility
  • The TinyMCE editor now appears directly within the design canvas of Sencha Architect
  • Added support for new TinyMCE4 features (including the Premium Spell Checker plugin)
  • Added support to use smaller buttons in the TinyMCE editor.


By default, the editor will pull from the TinyMCE Cloud. See the usage notes in the file for install instructions.

You can download the extension from my repo here: