Skip to main content

Salesforce.com Backbone.js Re-skinning with a flat UI

Screenshot_2014-01-25-23-20-48

 

I have been prototyping with salesforce.com and Single Page Applications (SPA) via VisualForce.

SFDC has provided a great example her for getting started:

http://www2.developerforce.com/mobile/getting-started/html5#backbone

What I don’t like in particular is that it uses JQuery Mobile as the UI.  For whatever philosophical reasons, JQuery’s default theme hasn’t been updated since they feel their look and feel should be device agnostic.  It makes their UI look very dated.  So here is how to replace the theme with a flat one.

 

Download the JQuery Mobile Square UI Theme from here:

https://github.com/ququplay/jquery-mobile-square-ui-theme

 

Extract the zip file.  Create a zip file from the “generated” folder.

image

Rename this to something more meaningful like “jquery-mobile-square-ui-theme-master.zip”. 

Upload this as a Static Resource:

image

Set Cache Control to public if you intend to use this for a public site.

Within your visualforce page, comment out the reference to the original jquery mobile stylesheet, and add the css for the square UI theme.

<!-- ========= -->
<!-- CSS -->
<!-- ========= -->
<!--link href="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/css/jquery.mobile-1.3.0.min.css')}" rel="stylesheet" /-->
<link rel="stylesheet" href="{!URLFOR($Resource.jquerymobilesquareuitheme, 'jquery.mobile.squareui.css')}" type="text/css"></link>


 


These are the results.  The old style UI with the rounded edges are on the left.  The flat UI is on the right.


image

Comments

Popular posts from this blog

OBIEE 11g troubleshooting AdminTool

Launching the Admin Tool in 11g is no longer the simple click and launch procedure it used to be in version 10.  It used to be that you can just double-click on a .rpd file, and via the file association in Windows, the system will know to open the repository via the AdminTool.exe.Now the documentation states that the Repository must be launched via the Start Menu shortcut.  This the target of the shortcut on my system.C:\WINDOWS\system32\cmd.exe "/cC:\obiee\instances\instance3\bifoundation\OracleBIApplication\coreapplication\setup\bi-init.cmd coreapplication_obis1 2 && C:\obiee\Oracle_BI1\bifoundation\server\bin\AdminTool.exe"As you can see, opening the admintool now is tied to the context of the Core BI application that is administered through Oracle Enterprise Manager (EM).In setting up the Sample application, I had made a mistake in one of the steps.  As a result, I was not able to start up the BI services.  I could not even open up the Repository.  The only error…

Setting up a Kindle Fire HD in the US, for bringing back to Canada

This is what I’ve learned about trying to buy a Kindle Fire in the US.  Staples claims to sell it as a brick & mortar stock.  However, when I go and try to buy it from their website, it states that it will take 3 to 5 business days to ship it to the store.   I could order it from Amazon, but I don’t want to chance the delivery being late.  While walking around tonight, I saw the Kindle Fire HD on display at OfficeMax, and surprisingly they had stock.  The only drawback is that the state tax was charged, whereas had I ordered it online, I may not have been charge a tax depending on the state that I am in.I bought a prepaid Visa card from Target.  Another option is to use an Amazon.com giftcard but I haven’t tried it.From online, remove all other credit cards except my new US prepaid Visa card.  Associate it to a US address.From online, go to My Account > Manage Your KindleClick on Country Settings.  Then change the country.Reboot your Kindle.On the home page, go to Apps.  Click …

Mass Delete Picklist values in Salesforce

I’m a big fan of automation.  My philosophy is that any task that is repetitive and done over and over should be automated.One of the challenges in Salesforce is that while it is possible to add and updates picklist values, it is impossible to delete them.  Contrary to a lot of advice on the web, when a picklist value is omitted from the picklist object definition in a tool such as Eclipse, deploying the metadata to an organization does not delete the absent values.  It leaves them alone… which kind of makes sense.  The absence of an XML tag shouldn’t really mean to delete that value.Anyways, the inspiration came from this post.  http://johan.karlsteen.com/2013/04/20/mass-deleting-picklist-values-in-salesforce-with-ajax-javascript-hack/However, I wasn’t sure I want to run the javascript from some other domain.  It may work now, but who knows if that javascript will change in the future.The solution already asks for a javascript bookmark to be created, so we may as well put the entire …