Pop-Up Select form control

A form control that lets a form user select an item from a list with one or more columns that shows on a pop-up screen.


Pop-Up Select form control

Configure the Pop-Up Select form control

To configure the Pop-Up Select Pop-Up Select icon control, do the procedure in this topic.

Video: Common Configuration Settings in eForm Controls

Examples

How to Start

  1. Open eForm Builder.

    For information about how to open this screen, refer to eForm Builder screen.


    Eform Builder screen
  2. On the eForm Builder screen, in the Toolbox, open the Advanced Controls tab.

    Advanced Controls tab
  3. On the Advanced Controls tab, drag a Pop-Up Select Pop-Up Select icon form control onto your eForm.

    Pop Up Select Form Control

Procedure

  1. Complete the settings on the configuration screens.

    You can use the Data screen screen to specify a variable.

General

Specifies the basic configuration for the Pop-Up Select form control.

Figure: General tab

General tab

Fields

Field NameDefinition

Label
Description:
Specifies the text label that shows on your form for the control.
Allowed Values:
Default Value:
Different for different controls.
Accepts Variables:
Yes
Example:
This is a common configuration field that is used in many examples. Refer to:
  • 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.
Limitations:

Support for process data variable as a label is available in these releases:

Internal Name
Description:
Specifies a unique, technical name for your control.
Allowed Values:
One line of text (a string).

Not Accepted:

  • Spaces
Default Value:
Different for different controls.
Example:
This is a common configuration field that is used in many examples. Refer to:
  • 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.

Help Text
Description:
Specifies the text to shows when a runtime app user hovers their cursor over the form control.
Allowed Values:
More than one line of text.
Default Value:
None
Example:
Refer to:

Help Text Display
Description:
Specifies if the field shows the text in the Help Text field when the runtime app user hovers over the label or field.
Allowed Values:
  • None - Does not show the help text.
  • Hover On Label - Shows the help text when you put your mouse on the label.
  • Hover On Field - Shows the help text when you put your mouse on the field.
  • Hover On Both - Shows the help text when you put your mouse on the label and Field.
Default Value:
None
Example:
Refer to:

Configure

Configures advanced settings for your form control.

Figure: Configure tab

Configure tab

Fields

Field NameDefinition

Lookup Source
Description:
Specifies a reusable lookup configuration. The lookup configuration includes the data source and other configuration values for the lookup.
Allowed Values:
A valid lookup source
Default Value:
None
Example:
Refer to:

Add Lookup Add Lookup icon
Function:
Opens the screen to configure a lookup.

There is more than one path to configure a lookup. Make sure you use the document that shows the path for your lookup.

Example:
Refer to:

Bind Lookup Values To A Repeating Control (Optional)
Description:
Specifies to bind the lookup values to either a Subform or a Data Grid form control to store the results of the lookup procedure.

This is an alternative to binding each field of the specified form control with the results of the lookup.

To Open this Field:
  1. In the Lookup Source field, select your lookup from the list.
Allowed Values:
  • The display name of a Subform form control.
  • The display name of a Data Grid form control.
Default Value:
None
Example:
Refer to:

Bound Column
Description:
Completes the column value using a specified field from your lookup source..

If you bind the lookup values to subform, the internal name of the subform field must match the value of this field.

To Open this Field:
  1. In the Lookup Source field, select your lookup from the list.

    The lookup type must be Multiple Columns.

Allowed Values:
Read only.

When you select a lookup source from the Lookup Source field, this field shows the column value from the specified lookup source.

Default Value:
None

Header
Description:
Specifies the custom heading for the column.
To Open this Field:
  1. In the Lookup Source field, select your lookup from the list.

    The lookup type must be Multiple Columns.

Allowed Values:
One line of text (a string).

Accepted:

  • Letters
  • Numbers
  • Spaces
  • Special characters
Default Value:
The value from the Bound Column field.

Width (%)
Description:
Specifies the width of the column as a percentage of the pop-up screen width.
To Open this Field:
  1. In the Lookup Source field, select your lookup from the list.

    The lookup type must be Multiple Columns.

Allowed Values:
An integer.

Represents:

  • A percentage
Default Value:
None
Limitations:

This field is available in these releases:

Width (px)
Description:
Specifies the width of the column in pixels to show on the pop-up screen.
To Open this Field:
  1. In the Lookup Source field, select your lookup from the list.

    The lookup type must be Multiple Columns.

  2. Select Accept Width In Pixels.
Allowed Values:
An integer.
Default Value:
None
Limitations:

This field is available in these releases:

Visible
Description:
Specifies whether to show the column on the pop-up screen.
To Open this Field:
  1. In the Lookup Source field, select your lookup from the list.

    The lookup type must be Multiple Columns.

Allowed Values:
  • Selected - Shows the column on the pop-up screen.
  • Deselected - Hides the column on the pop-up screen.
Default Value:
Selected

Javascript To Execute After Lookup Completion
Description:
Specifies which JavaScript function to run after the lookup is complete.
To Open this Field:
  1. In the Lookup Source field, select your lookup from the list.
Allowed Values:
The name of a Javascript function that exists in your app.

For more information, refer to (Example) Use Custom JavaScript in an eForm.

Default Value:
None
Example:

ConfirmSubmission where one of these is your function:

function ConfirmSubmission()
  {
    alert ('Are you sure to submit this form?');
    return true;
  }
function ConfirmSubmission(parameter1,parameter2)
  {
    window.alert ( parameter1 * parameter2);
    
  }

Also refer to:

On Lookup Completion, Trigger Change Event For
Description:
The change event JavaScript function runs when the value of a lookup is changed.

You can add the change event function in your app. For more information, refer to (Example) Use Custom JavaScript in an eForm.

To Open this Field:
  1. In the Lookup Source field, select your lookup from the list.
Allowed Values:
  • None - The value of the form controls do not change based on a lookup.
  • All Target Controls - The value of the form controls change based on lookup.
Default Value:
None
Example:
Refer to:

Accept Width In Pixels
Description:
Specifies whether the app designer can configure the width of the column in pixels.
Allowed Values:
  • Selected - Specifies the width of the column in pixels.
  • Deselected - Specifies the width of the column as a percentage of the pop-up screen width.
Default Value:
Deselected
Limitations:

This field is available in these releases:

Always Show Pop-Up
Description:
Specifies whether to show the list of options on the eForm screen, or on a pop-up screen.
Allowed Values:
  • Deselected - Shows the options on the main eForm screen.
  • Selected - Shows the options on a pop-up screen.
Default Value:
Deselected
Example:
Refer to:

Allow Multiple Selections
Description:
Specifies whether you can select more than one option for a repeating control.
Allowed Values:
  • Deselected - Lets you select only one option for a repeating control.
  • Selected - Lets you select more than one option for a repeating control.
Default Value:
Deselected
Example:
Refer to:

Appearance

Specifies the look and feel for your form control.

Figure: Appearance tab

Appearance tab

Fields

Field NameDefinition

Font Family
Description:
Specifies the font family of the input text and label.
Allowed Values:
A font name from the list.
Default Value:
  • Modern theme - Roboto
  • Classic theme - Arial
Example:
Refer to:

Font Style
Description:
Specifies the style of the font for the input text and label.
Allowed Values:
  • Bold - Shows the input text and label in bold.
  • Underline - Shows the label underlined.
  • Italic - Shows the label in italic.
Default Value:
None
Example:
Refer to:

Background Color
Description:
Specifies the background color for your control.
Allowed 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:
#ff0000
Example:
Refer to:

Border Color
Description:
Specifies the border color for your control.
Allowed 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:
#ff0000
Example:
Refer to:

Foreground Color
Description:
Specifies the foreground color for your control.
Allowed 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:
#ff0000
Example:
Refer to:

Field CSS Class
Description:
Specifies a CSS class for the field in your control.
Allowed Values:
A valid CSS class.
Default Value:
None

If you specify your CSS CSS icon on the top menu, the CSS is populated.

Example:
Refer to:

Container CSS Class
Description:
Specifies a CSS class for the container of your control.
Allowed Values:
A valid CSS class.
Default Value:
None

If you specify your CSS CSS icon on the top menu, the CSS is populated.

Example:
Refer to:

Font Size (px)
Description:
Specifies the size of the input text and label for your form control.
Allowed Values:
An integer.

Range:

  • Greater than 0
Default Value:
  • Classic theme - 12
  • Modern theme - 14
Example:
Refer to:

Behavior

Specifies how the control shows on your form.

Figure: Behavior tab

Behavior tab

Fields

Field NameDefinition

Enabled
Description:
Specifies if the form user can change the value of a field.
Allowed Values:
  • Selected - The form user can change the value.
  • Deselected - The input cannot change the value.
Default Value:
Selected
Example:
Refer to:

Right To Left
Description:
Specifies if the text for this control, including user input, shows from right to left.
Allowed Values:
  • Deselected - The text shows from left to right.
  • Selected - The text shows from right to left.
Default Value:
Deselected
Example:
Refer to:

Visible
Description:
Specifies if the runtime app user sees the field.
Allowed Values:
  • Selected - The runtime app user sees the field.
  • Deselected - The runtime app user does not see the field.
Default Value:
Selected
Example:
Refer to:

Advanced

Specifies advanced settings for your form control.

Figure: Advanced tab

Advanced tab

Fields

Field NameDefinition

Field ID
Description:
Shows an ID of the control.
Allowed Values:
Read only.
Default Value:
Different for different controls.
Example:
Refer to:

Maximum Height (px)
Description:
Specifies the maximum height for your control in pixels.
Allowed Values:
An integer.

Range:

  • 1-9999
Default Value:
300

Show On Tablet Devices
Description:
Specifies if the form field shows on a tablet.
Allowed Values:
  • Selected - The form field shows on a tablet.
  • Deselected - The form field does not show on a tablet.
Default Value:
Selected
Example:
Refer to:

Show On Mobile Phone Devices
Description:
Specifies if the form field shows on a mobile device.
Allowed Values:
  • Selected - The form field shows on a mobile device.
  • Deselected - The form field does not show on a mobile device.
Default Value:
Selected
Example:
Refer to: