Editing HTML Templates in the Design View (Biblioteca SAP

Editing HTML Templates in the Design View

Use

You use this procedure to edit HTML templates in the Design view of the HTMLBusiness editor.

To do this, you can use the functions in the design toolbar to:

Insert controls from the Toolbox window by drag and drop

Edit controls in the Properties window

Prerequisites

To enable syntax checking and be able to use controls from the SAP General HTML^Business Functions Library in HTML templates, you must import the system and webgui directories explicitly from an ITS Release 4.6D site.

Procedure

Start the HTML^Business editor for the HTML template you want to edit.

Switch to Design view

You see an HTML template with a blue background. If the template is new, it is blank.

You also see the Toolbox and Properties windows.

Toolbox window:

The Toolbox window contains simple controls and container controls.

The Standard directory contains simple controls and container controls for use in plain HTML
The TemplateLibraryDHTML directory contains contains standard HTML elements and screen-independent controls provided by the SAP General HTML^Business Functions Library for use with the SAP GUI for HTML

Nota

You can use any of the controls listed in the TemplateLibraryDHTML directory, but complex elements such as tabstrip controls are not currently supported.

Properties window:

The Properties window contains properties that allow you to edit each control by mapping HTML^Business function parameters to object properties.

Edit the HTML template by inserting controls from the Toolbox window and editing them in the Properties window.

To insert standard controls, double-click on the control or use drag and drop
To insert complex controls, select the template elements to which the control applies and double-click the control

To ease navigation among nested container controls, use the Select Parent Element function in the design toolbar.

You can switch to the HTML Source view at any time to check the HTML source code.

Save your changes.

Ejemplo

Suppose you want to create a group box called Options that contains two radio buttons called Option 1 and Option 2, as shown in the following graphic:

Este gráfico es explicado en el texto respectivo

To create each radio button, select the RadioButton control in the Toolbox window and double-click or drag it to the HTML template.

To create a text for each radio button, select the radio button, double-click the Text property in the Properties window and enter the texts Options 1 and Options 2.

To create a group box that encloses these radio buttons, select them both and double-click GroupBox in the Toolbox window.

To create a text for the group box, select the group box, double-click the groupBoxLabel property in the Properties window and enter the text Options.

To move the group box anywhere in the HTML template, select the group box, choose Absolute Positioning and drag it to the desired location in the template.

To lock the group box in position, choose Lock.