Button Widget screen

Shows a button on a custom page.

Figure: Button Widget screen

Button Widget screen

Examples

  • (Example) Button 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. Click Page Builder.
  2. On the Page Builder screen, do one of these:
    • Create a Custom Page.
      1. Click Add Row

        Custom Page screen
        .
    • Open a custom page
      1. Click the bottom horizontal line of the row or right side vertical line of the row or column.

        Click Bottom Line
      2. Click Add.

        Click Add
  3. Click Add Widget.

    Custom Page Design screen
  4. On the Pick a Widget screen, on the Content tab, click Button Button icon.

Fields

Field Name Definition

Button Text

Function:
Specifies the text for the button to show on your custom page.
Accepted Values:
One line of text.
Default Value:
None
Example:

Actions

Function:
Specifies what the button does.
Accepted Values:
  • Navigate to URL - Opens the URL specified in the Navigate to URL field.
  • Scroll in To - Goes to the row specified in Row Names field.

    To see the effect of this functionality, your page size must be more than your screen size.

  • Refresh Page - Refreshes the web page.
Default Value:
Navigate to URL
Limitations:
The Action field is available in these releases:

Navigate to URL

Function:
Specifies the URL link for the button to open.
To Open this Field:
  1. On the Button Widget screen, in the Actions list, select Navigate to URL.
Accepted Values:
A string in URL format.
Default Value:
None
Limitations:
The Navigate to URL field is available in these releases:
Example:

Target

Function:
Specifies whether to open the URL in a new tab or a same tab.
To Open this Field:
  1. On the Button Widget screen, in the Actions list, select Navigate to URL.
Accepted Values:
  • Open in New Tab - The URL opens in a new tab.
  • Open in Same Tab - The URL opens in a same tab.
Default Value:
Open in New Tab

Row Names

Function:
Specifies the name of the row where the button goes.

The row names come from the Name field in Row Properties screen.

To Open this Field:
  1. On the Button Widget screen, in the Actions list, select Scroll in To.
Accepted Values:
A row name from the list.
Default Value:
None
Limitations:
The Row Names field is available in these releases:

Background Color

Function:
Specifies the background color for the button.
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)

Text Color

Function:
Specifies the color for the label text to show in the button.
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:
000000
Example:
  • #ff0000
  • #183048
  • #e16229
  • rgb(25,151,66)
  • rgba(87,177,201,2)

Border Style

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

Border Left (px)

Function:
Specifies the width in pixels for the left side border of the button.
To Open this Field:
  1. On the Button Widget screen, 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 button.
To Open this Field:
  1. On the Button Widget screen, Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Top (px)

Function:
Specifies the width in pixels for the top border of the button.
To Open this Field:
  1. On the Button Widget screen, 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 button.
To Open this Field:
  1. On the Button Widget screen, Turn on the Border field.
Accepted Values:
A positive integer.
Default Value:
None

Border Color

Function:
Specifies the border color for the button.
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 button.
To Open this Field:
  1. On the Button Widget screen, 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 button.
To Open this Field:
  1. On the Button Widget screen, 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 button.
To Open this Field:
  1. On the Button Widget screen, 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 button.
To Open this Field:
  1. On the Button Widget screen, Turn on the Border Radius field.
Accepted Values:
A positive integer.
Default Value:
None

Add

Function:
Adds the widget to your custom page.