Using layout tools

This topic explains how each section of the layout tools pane is used.

Collection

This section is used for specifying information common to the entire layout, such as the data collection the layout should be bound to, if any. If a collection is used, the data source for that collection is displayed.

In the Properties area, all properties — bound and unbound — that are fetched from the collection are listed. You can click a property in the Properties list to see where it is used in the active card design.

This table describes more features of the Properties user interface:

Feature Description


Property is bound to the collection.


Property is unbound.


Property is assigned to a cell in the layout. To remove a property from a cell in the layout, click this icon next to the property to remove.


Property is not assigned to a cell in the layout. To assign a property to a cell in the layout, first select that cell in the active card design, and then click this icon next to the property to assign.


To remove the property from the list, click this icon. You can add the property back to the list by selecting it in the drop-down list.


To create a new property, select <New unbound property>. Give the new property a unique name and then click OK.

In the Unbound Cells area, cells in the layout that have been named but are unrelated to the data source collection are listed. You can click a cell in the list to see where it is located in the active card design.

Regions

This section is used for working with regions in a selected layout. Bound (one entry per record in a collection) and unbound (one entry per layout) regions are indicated by the icon to the left of the name, similar to collection properties. The Main region is bound if the layout has a collection associated with it; otherwise, it is unbound. An embedded region has the same type, bound or unbound, as its parent region, with the exception of embedded header regions of a bound Main region. These embedded regions are always unbound.

To add a region, either add a pre-defined header region from the Regions drop-down list or select <New region>, give the new region a unique name, and then click OK. Header regions can be added to only the Main region.

When you select a region in the Regions list, that region is displayed in the active card design.

If a floating region is selected, you can specify these attributes:

  • Type: Specify bound or unbound. In order to select bound, you must first specify a collection for the selected floating region.
  • Peer Boundary?: When selected, this check box indicates that the region is a peer boundary for filters and alerts. Filters cannot be passed to components outside of the peer boundary. When cleared, the region is no longer a peer boundary, and its components are joined with the Main region. Also see AlertPeers.

    For bound layouts, this setting is available for only bound floating regions. For unbound layouts, this setting is available for only unbound floating regions.

  • Dimensions: Specify the width and height, in pixels, for the region and then press Enter. If you do not specify these values, the dimensions of the region’s default card are used. Dimensions are indicated by a dashed rectangle in the active card design.
  • Initial Placement: Specify these settings:
    • My Point: This is used to place against the reference point.
    • Reference Region: This is the viewport of one of the other floating regions.
    • Reference Point: This is the point on the reference region that the region is placed against.
    • X Offset: This is the percentage of reference region width for horizontal offset from the reference point.
    • Y Offset: This is the percentage of reference region height for vertical offset from the reference point.
  • Default Placement Transition: Specify the transition to use when the region is displayed to portal users.
  • Default Displacement Transition: Specify the transition to use when the region is removed.
  • Styles: Specify styles to be applied to the region. If you specify styles here, default styles are overridden. An example is provided in Layout use case: changing default styles on a layout-based drop-down list.

Cards

This section is used for working with cards in a selected region. The default card is the first card in the list. You can rearrange cards by dragging and dropping them to a new position in the list. This determines the order in which they are displayed in the active card design area and at runtime.

To add a new card for a selected region, specify the card type and select <New card> in the Cards list. Give the card a unique name and then click OK. The card is added to the active card design area. Next, use the Design section of the tools pane to add a table to the card and specify design attributes. Minimum and maximum pixel widths can be specified for cards in a card sequence.

When you add a card stack, one card at a time is shown in the active card design area, depending on the card selected in the card list in the tools area.

When you add a card sequence, the cards are shown next to each other in the active card design area.

Only the currently active card can be edited. Cards can be selected by either clicking somewhere on the card in the card design area, or in the cards list in the tools pane.

When a cell is selected, either by clicking a property in the Collection tool or by clicking a cell in the design area, the card containing the cell becomes the currently active card.

Embedded Regions

This section is used for working with embedded regions in a selected region. Embedded regions of the currently active region, embedded region cards, and embedded region attributes are listed. Embedded header regions (available only in the Main region) do not have cards, so the Cards area is not present when an embedded header region is selected.

Embedded header regions are made up by selected cells in the layout table. Other embedded regions are actual embedded regions with cards and layout tables embedded inside of a cell in a layout table.

When you select an embedded region or embedded region card in the lists, that region is highlighted in the active card design, and the design area is in embedded region design mode. When you select an embedded header region, cells belonging to the header are highlighted in the active card design, but the design area is not in embedded region design mode.

You can tell if an embedded region is assigned to a cell in the layout by checking the icon to the right of that region in the Embedded Regions list. To assign or un-assign an embedded region, select the cell in the layout and then click the icon. When you assign an embedded header region, the cell selection is always expanded horizontally to cover the entire row (for top and bottom headers) or vertically to cover the entire column (for left and right headers), as headers always span the whole layout table.

If you assign multiple cells to an embedded region, or assign one cell that has a non-empty type (for example, bound to a property), those cells are automatically inserted into a layout table and inserted into the embedded region. When assigning one cell without a type, the embedded region is initially empty.

To add a new embedded region, either add a pre-defined header region from the Embedded Regions list or select <New region>, give the new region a unique name, and then click OK. Embedded header regions can be added to only the Main region.

To add a new embedded region card, select <New card> in the Cards list, give the new card a unique name, and then click OK. You can rearrange cards by dragging and dropping them to a new position in the list.

If an embedded region is created inside another embedded region, the name indicates its location.

You can specify these attributes for an embedded region:

  • Default Transition: The default transition to use when rendering the embedded region.
  • Styles: The styles to apply to the embedded region.

Design

This section is used for specifying design attributes on a selected card.

To create a table for the card, specify the number of rows and columns and then click Initialize. The table dimensions are displayed upon initialization of the table. You can change table dimensions by clicking and dragging the bottom and right table borders in the active card design.

Also in the Design area, you can add rows and columns to the table and split and merge selected cells in the table.

For cards in a card sequence, you can set minimum and maximum pixel widths for each card. A card will not contract past a defined minimum width or expand past a defined maximum width. Also see Card sequence.

Cell

This section is used for specifying these attributes on a selected table cell:

  • Dimensions: Specify the width and height, in pixels, for the cell and then press Enter.
  • Type: Specify Property, Unbound, or Embedded. You can specify these additional attributes:
    • For type Property:
      • Property: Select the property for the cell.
    • For type Unbound:
      • Name: Specify a unique name for the cell.
      • Data: For changing data such as text and images on the portal. For information about changing literal text, see "Changing Text on the Home Page" in your portal administration guide. For information about changing translatable text, see Layout use case: changing multi-lingual text in a portal.

        For unbound cells, IPF supports these data types in this field: null, string, integer, decimal, Boolean, and date. You can specify the type by using the drop-down list, and then you can enter a value. For string, Boolean, and date types, controls are provided to make data entry easier.

      • Initialize from: A property used for initializing a value to the cell at runtime.
    • For both types:
      • Tooltip: Specify the tooltip string ID.
      • Placeholder: Specify the placeholder string ID.
      • Filter display name: Specify the filter display name string ID.
      • Enabled?: Select to make the cell enabled for use on the portal.
      • Rendered?: Select to have the cell displayed on the portal.
      • Field display format: You can specify an FDF to use for the cell. This controls the format of the data in that cell, as specified in the Data field. For example, ImageSP1000x340 is an image FDF that controls how the HomePageMarketingImage1.png image file is displayed on the portal. To view or edit a selected FDF definition, click the icon next to this field. This launches the Field Display Format Editor. When you save the FDF from the Layout Editor, an XML is generated, and the IPF field display formats list is updated.
      • Styles: This field shows styles to be applied to the cell. By default, styles from the specified FDF are used on the cell and the FDF style name is displayed in the Styles field as a placeholder. If no placeholder is displayed, it means the FDF does not have styles defined. You can click the icon next to the Field display format field to view or edit the FDF.

        To override the default FDF styles for a selected cell, click the check box and specify styles in the Styles field. You can also select the check box but leave the Styles field empty, to override with no styles on the cell.

Note: Many cell attributes can be overridden in layout script. For example, some of the menu options on the IPF portals are displayed even if you clear the Rendered? attribute for their cells. These menu options are controlled by the layout script, and they are displayed based on the type of customer (B2B or B2C) that is logged in.

Preview

To get a better understanding of how the current layout will look at runtime, you can preview a card in the Layout Editor.

The preview function consists of two parts: the control for selecting to use Preview and the preview style family, and the preview display area. The cells of the layout card are rendered in demo mode in the preview area.

The preview area can be resized by clicking and dragging on the separator between the layout card design area and the preview area.

When a cell is selected, either in the design area or the preview area, the corresponding cell is highlighted in the other area.