x

1. Insert a report or chart object by doing one of the following:
   • Click the Report or Chart button from the Components group.
   • Right-click in the layout and select New Report or New Chart from the shortcut menu.

   The pointer changes into a crosshair.

2. Drag the crosshair to create a report or chart object and adjust it to the size that you want.

   A report or chart object is created in the layout and assigned the name report(n) or chart(n), where n is a number. The object will appear in gray and white to indicate that the placeholder does not have a report or chart associated with it. Once a report or chart is associated with the object, the object displays the contents of the report or chart if live or simulated data is active (live data is the default) or a colored placeholder if preview is off in the HTML Page tab, located in the App Studio Options dialog box.

3. Create a report or chart by doing one of the following:
   • Double-click the placeholder.

     or

   • Right-click the placeholder and select New Report for a report, or New Chart for a chart.

   The Open dialog box opens.

4. Select the Master File you want to use and click Open.

   The Report canvas opens for reports and the Chart canvas opens for charts.

5. Optionally, after creating the report or chart, you can change its properties by adjusting the properties displayed in the Properties tab of the Properties window.

x

1. Insert a report or chart object by doing one of the following:
   • On the Components tab, in the Components group, click Report or Chart.

     The pointer changes into a crosshair. Drag the crosshair to create a report or chart object and adjust it to the size you want.

     A report or chart object is created in the layout and assigned the name report(n) or chart(n), where n is a number. The object will appear in gray and white to indicate that the placeholder does not have a report or chart associated with it. Once a report or chart is associated with the object, the object displays the contents of the report or chart if live or simulated data is active (live data is the default) or a colored placeholder if preview is off in the HTML Page tab, located in the App Studio Options dialog box.

   • Right-click in the layout and select New Report or New Chart from the shortcut menu.
2. Right-click the report or chart and select Reference existing procedure.
   • For a report, right-click the report object and select Import existing report.
   • For a chart, right-click the chart object and select Import existing chart.

   The Open dialog box opens.

3. Enter the name of the procedure you want to add to the layout.
4. Click Open.

   The report or chart object appears in the Design view of the HTML canvas.

x

You can use the Font dialog box to style your text. The options are:

Font

Determines the type of font used. For example, Ariel, Garamond, Times New Roman. The fonts available for you to use are determined by what fonts are installed on the current machine.

Font Style

Determines whether the text is normal, bold, italic, or bold and italic.

Size

Determines how large the text is.

Color

Determines the color of the text.

Effects

Determines what effects, if any, are used for the text. You can select None, Underline, Strikethrough, Overline.

x

You may apply various formatting and style options to words and individual text characters within the text object.

Note: Any formatting and styling that you may have applied to individual text strings within the text object will remain unchanged. Changes made to the entire text object are only applied to part of the text string that has not been formatted.

1. On the Components tab, in the Generic Elements group, click Text.

   The pointer changes to a crosshair.

2. Drag your pointer across the canvas to create a text object.

   A text object with the default text, Enter text, is created.

3. Select the text that you wish to format:
   • To format the entire text object, single-click the text object in the layout.
   • To format an individual word or text character, highlight part of the text within the text object.
4. Right-click the text, point to Style, and then click Font.

   The Font dialog box opens.

   Note: You can also access font formatting options in the Properties panel.

5. Select from the formatting options available. You can change the type, style, color, size, and effect of the font.

   Note: The Bold, Italic, Underline, Superscript, and Font Style options are available when formatting individual words or text characters. The Style option and Alignment option are available when the entire text object is selected.

6. Click OK to close the Font dialog box.

The formatting options that you selected applied to the text.

x

To insert a bulleted list or numbered list into a text object:

1. On the Components tab, in the Generic Elements group, click Text.

   The pointer changes to a crosshair.

2. Drag your pointer across the canvas to create a text object.

   A text object with the default text, Enter text, is created.

3. Add multiple lines of text to the text object.
4. Highlight and right-click the text that you want to include in the list.
5. In the shortcut menu, select one of the following list options:
   • Bullets
     • Disc
     • Circle
     • Square
   • Numbering
     • Numbers
     • Lowercase Letters
     • Uppercase Letters
     • Small Roman numerals
     • Large Roman numerals

   Note:

   • Alternatively, you can select a bullet type before typing text to begin the list. Pressing enter will begin the next item in the list on a separate line.
   • To change the bullet or number list type of an existing list, place your pointer on the list level you want to change and reselect a bullet or number list type. Selecting None will remove the bullets or numbers for that level and move any nested lists up one level. In order to switch between bullets and numbers, you must first remove the current list option by selecting None and then applying the list option you want.

x

To insert a nested list into the text object:

1. On the Components tab, in the Generic Elements group, click Text.

   The pointer changes to a crosshair.

2. Drag your pointer across the canvas to create a text object.

   A text object with the default text, Enter text, is created.

3. Add a list to the text object. For more information, see How to Insert a Bulleted List or Numbered List Into a Text Element.
4. Place your pointer after a list item.
5. Right-click, point to Nested List and then select a bulleted or numbered list option.

   A list is started within the current list, allowing you to enter text on that list level.

   Note: Pressing Tab while your pointer is on the same line as a list item will move that item one level down, resulting in a nested list. The bullet or number type selected is the next list type in the right-click shortcut menu. For example, if you have a bulleted list that uses the disc bullet type, pressing Tab to move an item down one level will cause that nested list to have the circle bullet type.

   You can continue to nest lists within other lists by using the same steps shown above.

   Note: You cannot skip a list level. For example, in order to insert a nested bulleted list or nested numbered list on a lower level, there must be a list one level up from it.

x

1. Select the tab control object in the layout.
2. Right-click and select Add Page from the shortcut menu.

   A tab is added to the tab control object.

3. To align multiple tab items, select the tab control object and click AutoArrange from the shortcut menu,

   The tab items are resized to the size of the widest tab item and they are evenly spaced.

x

You may resize the tab control to fit the full screen of your layout, making the tab control the full background of your window at run time. When set to full screen mode, scroll bars will not be applied to the output window. Therefore, you may have to adjust the tab control (and any items on the tab) in the layout to ensure that they appear appropriately for display at run time.

Note: It is recommended to set the tab control to full screen mode at the beginning of the development process. If there are existing components on the layout that are not part of the tab control, these components will become inaccessible if the tab control is changed to full screen mode.

1. From the Containers group, click Tab.

   The pointer changes into a crosshair.

2. Drag the crosshair in the layout to create the tab control object.
3. From the Properties panel, enable Autosize Children for the document, set Autosize options for the tab control object to Accept any changes, and then right-click the canvas and click Update Layout.

   The tab control displays as a full screen in the layout.

   For more information on Autosize Children, see Using Autosize.

x

You can use a form object to create a pop-up dialog box.

1. Create a form object.
2. Create a button.
3. Select the form.
4. In the Properties panel, change the Display container as property to popup dialog.
5. Create a new task in the Tasks section of the Tasks and Animations panel.
6. Use the button you create as the trigger.
7. Make the button object toggle the visibility of the form you created.
8. Run the page and click the button to display the form as a dialog box.

x

1. Add a button object to your HTML page.
2. Add a form control to your HTML page.
3. Delete the run and back buttons created with the form control.
4. While the form control is selected, in the Properties panel, change the Display container as property to either As popup dialog or As popup window.

   As popup dialog causes the form to display as a pop-up dialog box. When the dialog box is displayed, you must click Close to return to your HTML page.

   As popup window causes the form to display as a pop-up window. When the window is displayed, you can resize and move the window around your screen.

5. Create a new task in the Tasks section of the Tasks and Animations panel that uses the button object to toggle the visibility of the form you created.
6. Run your HTML page. When you click the button you added to the HTML page, the form will be displayed as either a pop-up dialog box or a pop-up window, depending on what option you selected.

x

You can reorder tabs, accordions, and windows by dragging the page that you want to appear first onto the page that you want it to display before. For example, if you have 3 tabs, Tab1, Tab2, and Tab3, and you drag Tab3 onto Tab1, Tab3 will now display ahead of Tab1. The order of the tabs will then be Tab3, Tab1, Tab2. You can reorder windows when they are in tile view.