Authoring Automated Tasks › Automated Task Step Templates › Example: Text Input Box as an HTML Component

Example: Text Input Box as an HTML Component

The step object has a controls array that is populated with a series of HTML components. These script objects render in HTML, and when the framework renders a user interface page, each HTML component in its controls array renders itself and adds the returned HTML fragment to the HTML body of the page.

HTML components let you write complex user interfaces without extensive HTML knowledge. Using an HTML component, you can create and configure commonly used controls with minimal coding.

Example: Text Input box as an HTML Component

An example of an HTML component is a text input box. The following example combines a label called PromptText and an HTML input box. If you want to prompt the customer or technician to supply a user name for example, the user interface page is constructed in an OnLoad function as follows:

Function OnLoad
	Dim myInputBox
	Set myInputBox = UI.MakeInputBox()
	myInputBox.PromptText = "Please enter your name:"
	Step.Controls.Add(myInputBox)
End Function

CA Technologies supplies samples, but you can also create custom HTML components. An HTML component is a script object that implements a method called GetHtml. Here, for example, is the implementation of that MakeInputBox() method call used in the previous example:

function InputBox() {
	// public properties
	this.PromptText = "";
	this.CssClass = "UIInputBox";
	this.InputMaxLength =50;
	this.InputSize = 50;

	// private member props
	var textboxId = Task.GetNextElementId();
	
	// privileged methods
	// (For example, publicly accessible with access to private props)
	this.GetHtml = function () {
		var inputHtml = 
			"<DIV class = '" + this.CssClass + "'>\n";
		if(this.PromptText.length>0) {
			inputHtml +=
"<SPAN class ='PromptText'>" + this.PromptText + "</SPAN>\n" +
				"<BR>\n";
		}
		inputHtml +=
			"<INPUT type = text class = 'InputText' id = '"+textboxId+
			"' size = '"+this.InputSize+
"' maxlength='"+this.InputMaxLength+"'></INPUT>" +
			"<BR><BR>\n" +
			"</DIV>\n";
		return inputHtml;
	}
		
	this.GetUserInput = function() {
		var textBox = Task.GetPageBodyElementById(textboxId);
		if (textBox) {
			return textBox.value;
		}
		else {
			throw new Exception (Severity.Error, 
"Could not read textbox value",
"Could not read textbox value");
		}
	}
}
return new InputBox();

This automated task library function defines a constructor for an object of type InputBox. The last line of the function constructs an instance of the InputBox class and returns it.

Object definitions differ in JavaScript and VBScript. In VBScript, the class keyword is used to declare a class. In JavaScript the function keyword declares the class, because in JavaScript functions are objects. Both languages let the class have public and private member variables and methods. A full description of how object syntax is handled in the two languages is beyond the scope of this chapter, but the internet can provide examples and tutorials on this subject.

In the example above, the code declares the InputBox class with some public and private properties and two public methods, GetHtml and GetUserInput.

The Framework calls GetHtml when rendering user interface steps. The InputBox control also exposes GetUserInput which you can use to access the value that the end user enters into the text box. Each HTML component can expose different methods for configuring it and accessing any user input values.

The HTML coding is abstracted from you by these HTML components so that creating user interface pages is simplified.

You can write your own HTML entirely for a particular automated task. In such a case, you have two choices: Write a new HTML component for the case you require, or construct the HTML code in a string variable and wrap it in a special HTML component called RawHTMLContainer as follows:

Function OnLoad
	Dim myRawHtmlContainer, myHtml
	myHtml = "<H1>Hello <B>World</B></H1>"
	Set myRawHtmlContainer = UI.MakeRawHtmlContainer(myHtml)
	Step.Controls.Add(myRawHtmlContainer)
End Function