This is a demonstration of the capabilities of JavaScript as used within the Salesforce.com platform. This provides practical examples of JavaScript Remote Actions, DOM Manipulation, and Libraries to make development considerably easier. These examples are shown in the context of a custom VisualForce page as well as being integrated into a standard Salesforce page.

The practical example of the demonstration is to quickly add products to an opportunity. This is not production ready. The intention is to give a developer guidance and real world examples of how to leverage JavaScript and RemoteActions in Salesforce.

As seen at Denver Developer User Group on 7/31/2013. ##File Explanations

• pages/oppProductQuickAdd.page - This is the VisualForce page where we display and edit the products assigned to an opportunity. This is currently setup to be used in the standard opportunity page layout, however it can be easily converted to a standalone VF page by defining the opportunity record Id here.
• classes/oppProductQuickAdd.cls - This is the Apex class where will house all of our server sided methods. Notice the VF Page references this controller as an extension, while using the standard opportunity controller.
• staticresources/oppProductQuickAdd_js.resource - This is the main JavaScript file for the demo. This file performs all of the DOM Manipulation, Remote Action calls, and actions which take place within the UI.
• staticresources/oppProductQuickAdd_css.resource - This CSS file contains some custom styles used within the UI.
• staticresources/jsplugins.resource - This zip file contains all of the JavaScript / CSS Libraries we are using. It's contents can be easily viewed here
• staticresources/home_page_component_injection.js - This JavaScript is injected into the standard Salesforce page by using a home page component added into the Sidebar layout.

##Editing Standard Page DOM / Cross-Domain Considerations

• Adding a VisualForce page into the standard page layout is simple, just use the WYSIWYG Page Layout editor. Unfortunately, this loads your VisualForce page (from the domain c.< instance number >.visual.force.com) into the standard page (from the domain < instance number >.salesforce.com). This complicates our life, as iframes from a different domain are isolated within the browser. You cannot parse the contents nor execute any functions using JavaScript from one domain to the other.
• Our solution to this is to use the HTML5 method window.PostMessage. This allows the passing of messages via the browser's main window object. You will have a listener method on the standard salesforce page and another method to send a message from the iframe.
• The pertinent JS for this can be viewed at iframe side and standard page side

##Replicating this demo in your own Development Org

• First deploy these files using your favorite method. Eclipse IDE, MavensMate, or plain old copy pasting into the Setup UI.
• Now you should be able to view the VisualForce page and see it working by pasting in a valid Opportunity record Id and swapping the comments here

• Add the VisualForce page to the Opportunity layout by going to Setup -> Customize -> Opportunities -> Page Layouts -> Opportunity Layout, clicking Edit, selecting Visualforce Pages in the WYSIWYG Editor and dragging it down to somewhere in the page layout where it can be 100% width and ~400px tall. Click Save.
• Now you should be able to see the quick product add UI on the standard layout page. Make sure to fix this, if you edited it earlier. You should notice a UX bug pretty quick. The standard Opportunity Detail section does not update with the changes from your Remote Action updates. This is where we need to get creative with the cross-domain mumbo jumbo.
• So what can modify the DOM on the Standard Page? Javascript on the standard page! How do we do that? We can inject via a homepage component with the type HTML area. The Procedure for this is to go to Setup -> Customize -> Home -> Home Page Components -> New Custom Components, then create a new component with name OppQuickAddInjection with type HTML area. Then you can check the Show HTML checkbox in the editor and paste in this JavaScript. Select Narrow (Left) Column and hit Save.
• Now we need to add our new component to the sidebar layout by Going to Setup -> Customize -> Home -> Home Page Layouts, editing the appropriate layouts, checking OppQuickAddInjection and hitting Next & Save.
• In order to show this custom component on all pages we have to tweak a setting located at Setup -> Customize -> User Interface. Check "Show Custom Sidebar Components on All Pages" and hit save.
• We now have a JavaScript listener on all pages looking for a message from our VF Page in an iframe. Once it receives this message it will update the appropriate DOM element with the new data.
• When you go back to the opportunity page and use the widget you should see the Opportunity Detail "Amount" field changing as you make updates in the widget.