Demystifying S-Controls and AJAX


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Demystifying S-Controls and AJAX

  1. 1. Demystifying S-Controls and AJAX Mike Dannenfeldt, Education Architect Track: New AppExchange Developer
  2. 2. Agenda <ul><li>S-Control Overview </li></ul><ul><li>AJAX Toolkit Overview </li></ul><ul><li>Getting Started w/S-Controls </li></ul><ul><li>Demo </li></ul><ul><li>Available Resources </li></ul><ul><li>Q & A </li></ul>
  3. 3. Introduction to S-Controls
  4. 4. What is an S-Control? <ul><li>An S-Control is a single custom web page created by a web developer and hosted within the Salesforce application. </li></ul><ul><li>An S-Controls can support any technology that a user’s web browser can support (HTML, Javascript, Java Applets, Flash, ActiveX, etc). After all it is a web page! </li></ul><ul><li>S-Controls power the customized functionality behind custom buttons and custom links. </li></ul><ul><li>S-Controls utilize the AJAX Toolkit and the AppExchange API to query and modify Salesforce data. </li></ul>
  5. 5. S-Control Types <ul><li>Custom HTML </li></ul><ul><ul><li>Write custom HTML/JavaScript to render your own pages or load an Active-X Control or Java Applet </li></ul></ul><ul><li>URL </li></ul><ul><ul><li>Reusable URL definition </li></ul></ul><ul><ul><li>Same interface as setting up a URL for a Custom Link: </li></ul></ul><ul><ul><ul><li>{!User.FirstName} </li></ul></ul></ul><ul><li>Snippet </li></ul><ul><ul><li>Reusable S-Control code </li></ul></ul><ul><ul><li>Can be any code: HTML, JavaScript, merge field references, formula functions, anything </li></ul></ul><ul><ul><li>Snippet code is included inline at runtime </li></ul></ul>
  6. 6. “Inline” S-Control on Detail Page <ul><li>Runtime </li></ul><ul><li>Only on Detail Pages, not Edit Pages </li></ul><ul><li>S-Control can contain custom html/javascript or reference an external URL </li></ul><ul><li>S-Control renders in an iFrame </li></ul>Yahoo Map S-Control inline in the Candidate detail page
  7. 7. Inline S-Controls on Detail Pages setup <ul><li>Include an S-Control in any Field Section in the Page Layout. </li></ul><ul><li>Set S-Control Properties on the Page Layout to control the iFrame display attributes. </li></ul><ul><li>Note: S-Control Snippets will not be available to add to page layouts. </li></ul>Double-click to open the S-Control Properties dialog
  8. 8. When to Use S-Controls <ul><li>Consider using S-Controls if you… </li></ul><ul><li>Want to streamline a common user process </li></ul><ul><ul><li>i.e. reduce the number of clicks </li></ul></ul><ul><li>Creating Web Services Mash-Ups </li></ul><ul><ul><li>i.e. yahoo maps and Salesforce </li></ul></ul>
  9. 9. When to Use S-Controls, cont’d <ul><li>Know that your process flow is closed loop </li></ul><ul><ul><li>i.e., no outside databases or data sources that aren’t web services enabled </li></ul></ul><ul><li>Have a small number of records to update or display </li></ul><ul><li>Unable to host custom ASP.NET or JSP web control </li></ul>
  10. 10. Some Cautions About S-Controls <ul><li>S-Controls are good candidates for UI enhancements, not full scale intensive integrations. </li></ul><ul><li>The User experience should always be kept central when designing and developing S-Controls. </li></ul><ul><ul><li>A poorly designed S-Control that performs slowly will frustrate Users </li></ul></ul>
  11. 11. Some Cautions About S-Controls, cont’d <ul><li>Only a skilled web developer should be creating and deploying S-Controls in your environment. </li></ul><ul><ul><li>Javascript can be tricky and time consuming to debug </li></ul></ul><ul><ul><li>Novice developers may struggle to get custom pages & scripts to behave the same across different browser types (IE, Firefox, etc) </li></ul></ul><ul><ul><li>User Experience should be thoroughly tested before deployment </li></ul></ul><ul><li>You support your custom S-Control code </li></ul>
  12. 12. S-Control Editor Walkthrough Functions Operators Insert merge field (not copy and paste) New Types for URL and Snippet Quick Save lets you continue editing Validate expression syntax
  13. 13. Universal Computing Human Resources Scenario <ul><li>Recruiters at UC manage open positions by working through the Application records associated to a Position. </li></ul><ul><li>When a recruiter is interested in contacting a Candidate, the recruiter must drill through the Application record to get into the Candidate record in order to view the Candidate’s contact information. </li></ul>Job Application Candidate Position
  14. 14. Universal Containers HR Scenario, cont <ul><li>In order to improve this process and make it more efficient, Universal Containers has decided to create an “inline” S-Control to be added to the Application page layout. </li></ul><ul><ul><li>The HTML S-Control reveals associated Candidate information </li></ul></ul><ul><ul><li>No need to drill into the Candidate record </li></ul></ul><ul><ul><li>Custom HTML S-Control has Salesforce look and feel </li></ul></ul><ul><ul><li>Seemless User experience </li></ul></ul>
  15. 15. Introduction to the AJAX Toolkit
  16. 16. AJAX Toolkit <ul><li>Asynchronous JavaScript and XML (AJAX) </li></ul><ul><li>Toolkit allows developers to use AJAX paradigm to create powerful extensions to their UI by providing easy access to the AppExchange API from javascript. </li></ul><ul><li>With the Toolkit, it’s easier to create and parse the SOAP messages of the AppExchange API </li></ul>
  17. 17. Features of the AJAX Toolkit <ul><li>Complete support for the AppExchange API and Schema via the Partner WSDL </li></ul><ul><li>Significant performance improvements over the BETA Toolkit </li></ul><ul><li>Supports synchronous and asynchronous calls </li></ul><ul><li>Complete documentation available for download on the AppExchange Developer Network </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Coming with Winter ’07 release! </li></ul></ul>
  18. 18. AJAX Toolkit – Connecting <ul><li>Simply include a <script> reference in your S-Control to use the Toolkit </li></ul><ul><li>This will load the toolkit and a global object, sforce.connection, is created which contains all of the API calls and toolkit methods. </li></ul><ul><ul><li>Create, Update, Delete, Query, etc. </li></ul></ul><ul><li>Security and access will be based off the User who launched the S-Control by default </li></ul><ul><ul><li>A “login” function that takes a username/password is also supported by the toolkit </li></ul></ul>
  19. 19. S-Control Design <ul><li>2 major pieces of S-Control design </li></ul><ul><ul><li>The HTML Output (ie. The Visual) </li></ul></ul><ul><ul><li>The Javascript (ie. The Function/Code) </li></ul></ul><ul><li>HTML </li></ul><ul><ul><li>Determine what the User should see, how forms and tables need to be formatted, the look & feel, etc </li></ul></ul><ul><li>Javascript </li></ul><ul><ul><li>Write Javascript functions that use AJAX to perform API operations such as: query, create, update, or delete </li></ul></ul><ul><ul><li>Some of your Javascript functions may be triggered automatically when the page loads, others you may want to be triggered by User actions such as a button click … you decide! </li></ul></ul>
  20. 20. S-Control Design, cont’d <ul><li>S-Controls should always start with the following: </li></ul><ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN” &quot;;> </li></ul></ul><ul><li>Second, add the <HTML> and <HEAD> tags: </li></ul><ul><ul><li><HTML><HEAD> </li></ul></ul><ul><ul><ul><li><!-- The following line loads the AJAX Toolkit --> </li></ul></ul></ul><ul><ul><ul><li><script src=&quot;/soap/ajax/8.0/connection.js&quot;></script> </li></ul></ul></ul><ul><ul><ul><li><script> </li></ul></ul></ul><ul><ul><ul><li>function myFirstFunction() { … } </li></ul></ul></ul><ul><ul><ul><li></script> </li></ul></ul></ul><ul><ul><ul><li></head> </li></ul></ul></ul><ul><li>Last, create the <BODY> before closing with </HTML> </li></ul>
  21. 21. Interactive: Examining an AJAX S-Control <ul><li>Let’s take a closer look at the Inline S-Control we added to the Job Application Page Layout </li></ul><ul><li>How is the AJAX Toolkit initialized? </li></ul><ul><li>How is the look & feel controlled? </li></ul><ul><li>Where is the AppExchange API being used? </li></ul><ul><li>What is the S-Control logic flow? </li></ul>
  22. 22. DEMO #1 New Custom Detail Button
  23. 23. Universal Containers Scenario - Problem <ul><li>UC receives numerous Job Applications per Position. Once a Position has been closed it requires a great deal of effort (clicking) to close out each Job Application associated to the Position. </li></ul>
  24. 24. Universal Containers Scenario - Solution <ul><li>Users would like a button to perform a mass update on a Position’s Job Application records that are in an “Open” status </li></ul><ul><ul><li>Update the records’ status to “Closed” and set the stage to “Closed – Position Closed”. </li></ul></ul><ul><ul><li>Job Application records that are in a “Hold” or “Closed” status should not be updated by the button. </li></ul></ul>
  25. 25. DEMO #2 Standard Button Override
  26. 26. Universal Containers Scenario - Problem <ul><li>UC Interviewers create Review records to store Candidate evaluation scores against an Application. </li></ul><ul><ul><li>The review questionnaire contains questions that exceed the maximum length the label of a field can be. </li></ul></ul>
  27. 27. Universal Containers Scenario - Solution <ul><li>In order to work around the label length restriction, the “New” button of the Review object will be overridden to display a custom HTML form that has no question length restrictions. </li></ul><ul><ul><li>When the interviewer submits the custom HTML form, the field data should be saved into a new Review record associated to the Application. </li></ul></ul>
  28. 28. Need More Information or Help?
  29. 29. Resources <ul><li>AppExchange Developer Network (ADN) </li></ul><ul><ul><li>Comprehensive web site for AppExchange Developers </li></ul></ul><ul><ul><li>Documentation & Samples (API, AJAX) </li></ul></ul><ul><ul><li>Developer community forum </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>AppExchange Developer Support (ADS) </li></ul><ul><ul><li>Per-incident, code-level support for developers creating solutions on the AppExchange platform </li></ul></ul><ul><ul><li>Support for Custom apps, Custom integrations, S-Controls </li></ul></ul><ul><ul><li>4 hour response time for logged cases </li></ul></ul><ul><ul><li>More info: </li></ul></ul>
  30. 30. Resources, cont’d <ul><li>Creating On-Demand Applications with AppExchange </li></ul><ul><ul><li> publication </li></ul></ul><ul><ul><li>Illustrates technologies and concepts required to develop AppExchange apps </li></ul></ul><ul><li>AppExchange Laboratory (AppLab) </li></ul><ul><ul><li>5-day Hands-On Instructor Led Course </li></ul></ul><ul><ul><li>Instruction for how to build, deploy, and install native and composite AppExchange apps </li></ul></ul><ul><ul><li>For Developers, IT Managers and Power Users </li></ul></ul><ul><ul><li>More info and to register: </li></ul></ul>
  31. 31. Q & A
  32. 32. Session Feedback Let us know how we’re doing! <ul><li>Please score the session from 5 to 1 (5=excellent,1=needs improvement) on the following categories: </li></ul><ul><ul><li>Overall rating of the session </li></ul></ul><ul><ul><li>Quality of content </li></ul></ul><ul><ul><li>Strength of presentation delivery </li></ul></ul><ul><ul><li>Relevance of the session to your organization </li></ul></ul>Save time! Use your cell phone or mobile device to send Feedback via SMS/Text Messaging! Send a message to 26335 In the message body: Session 232, #### For example, “ Session 123, 5555 ” Session ID: 232 Session ID # Scores for 4 categories SMS Voting powered by: