Tell us what you think

We want to create the best possible experience for our learners. Your feedback helps us to improve the experience for everyone.

Creating Basic Layouts with Adobe LiveCycle Designer

Objectives

After completing this lesson, you will be able to:

Add an object to a page
Navigate multiple palettes
Arrange objects on a page
Integrate library elements

Adobe LiveCycle Designer Fundamentals

To use Adobe LiveCycle Designer, the following software must be installed on your PC:

Microsoft Windows 10 (or higher)
Adobe Reader (the most current version)

Note

When working on a form, do not start with a recent version of Adobe LiveCycle Designer and then switch to an older version.

Adobe LiveCycle Designer Overview

The Adobe LiveCycle Designer workspace consists of the following four main areas:

Script Editor
The top area is the script editor, where you can enter scripts for calculations.
Adobe LiveCycle Designer supports scripting in two languages:
- JavaScript
- FormCalc
Palette Windows
The left and right areas are called palette windows. You can decide which palette windows you want to display and in which size.
To reset a palette window to its standard view, choose Palettes → Workspace → Reset Palette Locations.
Layout Editor
The central area is the layout editor.
To close all areas except the central area (the layout editor), choose Palettes → Workspace (or, in some versions, choose Palettes → Manage Palettes).

Adobe LiveCycle Designer Toolbars

Adobe LiveCycle Designer has one menu toolbar and five button toolbars, as follows:

Standard
Font
Paragraph
Layout
Table (as of Adobe LiveCycle Designer 7.1)

To move a toolbar, drag it by its title bar and drop it on another toolbar, the layout editor, or a palette window. You can hold CTRL while dragging a toolbar to move the toolbar anywhere in the workspace.

To define which toolbars are displayed or hidden, choose Tools → Customize.

It is also possible to move individual items to different positions or reset toolbars to the standard settings.

Palette Windows Handling

To open and close palettes, use the Palettes menu.

To resize a palette window, drag any side of it.

To move a palette window, drag its palette bar. The palette bar is docked to the layout editor or another palette window. You can hold CTRL while dragging a palette to move the palette anywhere in the workspace.

To switch between the palette window's docked position and its free position, double-click the palette bar.

You can drag the palettes of any palette window to another palette window or a free position. Alternatively, you can rearrange the palettes in a different order in the same palette window.

Palettes Overview

The Palettes menu includes the following options:

Hierarchy
The Hierarchy palette lists the components included in the layout.
Data View
The system displays all active context nodes on the Data View palette. As the context is SAP-specific, Adobe documentation refers to it as a "data schema".
Note
Although it is possible, you should not change the data schema directly. Only use this option if you work with Adobe LiveCycle Designer without SAP integration.
If you want to change the data source, always change the form context first.
Library
The Library palette lists all objects that you can include (by dragging) on the form pages. You can customize the palette according to your needs.
Font and Paragraph
On the Font and Paragraph palettes, you can adjust the text fields or captions of static texts.
Info
If you mark a field on a page that originates from the context, the Info palette displays the information entered in the context.
Report
In the Report palette, you find information on fields in the layout and their mapping to context fields. Furthermore, the system displays a warning when the form is previewed locally, that is, with the Adobe LiveCycle Designer built-in preview.
Drawing Aids
Before starting a new form, determine the basic settings for the layout editor by choosing Palettes → Drawing Aids.
If you select an object in the layout editor, its corners are highlighted in blue. It is helpful to choose different colors for object boundaries and the grid.
The unit you set for the grid and ruler is also used for the positioning and sizing of objects. If you change the unit, all existing measurements are changed automatically.
The settings you enter in the Drawing Aids palette are saved in your form.

The Hierarchy Palette

All objects included in the layout are visible in the Hierarchy Palette.

To expand or compress the hierarchy tree, choose the plus (+) or minus (-) signs.

To set details for an element, select the element and choose the relevant palette, such as Layout, Border, or Font.

The context menu shows the available options, such as Rename or Delete.

To select more than one element at a time, hold down the CTRL key and select the elements.

When renaming an object, capitalization matters for scripting purposes. For example, Field is not the same as field or FIELD.

If, within one page, two elements with the same name appear more than once within the same subform, they are numbered consecutively in the hierarchy tree, starting with 0.

For example, the hierarchy tree might show FIELD[0] and FIELD[1] so that it is possible to address one of the fields directly. However, for the sake of clarity, you should strive to avoid such cases.

The position of an object in the hierarchy affects its position on a page as follows:

Some objects can be positioned in the layout editor at design time and their positions will not change at runtime.
For these objects, changing their position in the Hierarchy Palette does not change their position in the layout, as long as you do not move them to a different page.
This is the case for boilerplate objects on a master page and in subforms of Position Content type.
For objects whose position and/or call sequence is determined at runtime only, changing their position in the Hierarchy Palette changes their position in the final document.
For example, of two master pages in the hierarchy, the uppermost page is used first by default. If you swap table cells in the hierarchy, they are swapped in the resulting document as well.

Nested Objects vs. Consecutive Objects

When you move objects in the Hierarchy Palette, distinguish between nested objects and consecutive objects. If you nest one object in another (for example, in a body page or a sub-form), it becomes part of it. Therefore, if the enclosing object is not displayed at runtime (for example, due to coding), the objects nested in that hidden object are also not displayed.

The Layout Palette

You can position and size an object by selecting and moving the resize handles of the layout editor. Alternatively, you can enter the coordinates, and the width and height in the Layout Palette .

For dynamic elements (such as dynamic texts that come from the application program), you can select the Expand to fit checkbox for the width and height to avoid the disappearance of lines.

You can set the margins, for example, between text and the borders of the text object. A dynamic and interactive object (such as text fields or checkboxes) needs to have a caption. You can determine the size and position of the caption with regard to the object itself.

It is possible to rotate objects in 90° steps. For this, specify the anchor point around which the object should be rotated.

The Border Palette

In the Border Palette, you can determine edges and background fills.

You can edit the edges together or individually.

For a background fill, you can choose between the following options:

None
Solid (one color and various patterns for two colors)

For objects that are dynamic (such as a text field), you can also specify the border properties of the fillable areas.

You can set a background color for a text field that differs from its caption color as follows:

Select the object.
In the Object Palette, choose the Field tab page.
In the Appearance list, choose the Custom option.

Object Arrangement

You can arrange the objects that you have inserted on a page in several ways. For example, you can assign two objects the same X-coordinate or the same size. You access these options in the Layout menu.

If you want to multiply an object and arrange the copies so that they all have the same X position or Y position as the original, choose Copy Multiple from the Edit menu.

How to Integrate and Manipulate Elements with Adobe LiveCycle Designer

Business Example

A travel agency wants to use SAP Forms service by Adobe to print invoices for its customers' flight bookings. There is no form layout yet. The developer requires an overview of how Adobe LiveCycle Designer works.

Follow the simulation to learn how to integrate and manipulate elements using Adobe LiveCycle Designer.

ExerciseStart Exercise

Object Library

If you create an object and want to reuse it, you can it to a section of the Library palette. You will then be able to drag-and-drop the object from the Library palette, just like predefined objects.

You can add an object to the Library palette as follows:

Right-click the relevant object.
From the context menu, select Add to Library.
In the Add Library Object dialog box, enter a name and description for the object.
If you enter a name that already exists in the selected section of the Library palette, you can choose whether to override the existing one or cancel the operation.
Check that the correct section of the Library palette is selected and choose OK.

Alternatively, you can drag the layout element to the appropriate section of the Library palette.

It is also possible to represent several layout elements with one Library object. To do this, select all of the relevant objects before moving them to the Library palette.

You can restore all standard objects that come with Adobe LiveCycle Designer to any section of the Library palette by selecting Restore Standard Objects from the palette menu.

Library Object Preview

In the Library palette menu, choose Show Object Preview to preview the object you are going to include on a page. This is of particular interest if you include objects that consist of multiple parts or objects other than the predefined standard objects.

If you include an object that consists of several parts, you include these individual parts rather than one single object.

Sharing Library Objects

You can create your own groups of library objects as follows:

Right-click an existing group.
Choose Add group.

You can publish a library and its objects to a server as follows:

In the Library palette, select the palette menu.
In the Library Group Properties dialog box, specify the location.
Library objects are saved as individual XML files (with the extension XFO). Your logon language determines which libraries are shown. By default, XFO files are stored in separate directories for each language.

From the palette menu, you can also choose Shared Library Location. You can enter an XML file that lists some Library sections and their directories with XFO files. In this way, you create a reference to a number of Library sections without having to include them individually.

XML Data and Preview

Adobe LiveCycle Designer uses the XML Forms Architecture (XFA), an XML-based language, to model form templates. XFA supports scripting in JavaScript and in Adobe’s own script language, FormCalc.

Caution

XML data can be changed directly, but the form can easily be corrupted.

You can preview the form on the Preview PDF tab page. This preview does not allow you to enter test data, but you can determine an XML file to be used as the test data source.

If you do not see the Preview PDF tab page, reconfigure your browser plug-in settings for Adobe Reader as follows:

Close Adobe LiveCycle Designer.
Start Adobe Reader.
Choose Edit → Preferences → Internet.
Select the Display PDF checkbox in the browser.
Check the browser settings when you start Adobe Reader. You may disable the second setting again later.
Close Adobe Reader.
Restart Adobe LiveCycle Designer.

Form Properties

When you start designing your form, you begin by setting the form properties. However, you can do this at any time as the form properties do not interfere with the layout. To set the form properties, choose Edit → → Form properties.

The optional Data File field takes the XFD.XML file with all the form data inside. This test data file is very useful for testing the form during development.

A form locale is a combination of a language and country. For example, language = English and locale = United Kingdom. For a PDF-based form in an SAP application, you would typically set the locale dynamically in the form data provider. However, for testing purposes, you should choose a locale for your form.

The locale that you set will have implications on time and date formats and on decimals formats.

All data retrieval for the form must be done within the form data provider. However, you can also use scripting for calculations within the form. This scripting will be executed at runtime, triggered by Adobe Document Services. For this scripting, two programming languages are available: JavaScript and Adobe’s FormCalc . In the form properties, you can set one of these two scripting languages as the default, but it is possible to change this for individual scripting.

Global variables, which we will discuss later, can also be defined in the form properties.

Entering a data file for the preview makes sense if you want to test your form with data, but you don’t want to upload the layout to the backend each time. The file that you enter here will be used by Adobe LiveCycle Designer’s preview. Be aware that this testing is done locally. Fonts might look different from what they will look like in a preview or printout when rendered by Adobe Document Services. Also, you might or might not have access to files or URLs that you will or will not have in a real scenario.

Next lesson