Properties Panel

In this section:

The Properties panel shows the attributes of the object or objects selected on the canvas. For example, if you select a hyperlink object, the Properties panel shows the different attributes associated with a hyperlink, such as Enable Dragging. General attributes for the entire HTML page or Document are shown when no object is selected. The Properties panel is available when you are using the HTML canvas or Document canvas. The attributes can be sorted by category or alphabetically.

You can also select Events. When Events is selected, a list of all available JavaScript events that can be used in conjunction with an object appears. The events that are available change depending on what type of object is selected. For example, a report object has different events available than a button object. When no object is selected, events for the HTML page are displayed. Double-clicking on an event will create a function block for the selected object, using that event. You can view the created functions in the Embedded JavaScript/CSS tab, where you can type the JavaScript code to execute when the selected event occurs.

For more information on customizing the Properties panel, see Using the Panel Customization Options.

Color Selection

For properties that affect color, such as Background-color, Border-color, and Color, you can enter the hexadecimal value of the color you want to use directly into the property, rather than opening the Color Picker dialog box. If you use the Color Picker dialog box to select a color, the hexadecimal value of that selected color will be entered into the selected property. For more information on the Color Picker dialog box, see Color Picker Dialog Box.


Top of page

x
Properties Toolbar

The Properties toolbar contains the buttons and menus that you need to navigate and customize the contents of the Properties panel.

Categorized

Groups the attributes by category.

Alphabetical

Sorts the attributes alphabetically, without categories.

Properties

Shows the property names and values. This is the default setting. Properties and Events cannot be selected at the same time.

Events

Shows the JavaScript events that can be associated with the selected object on the canvas. Properties and Events cannot be selected at the same time.


Top of page

x
Autosize Children

Autosize Children is an option you can access from the Properties panel, in the Miscellaneous section, in the HTML canvas. Autosize Children changes the size of any component added to the canvas to fit the maximum size of your available screen space. For example, one component will take up one hundred percent of the available space, while two components will take up fifty percent each. This option is used so that when your HTML page is run on different devices, components and controls do not appear off the screen and have to be scrolled to in order to use them. Depending on the available space, components may move to accommodate this. If a report and chart are side by side when run on a computer, they may appear stacked on top of each other when run on a tablet.

Note: When Autosize Children is turned on, the components you add to the canvas will be positioned and ordered differently, depending on the available space. When your HTML page is run at full screen, using the Autosize Children option, that HTML page will appear differently on 24-inch monitor than a 26-inch monitor.

You can use the Autosize Children option by doing the following:

The Autosize Children option is turned off by default. The following image is an example of the Autosize Children option turned on.

Autosize Children option turned on

The following image shows a report component and a chart component on the HTML canvas while Autosize Children is enabled. Both components share the available space evenly.

HTML canvas

Autosize Children is available for any container object, such as a form, tab, window, accordion, panel, or group box. With multi-page containers, such as a tab container, Autosize Children is available for each page, so that each page can have this option on or off, independent of the rest.

While Autosize Children is turned on for a container object, there is a small amount of canvas space shown to the bottom and right of the canvas or object. This is so you can use the canvas shortcut options. This extra canvas space is not shown at run time. The following image shows the canvas shortcut options when you right-click on the canvas.

Canvas shortcut menu

Each component or control you add to the canvas has a Core attribute named Autosize options. Autosize options contains four selections that are used to set how you want that object to be handled in the HTML page. The following image shows the Autosize options property and selections.

Autosize options

The four selections you can choose are:

Accept any changes

The object can change in size and position when the HTML page adjusts to fill the available space.

Keep size

The object can change in position but not in size when the HTML page adjusts to fill the available space.

Keep position

The object can change in size but not in position when the HTML page adjusts to fill the available space.

Keep size and position

The object cannot change in size or position when the HTML page adjusts to fill the available space.

Which objects are rendered first when a page is run depends on which option they have set from the Autosize options property. The rendering order is shown below.

  1. Objects with Keep size and position set.
  2. Objects with Keep position set.
  3. Objects with Keep size set.
  4. Objects with Accept any changes set.

You can move objects around the canvas at design time. However, objects with the Autosize options property set to Accept any changes, need to be moved by holding down the Alt key and dragging to the desired position. Once you are done moving objects around the canvas, right-click the canvas and select Update Layout to refresh the canvas and view the new layout positioning.

Note:


Top of page

x
Color Picker Dialog Box

The Color Picker dialog contains the Web Palette tab, Named Colors tab, System Colors tab, and Custom Color tab. From these tabs, you can pick different colors.

The hexadecimal value for any color you select or create is displayed at the bottom of the dialog box. If you want to enter a specific hexadecimal value, you must enter using the Properties panel or the Style Composer dialog box, in the appropriate area. For example, you can enter a hexidecimal value on the Background-color property line.


WebFOCUS