Harness, Section,
and Flow Action forms
|
A cell in a layout can contain an image (such as a PNG, JPG, or GIF file).
If the image is not already loaded to an appropriate binary file rule, create a binary file rule and upload the image to the binary file rule before attempting to add the image to the harness, section, or flow action form. Enter webwb as the first key part — the Application Name — of the binary file rule.
1. Drag and drop the Image control
Click the down-arrow () at the right end of the Basic control group () and select the Image control (). Drag the control to the cell or header that is to contain the property value. When the pointer changes shape to indicate that a single cell is selected, release the mouse button to drop the control.
If the cell is not empty, the dropped control replaces the current contents of the cell. The default image is a 20-pixel square temporary image ( ).
Click the magnifying glass icon ()to display the Cell Properties panel.
Your updates to this panel can update the rule form immediately or upon clicking Apply, depending on the Property Panel settings in your Edit preferences. See Setting preferences. If the panel is pinned(), the wireframe on the rule form changes immediately to reflect your inputs. If the panel is not pinned(), click Apply to apply your inputs.
2. Complete the Cell Properties panel — Top fields
Complete the top fields of the Cell Properties panel.
Enter in the Image field the three key parts of a binary file rule, in the format zzzzz/name.type, where zzzzz is the Relative Path on the Main tab (typically images), name is the File Name key part, and type is the File Type key part, such as JPG, GIF, or PNG. (The Application Name key part must be webwb.)
To search through binary file rules containing images, click the magnifying glass icon ( ) to start the Image Catalog tool. Confirm that any image you choose belongs to a RuleSet and Version that is to be available to users of your application. See About the Image Catalog tool.
Complete the optional Tool Tip field by identifying a field value rule. Click the magnifying glass icon ( ) to open or create the field value rule. The SmartPrompt list shows field values with @baseclass as a first key part and pyActionPrompt as the second key part.
3. Complete the Cell Properties panel — General tab
Field |
Description |
Visible |
Select to determine when the image appears. Select
|
Condition |
If you selected
|
Run on Client? |
This field appears only if you select Select to indicate that the Condition field contains a simple property comparison test that will be evaluated on the user workstation in response to a client event. See Implementing dynamic form actions and the Client Event Editor. Clear to indicate that the Condition field contains a when condition rule name or an expression to be evaluated once upon initial display of the form. |
4. Complete the Cell Properties panel — Advanced tab
Complete the Advanced tab.
Field |
Description |
Width |
As a best practice, use Smart Layouts to achieve uniform width of cells throughout your application's forms. You can set the width of Smart Layout templates using the Application Skin wizard. Optional. Enter a positive number for the width in pixels of this image. (At runtime, normal browser processing for rendering tables determines the actual displayed width.) This field appears only when the Width field in the Layout panel or
Repeat panel (for the layout containing this cell) is
set to
|
Height |
As a best practice, use Smart Layouts to achieve uniform height of cells throughout your application's forms. You can set the height of Smart Layout templates using the Application Skin wizard. Optional. Enter a positive number for the height in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed height.) This field appears only when all columns in the Layout are not controlled by Smart Layout column restrictions (that is, all columns have the
|
Read-Write Style |
Optional. By default, when the work object form
or flow action form appears in read-only mode, the CSS
style named The SmartPrompt list shows all styles that start
with the word |
Read-Only Style |
Optional. By default, when the work object form
or flow action form appears in read-only mode, the CSS
style named The SmartPrompt list shows all styles that start
with the word |
Inline Style |
To apply inline styling to this cell only, type a CSS style definition in this field, or click the magnifying glass to access a Style Editor window. Styles you enter in this field supplement and override style elements defined in style sheets, according to normal CSS rules. Inline styles are recorded in the generated HTML for the form; they do not alter the CSS definitions. Using the Style EditorYou can select the font, color, font size, borders, margins, and other attributes of this cell using selection lists. The Style Editor maintains a preview of the resulting presentation. If you alter the style definition directly, click Apply to update the preview. Click OK to record the style defined with the Style Editor in the panel. |
Use Heading Styles |
Select to change the cell HTML element from <TD> to <TH>, with a resulting style change. (This is not typically useful for images.) |
SHIFT
key, select the cell, drag and drop
it in another cell, in the same one layout or another
layout.