From AT&T Support Wiki

Jump to: navigation, search

Designer > Components


About Components

A component is a graphical element (tab, field, button or link) that the user can interact with. It is created using HTML, JavaScript, and built-in Template Variables.

Learn more: Components in the Developer Suite

Examples of components are:

  • A button that the user clicks to display a map in a popup window using the address in the current context
  • A link that performs a search using data in the current context and displaying the search results in the same window as the current page
  • Presenting information from a social networking site using a contact name in the current context
  • Accessing a Web service using data in the current context and using the result to set an HTML control (such as a radio button) in the current page

In a component, you can refer to Template Variables in the context of the current page. For example, you can refer to {$} in the value attribute of an <input> tag that is being submitted to a map service:

<input type="text" ... id="zipcode" value="{$}">
Learn more:

Components can be called from any of the following:

Creating a Component

Follow these steps to create a component:

  1. Click Designer > Components
  2. Click [New Component]
  3. Enter and Name and Description
  4. Enter the HTML and JavaScript
  5. Above the code, you can select a category and field and then copy the resulting Template Variable into the code
  6. Click [Save]

You can also create a component in the Eclipse Plug-In.

Using a Component in a Form

Follow these steps to use a component in a form layout.

  1. In the Forms tab, click Custom Control in the Elements list and drag to an area on the tab
  2. In the Add Field dialog, specify a Field Label
  3. In the Custom Control Type, select Component
  4. Select a component
  5. Select a Display Style
    • Button to Component Page: the user clicks a button to display the page
    • Link to Component Page: the user clicks a link to display the page
    • Inline: the page is displayed inline
  6. Select a Component Page Layout (only relevant for the button or link display style)
    • Show to New Popup Window
    • Show in New Window Full Screen
    • Show in Same Window
  7. Click [Save]

Using a Component in an Action

Follow these steps to use a component in a custom action.

  1. In the Actions tab, click [Add Action]
  2. Specify a Title
  3. Select the Component to be Invoked
  4. Specify Group Action Level or Single Record Level or Both
  5. Click Enabled
  6. Click [Save]


This section shows some examples of components.

Google Search Component

The code below creates a component that executes a Google search for the account name in the current context.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns=""> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Search for {$}</title> 
<link href="" 
type="text/css" rel="stylesheet"/> 
<script src="" 
<script language="Javascript" type="text/javascript"> 

function OnLoad() { 
var searchControl = new GSearchControl(); 
var localSearch = new GlocalSearch(); 
searchControl.addSearcher(new GwebSearch()); 
searchControl.addSearcher(new GvideoSearch()); 
searchControl.addSearcher(new GblogSearch()); 
searchControl.addSearcher(new GnewsSearch()); 
searchControl.addSearcher(new GimageSearch()); 
searchControl.addSearcher(new GbookSearch()); 
<body onload="OnLoad()"> 
<div id="searchcontrol"/> 

LinkedIn Component

This component displays information from LinkedIn about an account name in the current context.

  <head> </head>
	<script type="text/javascript"> 
	var name = escape("{$}");
	window.location.href="" + name;

Yahoo Map Component

This component displays a Yahoo Map for the zip code of the account in the current context.

<script type="text/javascript"
<style type="text/css">#mapContainer {  height: 1000px;  width: 1500px; } 
 <script type="text/javascript">
  function getMap()
    var zcode = document.getElementById("zipcode").value; 
    if (zcode.charAt(0) == '{') return;
    // Create a map object 
    var map = new YMap(document.getElementById('mapContainer')); 
    // Display the map centered on given address  
    map.drawZoomAndCenter(zcode , 5); 
    // Set marker at that address  //map.addOverlay(new YMarker("95054",'id2')); 
    // OR  
   map.addMarker(zcode );
     Enter Zip Code:
     <input type="text" maxlength="5" size="5" id="zipcode" value="{$}">
     <input type="button" onclick="javascript:getMap();" value="Get Map" id="getmap">
       <td colspan=2>
       <td>Street: {$account.street} ,{$}, {$account.state} {$}
     <div id="mapContainer"></div><br/>

Learn More

Personal tools