FlexLayout properties and attributes

This topic lists and describes the properties and attributes you can set for FlexLayout components, using the Edit FlexLayout Attributes dialog box.

Table 1. FlexLayout properties and attributes (common)
Field/Option Description
Index column This field indicates the zero-based identification number of each region in the FlexLayout component. These index numbers are assigned automatically when the region is created.
ID This field indicates the region ID, which is assigned automatically when the region is created but can be changed. This field indicates the scope-based identifier of each region in the FlexLayout component.

The default names for these IDs depend on the user's editing scope:

  • Vendor region IDs are set as UNKNOWN<n>.
  • Region IDs created with a scope of "Site" are set as UNKNOWN<n>_SITE.
  • Region IDs created with a scope of "Group" are set as UNKNOWN<n>_GROUP_groupName.
  • Region IDs created with a scope of "User" are set as UNKNOWN<n>_USER_userName.

where:

  • <n> is an automatically assigned number.
  • groupName is the name of the user group to which the customization applies.
  • userName is the name of the individual user to whom the customization applies.

You can change these default names to be unique identifiers.

Length This field indicates the number of units, either Flex or CharThis field indicates the zero-based, that defines the width or height of the flex region.

In the list on the left, this is read-only. In the property sheet on the right, you can enter the number of units.

Unit Use this field to specify the units used to calculate the Length of the region. This drop-down list has these options:
  • Char - Indicates the number of characters that will fit in the region. This setting is fixed and not affected by the length of other regions in the component.
  • Flex - Indicates the relative portion occupied by the region. The absolute length of the region varies, based on the Length of each Flex region, the total number of regions, and the Minimum Length and Maximum Length property specifications.
Orientation This option specifies how the components in this region are to be oriented:
  • Fill - When using a single component for the region, selecting this option causes the child to expand to fill the entire region. This option does not work if there is more than one component in the region.
  • Horizontal - This option causes components in the region to display in a single horizontal row.
  • Vertical - This option causes components in the region to display in a single stacked (vertical) column.
Alignment The options available in this field depend on what option is selected for the Orientation. If Orientation is set to:
  • Fill, then this option is not available.
  • Horizontal, then this field offers these options:
    • Top - Aligns each component in the region to the top of the region.
    • Middle - Aligns each component in the vertical middle of the space.
    • Stretch - Expands or contracts the component vertically to fill the available space.
  • Vertical, then this field offers these options:
    • Left - Aligns each component in the region to the left side of the region.
    • Center - Aligns each component in the horizontal center of the space.
    • Stretch - Expands or contracts the component horizontally to fill the available space.
Pack The options available in this field depend on what option is selected for the Orientation. If Orientation is set to:
  • Fill, then this option is not available.
  • Horizontal, then this field offers these options:
    • Start - Arranges the components sequentially, starting at the left edge of the region.
    • Center - Arranges the components in a group at the horizontal center of the region.
    • End - Arranges the components sequentially, with the last component aligned with the right side of the region.
  • Vertical, then this field offers these options:
    • Start - Arranges the components sequentially, starting at the top of the region.
    • Center - Arranges the components in a group at the vertical center of the region.
    • End - Arranges the components sequentially, with the last component aligned with the bottom of the region.
Minimum Length This field specifies the minimum allowable height or width of the region.

The Orientation option determines whether this applies to the height or the width.

Maximum Length This property specifies the maximum allowable height or width of the region.

The Orientation option determines whether this applies to the height or the width.

Auto Size This property is an option that allows the FlexLayout component to resize between a visible and hidden component. The FlexLayout component expands and minimizes to the height and width of a region visible to the user. When a component is hidden, the FlexLayout component is shown in minimum height and width. And when the component is visible, the FlexLayout component expands not more than the component size.
Default Margin This option establishes a default margin for all child components in this region, calculated in Mongoose character units.
Background Image This option causes an image to display in the background of this region. You can use only images that have been imported into the system.
For Report type forms, you can use the Background Image property to add watermarks on any region within the MainFlexLayout component.
Note: Watermark images are rendered "as is," behind the contents of form reports.

Support for watermarks on Report type forms is available only for PDF, Printer, and Cloud Printer output formats.

Theme Border

This option enables or disables the region's border of a FlexLayout component on WinStudio and web client.

Note: Enabling this option is applicable only for FlexRegionOnly and FlexLayoutAndRegion border visibility.

Use the Theme Editor to specify these border attributes:

  • Border Color - Select the border color.
  • Top Border - Select the check box to display the top border.
  • Right Border - Select the check box to display the right border.
  • Bottom Border - Select the check box to display the bottom border.
  • Left Border - Select the check box to display the left border.
  • Border Visibility - Select from these options:
    • None - No border is displayed for both the FlexLayout and FlexRegion.
    • FlexLayoutOnly - The border is displayed around the FlexLayout only. Any border for the regions are not displayed even if the Theme Border from the Flex Region properties is enabled.
    • FlexRegionOnly - The border is displayed around the FlexRegions only. Any border around the FlexLayout are not displayed. Use the Theme Border attribute from the Flex Region properties to enable or disable the border visibility of a specific region.
    • FlexLayoutAndRegion - The border is displayed for both the FlexLayout and FlexRegion. The border of the region is only displayed if the Theme Border attribute of that region is enabled.
Note: You can also use the FlexLayout theme classes that are available under the Infor theme. These theme classes have predefined border settings in the Theme Editor:
  • FlexLayoutAndRegionBorder
  • FlexLayoutBorder
  • FlexRegionBottomBorder
  • FlexRegionTopBorder
  • FlexRegionLeftBorder
  • FlexRegionRightBorder
  • FlexRegionBorder
VisibleWhen This option specifies the conditions in which this region is visible.

Clicking the ellipsis () button opens the Edit Condition dialog box, which you can use to set the conditions under which the region displays.

Animation This option specifies an animation effect that is used to display the region when it becomes visible.
Contained Components Clicking this button launches the Edit Contained Components dialog box, which is used to view and modify any components that are contained within this FlexLayout component.
Note: The Edit Contained Components dialog box displays all components contained within the FlexLayout component. The contained components are grouped by region and are arranged by sequence number with its respective region.
Region control buttons Use this set of buttons, located in the lower left corner of the Edit FlexLayout Attributes dialog box, to add, delete, and rearrange the order of the regions in the FlexLayout component.
FlexLayout Adorner Use this set of buttons to select the orientation of a flex region, and to add or delete a FlexLayout component within a region.
  • Use the Orientation Adorner to select horizontal or vertical box when creating a flex region.
  • Use the Add flex region to add a region on a selected FlexLayout component. The new flex region is added to the last index of the FlexLayout component. The orientation of the new region is based on the orientation adorner.
  • Use the Remove flex region to delete the last region index of the selected FlexLayout component. When deleting a flex region that contains a child component, a pop up message will appear to confirm if the delete action will include child components.
  • Use the Add Flex to add a flex layout to a selected region that has no contained component. The FlexLayout component on a region can be a column or a row.
When adding contained components (other than a FlexLayout component) to a FlexLayout component, these options can be specified:
Note: These options are available in the Edit FlexLayout Attributes dialog box for any component that is contained in a FlexLayout component. To set them, click the Edit FlexLayout button in the upper left corner of the child-component.
Field/Option Description
Region Index Use this option to select the index number of the region in which the child is placed. Regions are numbered in the order in which they appear in the Edit Flex Layout Attributes dialog box.

For example, to add a child component to the second region listed, select 1 in the Index column.

Note: This attribute uses zero-based index, such as 0, 1, 2, and so on.

You can also use this option to move a component from one region of the FlexLayout component to a different region.

Margin To use the Default Margin setting, leave this field blank.
To override the Default Margin property setting for this contained component, specify new margins, using Mongoose characters units.
Note: You can have different left, top, right, and bottom margins, by specifying four numbers separated by commas.

For example, suppose you want to increase only the top margin. In this case, you would specify 0,3,0,0 in this field.

FlexLayout properties specific to Report type forms

The properties and attributes listed and described in this section are used only for Report type forms. They are available only in the MainFlexLayout component on forms created by the Form Wizard.
Note: Other than Region Type, these attributes are not available with all regions of the main FlexLayout component (MainFlexLayout). The additional properties and attributes available depend on what Region Type is selected.

You can add FlexLayout components to a Report type form after it has been created, but those FlexLayout components will not have these properties and attributes.

Field/Option Description
Region Type This field names the type of region that the FlexLayout region is being used for. Whatever you specify in this field determines what other Report properties are available.
Collection For Detail-related regions, this field specifies what collection is the data source for the detail.

Optionally, multiple regions can be specified for the same section, using VisibleWhen expressions to show/hide regions.

Group Property For group-related regions, this field specifies the property being used to group the other properties.
Repeat on New Page When a new page is created, this option causes the Detail Header (and Group Header, if applicable) to be shown on the new page.

This option is used only for Detail Header and Group Header regions.

Repeat on Collection Change When the last record for a collection has been displayed and the next record is from a different collection, this option causes the Detail Header (and Group Header, if applicable) for the new collection to display before the first record for that collection.

This option is used only for Detail Header and Group Header regions.

Insert Page Break Before This option causes a page break to be inserted before the region where this is set to True.
Note: The first page break before a Detail or Group region will be automatically skipped in order to eliminate blank pages at the beginning of the report.
Insert Page Break After This option causes a page break to be inserted after the region where this is set to True.
Note: The last page break after a Detail or Group region will be automatically skipped in order to eliminate blank pages at the end of the report.
Reset Page Number This option causes the page number (in whatever region this is set to True) to be reset to 1. It also starts a new count for the total pages starting with that page.

For example, this can be useful on reports like invoices, where each invoice has separate page numbering.

Can Grow When this option is set to True, all components of the region are checked to see how much space they need, based on the data of the current row. The region height is then changed to allow for enough space to contain the components.

When this option is set to True, it forces the Orientation setting to Fill and makes it read-only.

Keep With Previous Region This option causes the region where this is set to True to print on the same page as the region immediately before it.

When set to multiple regions in succession, a linked set of regions are created that print together on the same page. When linked regions do not fit on the current page, a new page is created and the linked regions begin printing at the top of the new page.

Print at Bottom of Page This option causes the region where this is set to True to print at the bottom of the page, directly above the page footer.

When set to True, a page break is inserted after any region that has this value. This option may be used in conjunction with Keep with Previous Region property to force multiple regions to print together at the bottom of the same page.

Sub-report Form If you have another Report type form that you want to use as a sub-report, select the report from the drop-down list.
Sub-report Parameters Use this field to supply any parameters required by the sub-report form specified in the previous field.

To specify parameters, either enter them into this field, or click the ellipsis () button and use the Specify Form Run Options dialog box to provide the parameters.

Values from any collections that are in the current context on the parent report form can be used when calling the sub-report. This might include things like using P(RowPointer) when calling a sub-report for related notes.

Accessing the Edit FlexLayout Attributes dialog box

The Edit FlexLayout Attributes dialog box is accessed by clicking the Edit FlexLayout button in the upper left corner of a FlexLayout component or any of its contained components.