Creating Dynamic Form Elements

Objectives

After completing this lesson, you will be able to:
  • Add dynamic elements to a form
  • Implement data binding in a form

Dynamic Form Elements

There are different ways to insert a dynamic field as follows:

  1. Choose the Data View tab page from the form context menu and drag a field to the desired position in the layout editor.
  2. Drag a field from the Standard library to the desired position.

Dynamic elements can correspond to a number of context elements. For example, an image field can refer to a graphic content field or a graphic reference field. It is best to use the first method, as it automatically creates the appropriate link between the context element and the layout element (data binding).

A context element included anywhere in the layout is displayed in the Data View, with a special symbol to the right of its name.

Note

It is possible to include a field in the layout several times.

If you choose an element in the Data View that has been included anywhere in the layout, its details are shown in the Layout, Border, and Object palettes (provided you have opened these palettes). For some fields, the Font and Paragraph settings are also displayed. If an element has been included several times, you might find the entry mixed in some fields.

To display the details of a field from the Data View, right-click the field and select Show Info.

You can set the details for a dynamic element in the Object palette. What you can actually enter there depends on the type of element.

Text Fields

A text field can refer to a any simple variable.

The settings for the Layout palette are as follows:

  • Width and Height

    A text field might correspond to a variable whose exact length might be unknown at design time. If you do not know the height and width, choose Expand to fit in the Layout palette under Size & Position.

    Be aware that whatever you enter as the width of this text is overwritten at runtime. This means that the width you enter is merely a rough estimate of how wide you think the text is (this is considered the minimum dimension).

  • Caption

    This is static text that accompanies the dynamic field content. The caption is automatically taken from the form data provider, or the ABAP Dictionary if you drag an element that has a dictionary reference from the Data View.

    You should not confuse the caption with a tooltip, which helps visually impaired people to read a form. A tooltip can be included independently of a caption.

    If you set a caption, choose one of four positions for the text field: top, bottom, left, or right. Determine how much space should be reserved for the caption.

The details of text fields set in the Object palette are as follows:

  • The Field Tab
    • Allow multiple lines

      If you select the Allow multiple lines option, make sure that you provide enough space. You might want to set the size properties to Expand to fit.

    • Limit length

      This allows you to determine the maximum length of the resulting text.

      If you integrate context fields that have a reference to the ABAP Dictionary, you might find that the length specified in the dictionary is copied.

  • The Value Tab

    The default value is used for fields with no data binding or corrupt data binding. This does not work for empty fields because they remain empty.

  • The Binding Tab

    You determine the link to the Data View here.

Editing Text Captions and Text Values

 Play the video to learn how to edit text captions and text values.

Data Binding

All dynamic fields (such as text fields and image fields) must have data binding. This determines the link between the field in the layout and the field from the Data View (that is, the form context). In other words, it makes sure that the correct data is displayed at runtime.

Data binding has the following characteristics:

  • It is the link between objects and the data connection.
  • It is created automatically when a field is dropped to a layout from the Data View.
  • It can be set manually in the Object palette, on the Binding tab.
  • It is case-sensitive.
  • Absolute names must start with $record.
  • Relative names are possible for elements of subforms.

If you integrate dynamic fields into your layout by dragging them from the Data View, the correct data binding is inserted automatically.

You must set the data bindings manually in the following cases:

  • If you insert a dynamic field from the Library palette.
  • If you copy and paste an existing element (the binding is not duplicated).
  • If you include elements in subforms, and later move them to another subform or unwrap the subform.

The easiest way to set the data binding manually is to click the small triangle to the right of the Data binding input field and then select the appropriate field from the context.

For data binding, absolute names are possible for all elements and relative names are possible for those elements that are included in subforms. Absolute names start with $record. $record represents the current record of a collection of data (for example, the customer for whom the form is being printed).

If you set the binding to Name (also called implicit data binding), the name of the object must correspond to a field from the Data View. Be careful when renaming objects with Name binding. Unless the corresponding element from the Data View is renamed as well, you corrupt the data binding.

A faulty data binding or binding set to None leads to incorrect or empty data.

Let us assume there is a top-level structure called SUB1 in the Data View with one field named OBJ1. In the Hierarchy, a subform is called SUB1 and an object that is included in that subform is called OBJ1.

Data Bindings

The table shows the possible data bindings:

SUB1: normalOBJ1: normal
SUB1: normalOBJ1: OBJ1
SUB1: $record.SUB1OBJ1: OBJ1
SUB1: $record.SUB1OBJ1: $record.SUB1.OBJ1

The second and third options shown for OBJ1 are relative because they do not start from the top node.

An easy way to update the data binding of a dynamic element that has been included (and changed) in the layout is to drag and drop the appropriate context element from the Data View to the field. You can also update name, caption, and type in this way.

Dynamic Properties

You can set fields as the source for certain properties, such as captions or tooltips. Instead of setting a fixed caption, you might want to have different values depending on the data source. Whenever you can bind a property to a field from the Data View, the property is underlined. Click the property to set the binding. Alternatively, drag an element from the Data View to the property.

If you enter a default property and also a dynamic property, the default is used at runtime only if the data binding is incorrect.

Changing an object property through context binding is preferable to scripting with if-then-else commands (though you can still override a dynamic property through scripting).

Checking the Data Binding

In the Report palette, on the Binding tab, you will find different lists for the fields in the layout:

  • Fields with Name Data Binding
  • Fields with Data Binding by Reference

    These are all fields with relative or absolute path names to their corresponding fields from the Data View.

  • Fields with no Data Binding

    Type None makes sense only if you have scripting to determine the field value.

If the binding for a field is faulty, you will see a caution traffic light to the left of the field name. If you click it, an explanation is shown.

Finally, you can display Unbound Data Connection Nodes, which are all fields from the context that have not been included anywhere in the layout. If you find too many fields here, you might want to think about redesigning the context and, possibly, the interface.

Inserting Image Fields

Image fields must have their equivalents in the Data View as follows:

  • As a variable that holds the data
  • As a variable that points to the address where the image is located

Make sure that you set the data binding accordingly.

As with dynamic texts, you can select Expand to fit in the Layout palette to adjust the width and height of the image. The size that you determine in the layout is then considered the minimum size of the image. At runtime, it might be considerably larger or smaller.

Even though you can set a URL, and even choose Embed Image Data, for image fields, these options are ignored unless you set the binding to None. However, in this case, it would make more sense to choose Static image.

Numeric Fields

There are different types of numeric fields, as follows:

  • Decimal fields
  • Float
  • Integer

Everything that has been said about image fields and text fields (apart from their formatting) is also true for numeric fields and date/time fields.

The type of numeric field is defined in the Object palette, on the Binding tab page.

Similar to how decimals and currency amounts are treated in a special way in an SAP system, there is also a special type in Adobe LiveCycle Designer called a Decimal Field. It is available in the Library on the Standard tab page. Always integrate your fields by dragging them from the Data View, so the correct type (and, potentially, some required scripting for correct decimals) is inserted automatically.

To align numeric fields so that their decimal signs are always at the same horizontal position, proceed as follows:

  1. Select all numeric fields in question.
  2. Choose the Paragraph palette and make sure that Edit attributes is set.
  3. Choose Radix Alignment and enter how much space in the right corner of the value area should be reserved for decimals.

Radix Alignment for Numeric Fields

The Standard Library allows you to integrate date or time fields.

In the Object palette, on the Binding tab page, you determine one of the following types:

  • Date
  • Time
  • Date and Time

Static Texts with Floating Fields

Sometimes, it is necessary to include fields in static texts. For example, if you want to avoid "Dear sir or madam" and address your customers by their real names.

To include fields in static texts, proceed as follows:

  1. In an existing static text, set the cursor to the position where the floating field should be inserted.
  2. Choose Insert → Floating Field for every field that you want to integrate.

  3. Within the static text, place the cursor on one of the text fields you just created (make sure you select it). Then, in the Object palette, on the Binding tab page, enter the appropriate data binding.

    It is safest to do this by clicking the small triangle to the right of the Binding field and then choosing a field from the form context.

  4. Do not be confused by the fact that the floating fields appear as individual elements in the Hierarchy. This can make it difficult to determine whether the fields have been included in a static text. To make things clearer, you might want to specify meaningful names for the fields. To do so, right-click a field and choose Rename from the context menu.

Floating fields are automatically text fields. If you want to have a different type, choose the Object palette, on the Field tab page, and change the type there. The type can also be changed automatically if you update the data binding.

You should not worry that in the Object palette, on the Field tab page, the value for Presence is automatically set to Hidden (Exclude from Layout). Your floating text field appears, but not as a separate layout element.

Page numbers are also inserted as floating fields, together with some scripting. Position the cursor on a static text and choose Insert → Current Page Number or Number of Pages.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn