Category Archives: Uncategorized

Building Uniquely Branded Lightning Component Single Page Apps for Salesforce Mobile

(part 1 of a 2-part series)

fwbfinalAt Dreamforce last week, Salesforce introduced a new feature that would enable administrators to more distinctly brand their Salesforce mobile apps.

As illustrated by the screenshot at right, that capability is actually available today through various CSS hacks, hand-wringing, and lots of tears.

Other titles that I’d considered for this post:

  • “Stuffing a round peg into a square hole”
  • “How to pull out all of your hair with maximum effort”
  • “I like to suffer”
  • “I should have become a patent lawyer”
  • “There be dragons here”

The fundamental problem is that the platform formerly known as Salesforce1 was clearly designed to render web pages (commonly referred to as Flexipages) and not single-page apps (SPAs). That’s why there’s no officially supported methodology (yet) for disabling the built-in “pull to refresh” feature, which can be quite convenient for refreshing web pages, but is inappropriate for single-page apps. There’s also lack of direct support for a “viewport” that would grab 100% of the visible screen, enabling developers to explicitly manage scrolling within their Lightning app.

Implementing Custom Branding in a Lightning App Builder Template

The first step in our branding odyssey is to create a Lightning App Builder template. This is a new feature in Winter ’18. The template defines drop target regions for Lightning App Builder components. About the only functionality that I’ve found that the app builder template will not support is (ironically) defining DESIGN properties on the template.

To define a template you need to:

  1. Add an implements=”lightning:appHomeTemplate” to the tag.
  2. Define a aura:attribute for each template region
  3. Define the template region in the DESIGN file

In order to implement the crazy branding, I also added the following global style to hide the flexipage page header, which by default consumes a fair amount of space at the top of the page:

<style>
 .oneAnchorHeader {
   display: none;
 } 
</style>

I also set a series of overrides to try and establish a “viewport” that occupied 100% of the width *and* height of the visible screen:

<style>
 .scroller.actionBarPlugin, 
 .oneFlexipage, 
 .flexipagePage,  
 .pageBody,  
 .mainbody, .mainbody > div {
    height: 100%
  }
</style>

Are we having fun yet?

Other global style overrides were added to remove some extraneous white-space as I’m trying to make use of every pixel in the phone form-factor.

Here’s the complete source code listing for the CMP file of the Lightning App Builder template:

<aura:component 
 implements="lightning:appHomeTemplate" 
 description="Friends with Beer Mobile Phone Template">
    
 <aura:attribute name="region1" type="Aura.Component[]" /> 
    
    <style>
        .oneAnchorHeader {
        	display: none;
        } 
        .scroller.actionBarPlugin  {
        	padding-bottom: 0px !important;
        }
        
        .scroller.actionBarPlugin, 
        .oneFlexipage, 
        .flexipagePage,  
        .pageBody,  
        .mainbody, .mainbody > div {
        	height: 100%
        }
        
        .oneFlexipage .pageBody {
        	margin-top: 0px;
        }
          
        .spacer-pull-to-load-more {
        	height: 0px !important;
        }
        
        .slds-table {
        	background-color: rgba(255, 255, 255, 0.3) !important;
        }
        
        .slds-card__header {
            margin: 0px !important;
            padding: 0px !important;
        }
        
    </style>
    
    <aura:handler name="render" 
                  value="{!this}" 
                  action="{!c.onRender}"/>
    
    
    <ui:scrollerWrapper class="maxHeight">
        <div class="mainbody" aura:Id="mainbody">
            <div class="fwbheader slds-align_absolute-center">
              Friends with Beer
            </div>
            {!v.region1}
        </div>
    </ui:scrollerWrapper>
    
</aura:component>

The corresponding design resource indicates the formfactors under which the region will be present:

<design:component label="Friends with Beer">
    <flexipage:template >
            <flexipage:region name="region1" defaultWidth="Small">
                <flexipage:formfactor type="MEDIUM" width="SMALL" />
            </flexipage:region>
    </flexipage:template>
</design:component>

Our template’s CSS resource is relatively tame by comparison. It loads a web font, styles the “Friends with Beer” bar, and sets the background image (beer, of course) for the app:

@font-face {
    font-family: 'Rambla';
    src: url('/resource/fwb/rambla/Rambla-Regular.otf');
}

.THIS .fwbheader {
    background-image: url('/resource/fwb/top-grain.png'), -webkit-radial-gradient(top center, circle, #9f5628, #5d2f17);
    background-repeat: repeat-x;
    color: #3a1515;
    text-shadow: 0px 1px rgba(255,255,255,.3);
    height: 50px;
    width: 100%;
    font-family: Rambla;
    font-size: 1.5em !important;
}

.THIS {
    background-image: url('/resource/fwb/background.png');
    background-size: cover;
}

.THIS .mainbody {
    position: absolute;
    width: 100%;
    height: 100%;
}

.THIS.maxHeight {
    height: 100%;
}

Disabling Pull to Refresh

You may have noticed that the template listens for the render event and fires off a controller function. The function, along with the use of ui:scrollerWrapper, intercepts the dragmove event that is fired when a user taps and drags the screen and prevents it from bubbling up to the native Salesforce mobile app.

({
    onRender: function(component,event,helper) {
        var cmpEl = component.getElement();
         cmpEl.addEventListener("touchmove", function(e) {
            e.stopPropagation();
        }, false); 
        var targetEl =  component.find("mainbody").getElement();
        targetEl.addEventListener("touchmove", function(e) {
            e.stopPropagation();
        }, false);       
    }
    
})

 
In my next post, we’ll review the Lightning components that were used to render data from Force.com, and how I was able to dock them into specific locations within the app. We’ll also discuss whether this approach is really viable on a going-forward basis or whether we should just file it away as an interesting hacking exercise that has run-amok.

And now, it’s time for a beer.

Happy coding!
 

 

 

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

ss1

See the recorded presentation here:
http://experts.adobeconnect.com/p8zcgm583fx/

Download the source code here:
https://github.com/sdruckerfig/CF-Alexa

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

ColdFusion and Node.JS – two great tastes that taste great together!

Fig Leaf Software recently delivered a hybrid ColdFusion – Node.js solution to one of our customers.

We decided to use a hybrid architecture for the following reasons:

  1. The customer expressed a preference for using ColdFusion to drive their CMS-based website.
  2. The website has several embedded, small AJAX applications that leverage data from an XML-based API that sits behind the customer’s firewall.
  3. Java-based app servers (ColdFusion) are particularly well-suited for dynamically assembling and serving web pages.
  4. Node.js servers are particularly good at implementing REST APIs and handling large volume, asynchronous data requests for non-cacheable dynamic data.
  5. The website/web apps do not require user authentication, therefore session sharing between different app server technologies was not an issue.
  6. Sharing the workload between CF and Node gives us more flexibility for scaling up the infrastructure in a more cost-effective manner with options for  potentially off-loading the Node service to cloud platforms such as Heroku.

wmata

 

New Books from Fig Leaf Software

Fast Track to ColdFusion 10/11 provides experienced web developers with the knowledge and hands-on practice they need to start building and maintaining dynamic and interactive Web applications using the ColdFusion application server. With over 25 hands-on exercises, this coursebook covers everything that you need to know in order to start building secure, scalable, dynamic, data-driven web sites as well as implement REST APIs to support mobile apps.
~300 pages
http://www.amazon.com/Fast-Track-ColdFusion-10-11/dp/1515067777

Fast Track to Sass and Compass
Whether you’re developing a static site, a dynamic site with a CMS (Drupal), or building an advanced web-based application with a Javascript framework (jQuery, jQuery Mobile, Sencha Ext JS, Sencha Touch, Angular, React.JS), you’ll find that Sass and Compass are indispensable tools for taming and optimizing your CSS. You’ll learn Sass and Compass by refactoring a very long and difficult to maintain single CSS file into a set of smaller, easier to manipulate .scss (Sassy CSS) files for optimal maintainability. You’ll also improve download and rendering times by producing minified production builds, base-64 encoding your images, and automatically merge multiple images into sprites.
http://www.amazon.com/Fast-Track-Compass-Steven-Drucker/dp/1515228770
~100 pages

Sencha Ext JS 5 Bootcamp in a Book teaches you everything that you need to know in order to build a cross-browser, x-device compatible, next-generation web application using nothing but Javascript and good intentions. This book contains over 60 hands-on exercises that cover nearly every aspect of developing enterprise-grade web apps using Sencha’s Ext JS 5 javascript framework.
~600 pages

http://www.amazon.com/Sencha-Ext-JS-Bootcamp-Book/dp/1511659580

More books coming soon!

Buy our new book – Sencha Ext JS 5 Bootcamp in a Book!

Sencha Ext JS 5 Bootcamp in a Book teaches you everything that you need to know in order to build a cross-browser, x-device compatible, next-generation web application using nothing but Javascript and good intentions. This book contains over 60 hands-on exercises that cover nearly every aspect of developing enterprise-grade web apps using Sencha’s Ext JS 5 javascript framework.

This book contains over 60 hands-on exercises that cover nearly every aspect of developing enterprise-grade web apps using Sencha’s Ext JS 5 javascript framework. Course files are downloadable from Github and Sencha Fiddle.

Table of Contents:

  1. Introducing the Course
  2. Introducing Ext JS 5
    • Implementing the 3-tier architecture
    • Reviewing features and capabilities
    • Reviewing the Ext JS examples
    • Introducing MVC and MVVM
    • Introducing the Class System
    • Generating App Scaffolding with Sencha Cmd
    • Using the API Docs
    • Debugging and troubleshooting your app
    • Getting Help from the Sencha Network
  3. Defining Views
    • Deep-Diving into the Class System
    • Working with DOM Elements vs. Ext Components
    • Using the Component Hierarchy
    • Instantiating a Viewport
    • Using the Border Layout
    • Defining Panels
    • Defining Toolbars, Buttons, and Menus
    • Handling User Events with ViewControllers
    • Working with Tab Panels
    • Supporting the “back” button with Routes
    • Working with Windows
    • Implementing a Dashboard
  4. Reading Complex Data from an App Server
    • Understanding AJAX and REST
    • Implementing View Models and Data Binding
    • Implementing Roles-Based Security
    • Defining a Data Model
    • Defining a Proxy
    • Reading Multiple Records into a Data Store
    • Using Chained Stores
  5. Visualizing Tabular Data in Grids
    • Defining a Grid
    • Using Grid Widgets
    • Implementing Data Pagination
    • Defining Grouped Grids
    • Enhancing Grouped Grids
    • Editing Data in Grids
  6. Generating Markup from Data
    • Working with XTemplates
    • Looping Through Data
    • Implementing Conditional Processing
    • Executing Inline JavaScript
    • Binding Custom JavaScript Methods to XTemplates
    • Performing Basic Calculations in an XTemplate
    • Binding a Template to a Component
    • Using the DataView
  7. Visualizing Hierarchical Data in Trees
    • Introducing the TreeStore
    • Understanding the NodeInterface Class
    • Implementing a Tree Panel
    • Implementing a Tree Grid
    • Working with Heterogeneous Node Types
    • Using Trees as an Input Mechanism
  8. Visualizing Data in Charts
    • Instantiating a Chart
    • Configuring Chart Axes
    • Configuring Chart Labels
    • Configuring Chart Legends
    • Using Chart Interactions
    • Working with Bar Charts
    • Working with Line Charts
    • Working with Gauges
  9. Maintaining State
    • Configuring the State Provider
    • Saving the State of Components
    • Adding State Management to Non-Stateful Components
  10. Creating Data Entry Forms
    • Creating Data Entry Forms
    • Defining a Form
    • Configuring Form Fields
    • Using the Combo Box Field
    • Sizing Fields with the Anchor Layout
    • Sizing Fields with the Form Layout
    • Assigning Default Configuration Values
    • Grouping Fields
    • Validating Input Data
    • Formatting the Data Validation Error Messages
    • Submitting Data to the Server for Processing
    • Binding Grids to Forms
  11. Theming your App
  12. Going into Production
    • Documenting your App with JSDuck
    • Unit Testing with Jasmine and Siesta
    • Generating Testing and Production Builds
  13. Appendix A: Configuring your Development Environment
  14. Appendix B: Congressional Earmarks Lab
  15. Appendix C: Proposal Manager Lab

Buy it today from Amazon.com at:
http://www.amazon.com/Sencha-Ext-JS-Bootcamp-Book/dp/1511659580/ref=sr_1_6?ie=UTF8&qid=1432283001&sr=8-6&keywords=sencha+ext+js

Now Hiring: Senior UX Developer / Practice Manager

Fig Leaf Software seeks to expand its team by hiring a Senior UX Developer / Evangelist.

Successful candidate will have at least one year of experience developing amazing front-end application GUI’s using at least two of the following:

jQuery, jQuery Mobile, Sencha Touch, Sencha Ext JS, Angular JS, Appcelerator Titanium, Cordova 3.5, Native iOS development, Native Android development

Experience with .NET, ColdFusion, PHP, Node.JS and public speaking/technical blogging a plus. 

You will work directly with Fig Leaf’s founder/president, Steve Drucker, to help us expand and scale this growing practice area.

Send resume and sample screenshots to sdrucker@figleaf.com