Creating panels

You can place a panel anywhere on a form outside of a panel holder, or you can add panels to a panel holder.

To create a panel

1. Open the form to which you want to add a panel.
2. In the palette, select Panel, drag to the form, and release the mouse where you want the panel to appear.

To set properties for a panel

1. Select the panel.

2. On the Properties tab, edit the Label value if necessary.

   If you do not save the form after adding a panel, the label value also becomes the field's database name (Name property).

3. To specify a custom database ID, modify the ID property before saving the panel.

4. Set permissions for the panel.

   Users must have permission to view or change the fields in a panel. See Panel field permissions properties.

5. Set other panel properties as needed:
   • Field properties—See Field properties, which provides brief descriptions of field properties for all AR System  forms.
   • Background mode—See Creating panel holders.
   • Color options—See below.
   • Rounded corners—See below.
   • Images in panels—See below.
   • Anchoring fields to the right side of a panel—See Anchoring fields to the right side of a form or panel.
6. Save the form.

To set color properties

By default, the background color of a panel is the color of the form view, but you can change the color.

In tabbed panel holders, colors selected for panels are not applied to the tabs themselves. The background color of the selected tab is white, unless another color is selected for the tab by using Cascading Style Sheets. You can set a color for the tab label text.

1. Select the panel to which you want to apply a border color.
2. To set the border color:
   1. Select the Border Color property.
   2. Click the Down arrow.
   3. Select Custom.
   4. Select a color from the color picker, and click OK.

3. To set a background color without a gradient in a panel or panel header:

   1. Select the Background Color property (for the panel itself) or the Header Background Color (for the panel header).
   2. In the drop-down Value list, select Custom.
   3. In the Custom Color dialog box, click Color, select a color from the palette, and click OK.
   4. Click OK to close the Custom Color dialog box.

4. To set a background color with a gradient in a panel or panel header:

   1. Select the Background Color property (for the panel itself) or the Header Background Color (for the panel header).
   2. In the drop-down Value list, select Custom.
   3. In the Custom Color dialog box, select Gradient.
      The gradient options become available in the Custom Color dialog box. 
      By default, the target color is white.
   4. (Optional) To change the target color, click Color in the Target Color field, and select a different target color.
   5. Select a gradient effect:
      • Linear Horizontal—The gradient effect starts with the primary color at the top and goes to the target color at the bottom of the panel.
      • Linear Vertical—The gradient effect starts with the primary color at the left side and goes to the target color at the right side of the panel.
      • Reflected Horizontal—The gradient effect starts with the primary color at the top and bottom and goes to the target color at the center of the panel.
      • Reflected Vertical—The gradient effect starts with the primary color at the center and goes to the target color at the top and bottom of the panel.
   6. Click OK.
5. To set the opacity, in the Opacity property, enter an opacity value of 0, 1.0, or any decimal value between 0 and 1. For example:
   • 0—Color is fully transparent.
   • 1.0—Color is fully opaque.
   • 0.5—Color is semitransparent.

To change a panel border's thickness

You cannot set border thickness for panels in tabbed panel holders.

1. Select a panel.
2. Select the Border Thickness property.

3. Enter a value from 0 (no border) to 9 (maximum thickness).
   To create a border with the same number of pixels on all sides, enter a single number of pixels, which will be applied to all borders.
   To create a border with varying thicknesses, enter the number of pixels for each side in the following order: Top, Right, Bottom, Left. Separate each entry with a comma. Enter 0 to have no border.
   For example, to create a panel with borders that are 2 pixels thick on the right and left and 5 pixels thick on the top and bottom, enter 5,2,5,2. To create a panel with no borders on the top and bottom and borders that are 3 pixels thick on the right and left, enter 0,3,0,3.

   You can control individual borders on panels with square corners. For panels with rounded corners, you can set only one border thickness. If you enter a list in the Border Thickness property (for example, 2,5,2,5), the first number is used.

For information about using drop shadows in panels, see Creating panel holders.

To apply the same rounding radius to all corners of the panel

In the Rounded Corners property, enter one number (for example, 25). This rounding radius is applied to all corners of the panel.

Panel whose corners have the same rounding radius (Web)

Rounded corners are not displayed in Developer Studio  or when a panel has a background image.

To apply different rounding radii to panel corners

In the Rounded Corners property, enter a number for each corner, separated by commas. To apply no rounding to a corner, enter 0. For example: 15,15,0,0. The values are applied in the following order:

• Top left
• Top right
• Bottom left
• Bottom right

Panel with two rounded corners (browser) 

Adding an image to a panel

You can use an image as the background for any of the following components:

• Panel field
• Cells in a cell-based table field
• Form view.

For more information about adding an image to a panel, see Adding background images to fields and form views.

Opacity settings for the panel do not affect the opacity of the image. An image's opacity is determined by the settings applied in the tool used to create the image.