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.
For more information on customizing the Properties panel, see Using the Panel Customization Options.
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.
The Name or Unique Identifier attribute settings for controls appear automatically in the Parameters tab of the HTML canvas.
The Properties toolbar contains the buttons and menus that you need to navigate and customize the contents of the Properties panel.
Groups the attributes by category.
Sorts the attributes alphabetically, without categories.
Shows the property names and values. This is the default setting. Properties and Events cannot be selected at the same time.
In this section:
The Autosize Children option resizes all components on an HTML page to automatically fit the maximum available screen space on any monitor or device where it might be viewed. For example, a single 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. To accommodate this, the orientation of components may be different on different devices. For example, a report and chart that appear side-by-side when run on a desktop monitor, may appear stacked one above the other when run on a tablet. Similarly, this difference could occur when run on a 24-inch desktop monitor and a 26-inch desktop monitor.
There are autosize properties that work at both the document and component levels:
The Autosize Children property is also available at the component level 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.
Note: To use Autosize Children with container objects, you must also set the Autosize options property to Accept any changes.
You can prevent the component from becoming too small, using the Autosize: min width and Autosize: min height options. Type the minimum number of pixels for the width, height, or both, in the appropriate fields. When a component reaches the minimum width or height that you specified, a scroll bar appears and the size of the component does not decrease further.
Note: You can use the Autosize options property for any HTML file, whether Autosize children is set to Yes or No.
The following image shows a report component and a chart component on the HTML canvas where Autosize children is enabled. Both components share the available space equally.
You can enable autosize for an existing HTML file or create a new file with the option enabled.
The HTML canvas opens.
The components are resized to occupy all of the space on the canvas.
You can also create a new HTML file from the Application menu or by using the shortcut menu in the Environments Tree panel, for a folder that supports content creation.
The HTML/Document Wizard opens.
The Themes and Settings window of the HTML/Document Wizard opens.
Selecting this option sets the Autosize Children property to Yes.
The HTML canvas opens.
Working with autosize entails some practices and conditions beyond those found in the native HTML canvas. This is because, when autosize is on, components automatically move and resize themselves on the canvas.
When you add a component to the canvas with the Autosize Children option turned on, the existing components will temporarily move out of the way so that you can draw the new one. The components will then reposition and resize automatically.
If the screen does not refresh, you can right-click the canvas and click Update Layout. There is a small amount of canvas space shown to the bottom and right of the screen, which allows you to access the shortcut menu. This extra canvas space is not shown at run time.
Note: If Update Layout does not resize the component automatically, check the properties. The Autosize Children property for the component must be set to Yes, and the Autosize option property must be set to Accept any changes. Components with an Autosize option setting of Keep size and position will not resize automatically on the canvas or at run time.
To change the order of the components, drag a component to the front or to the left of another component.
The following items apply to panel containers:
If an object has the Autosize option set to Keep size and position, and you want that object to occupy the entire width of the available space, you must set the Width property to 100%.
Note: Reports and charts do not automatically re-execute once the page loads and the screen size changes. You must re-execute reports and charts to ensure that the content refreshes. If the output format of a chart is HTML5, the chart content refreshes automatically and you will not have to re-execute.
You can easily add content inside a container, such as a panel, in the native HTML canvas. However, if the Autosize Children property is enabled, the container moves when you try to add content to it. To prevent this movement, use the following steps:
In the Properties panel, under Autosize options, click Accept any changes, if you want the element to resize automatically.
Click Keep size and position, if you want the element to remain fixed in the container.
The content now appears inside the container.
If you place an object that has Autosize Children set to No inside a container that has Autosize Children set to Yes, and the Autosize options property set to Accept any changes, the object will move to the upper-left corner of the container.
When a container has Autosize Children set to Yes, and a report or chart is added to that container, the Autosize options property for the report or chart is automatically set to Accept any changes.
When a Tab, Accordion, or Window container has Autosize Children set to Yes, and multiple reports or charts are added to it, use the Number of columns property. Select the number of columns you want from the drop-down list and arrange the contents in the container, as desired. This ensures the contents will be arranged the same for all browsers. If you do not use the Number of columns property, different browsers may arrange the contents in different ways.
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.
Web Palette. You can choose a color from common web colors.
Named Colors. You can choose a color from common named colors.
System Colors. You can choose a color based on the colors of App Studio.
Custom Color. You can drag red, green, and blue sliders to create custom 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 hexadecimal value on the Background-color property line.