Row Widget screen

Shows a row on a custom page.

Configure the Row widget

To configure the Row widget for a custom page, do the procedure in this topic.

Examples

  • (Example) Row Widget in Page Builder
  • Examples - Step-by-step use case examples, information about what types of examples are provided in the AgilePoint NX Product Documentation, and other resources where you can find more examples.

Prerequisites

How to Start

  1. Open the Custom Page Design screen.

    For information about how to open this screen, refer to Custom Page Design screen.


    Open Custom Page
  2. Click Add Widget.

    Custom Page Design screen
  3. On the Pick A Widget screen, on the Layout tab, click Row.

    Click Row Widget

Row Widget screen > Properties tab

Configures the properties for a row widget.

Figure: Row Widget screen > Properties tab

Row Widget screen Properties tab

Fields

Field NameDefinition

Name
Function:
Specifies the name of the row.
Accepted Values:
One line of text that can have spaces.
Default Value:
None

Height
Function:
Shows the height of the row in pixels.

To change the height of row, refer Add Section field in the Custom Page Design screen.

Accepted Values:
Read only.

Order
Function:
Specifies in which order the row shows on a custom page.
Accepted Values:
A positive integer.

Column Alignment
Function:
Specifies whether to stretch the column to completely fill the width.
Accepted Values:
  • Stretch - Stretches the column to completely fill the width.
  • Center - Column is aligned in center.
Default Value:
Stretch

Add
Function:
Adds the widget to the custom page.

Row Widget screen > Container tab

Configures the borders, padding, margins, and box shadow for a row widget.

Figure: Row Widget screen > Container tab

Row Widget screen Container tab

Fields

Field NameDefinition

Border Style
Function:
Specifies the border style around the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
  • Dashed
  • Dotted
  • Double
  • Groove
  • Hidden
  • Inset
  • None
  • Outset
  • Ridge
  • Solid
Default Value:
None

Border Top (px)
Function:
Specifies the width in pixels for the top border of the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Right (px)
Function:
Specifies the width in pixels for the right side border of the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Bottom (px)
Function:
Specifies the width in pixels for the bottom border of the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Left (px)
Function:
Specifies the width in pixels for the left side border of the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Color
Function:
Specifies the border color for the row.
To Open this Field:
  1. Turn on the Border field.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
ffffff
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Border Radius Top Left (px)
Function:
Specifies the radius in pixels for the top-left border of the row.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Top Right (px)
Function:
Specifies the radius in pixels for the top-right border of the row.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Bottom Left (px)
Function:
Specifies the radius in pixels for the bottom-left border of the row.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Border Radius Bottom Right (px)
Function:
Specifies the radius in pixels for the bottom-right border of the row.
To Open this Field:
  1. Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Top (px)
Function:
Specifies space in pixels on the top between the content and border of the row.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Right (px)
Function:
Specifies space in pixels on the right side between the content and border of the row.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Bottom (px)
Function:
Specifies space in pixels on the bottom between the content and border of the row.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Padding Left (px)
Function:
Specifies space in pixels on the left side between the content and border of the row.
To Open this Field:
  1. Turn on the Padding field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Top (px)
Function:
Specifies space in pixels on the top of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Right (px)
Function:
Specifies space in pixels on the right side of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Bottom (px)
Function:
Specifies space in pixels on the bottom of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Margin Left (px)
Function:
Specifies space in pixels on the left side of the container, outside of the border.
To Open this Field:
  1. Turn on the Margin field.
Accepted Values:
A positive integer.
Default Value:
None

Shadow Color
Function:
Specifies the shadow color for a row.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
ffffff

Horizontal Offset (px)
Function:
Specifies a horizontal distance in pixels between the shadow and the vertical line.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • A positive whole number - Shows the box shadow on the right side of a row.
  • A negative whole number - Shows the box shadow on the left side of a row.
Default Value:
0

Vertical Offset (px)
Function:
Specifies a vertical distance in pixels between the shadow and the horizontal line.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • A positive whole number - Shows the box shadow on the bottom side of a row.
  • A negative whole number - Shows the box shadow on the top side of a row.
Default Value:
0

Blur (px)
Function:
Specifies the number in pixels to create the blur effect on the box shadow.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
A positive integer.
Default Value:
0

Spread (px)
Function:
Specifies the radius in pixels for a box shadow.

If the value is not specified, the shadow shows on the same size as the widget.

To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • A positive whole number - Increases the size of a box shadow.
  • A negative whole number - Decreases the size of a box shadow.
Default Value:
0

Set Shadow Inside
Function:
Specifies whether to show the box shadow into the row.
To Open this Field:
  1. Turn on the Box Shadow field.
Accepted Values:
  • On - Shows the box shadow into the row.
  • Off - Shows the box shadow outside the row.
Default Value:
Off

Add
Function:
Adds the widget to the custom page.

Row Widget screen > Background tab

Configures the background color and image for a row widget.

Figure: Row Widget screen > Background tab

Row Widget screen Background tab

Fields

Field NameDefinition

Background Color
Function:
Specifies the background color for the row.
Accepted Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
ffffff
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Image Source
Function:
Specifies the source for an image to set as a background for the row.
Accepted Values:
  • Web URL - Specifies the absolute URL for an image.
  • Image Library - Uses an image from the image library.

    To use image from image library, click Pick An Image.

Default Value:
Image Library
Limitations:
This field is available in these releases:

Background Image URL
Function:
Specifies the URL of an image file to set as a background for the row.
To Open this Field:
  1. In the Image Source field, click Web URL.
Accepted Values:
One line of text (a string) in URL format that points to an image file.

The file can be one of these types:

  • .png
  • .jpg
  • .jpeg
  • .gif
  • .bmp
  • .tif
Default Value:
None
Example:
https://mysite.com/demo/image/upload/Sample.jpg
Limitations:

.jpeg and .tif format files are permitted, and .bmp format files are not permitted in these releases:

Pick An Image
Opens this Screen:
Image Picker screen
To Open this Field:
  1. In the Image Source field, click Image Library.
Function of this Screen:
Specifies an image file to show on your page or menu.
Limitations:
This field is available in these releases:

Stretch Background Image
Function:
Specifies whether to stretch the background image to fully fill the row.
Accepted Values:
  • On - Stretches the background image to fully fill the row.
  • Off - Shows the background image in original size. You can set the background image of the row to be repeated.
Default Value:
Off

Repeat Mode
Function:
Specifies whether the background image of the row is repeated.
To Open this Field:
  1. Turn off Stretch Background Image.
Accepted Values:
  • Don't Repeat - The background image does not repeat. The image shows one time.
  • Repeat Mode - The background image repeats both vertically and horizontally.
  • Repeat Horizontally - The background image repeats horizontally.
  • Repeat Vertically - The background image repeats vertically.
Default Value:
None

Add
Function:
Adds the widget to the custom page.

Row Widget screen > CSS tab

Configures the CSS classes for a row widget.

Figure: Row Widget screen > CSS tab

Row Widget screen CSS tab

Prerequisites

Fields

Field NameDefinition

CSS Classes
Function:
Specifies custom CSS classes to apply to the row widget.
Accepted Values:
One or more custom CSS classes from the list.

This field shows the CSS classes that are configured in the CSS files you upload on the Style Properties screen.

Default Value:
None

Add
Function:
Adds the widget to the custom page.