AJAX Toolkit + S-control Hello World Example

Image:Header_sample.gif

To provide a simple illustration how to use the AJAX Toolkit with S-controls, this recreates a classic Hello World using these technologies.

For those of you who may have used either the AJAX Toolkit or S-controls prior to Winter 07, you'll notice some things here are different. Specifically, the AJAX Toolkit "setup" functionality - logging in to create and API connection from with Javascript - is now done automatically.

To start, create a new S-control and paste in this code.

<html>
<head>
  <script type="text/javascript" src="/js/functions.js"></script>
  <script src="/soap/ajax/8.0/connection.js"></script>
  <script>
    function setupPage() {
      // Use the API connection, named sforce by default, to get
      // the full name of the active user
      var user = sforce.connection.getUserInfo().userFullName;
      // Display "Hello World" plus the full user name by replacing
      // the div defined below
      document.getElementById('userNameArea').innerHTML = 
      'Hello World, '+user;
    }
  </script>
</head>

<body onload=setupPage()>
  <div id=userNameArea>
  </div>
</body>
</html>

Next, either associate the S-control with its own Custom Tab, or add it the page layout of an existing object. When you load that Tab or Object, you should see the text "Hello World", with the current user name, displayed in the S-control area you've defined.