Skip to main content

Currency Input

The currency input widget gives you an input field to capture a user's currency input.

How to use Currency Input Widget

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget properties

These properties allow you to edit the Currency Input widget, and are present in the property pane of the widget. The following table lists all the widget properties.

PropertyDescription
Allow currency changeEnables/disables a currency dropdown next to the input which the user can use to change the selected currency.
CurrencySets the currency type for the widget. When using JS, accepts string ISO 4217 currency codes.
DecimalsSets the number of digits allowed after the decimal separator (0, 1, or 2).
Default textSets the default text in the input widget before the user has made any changes. This field can be bound to a table's selectedRow to update a record
Regexit's used to add custom validations you want to perform on user input.
ValidSets an expression to decide whether the user's input is considered valid. When the expression evaluates to false, the input is considered invalid and the widget shows Error Message.
Error messageSets the text of the error message to display if the user's input is considered invalid.
PlaceholderSets the placeholder text within the input box. Use to show a hint or example value to the user.
TooltipSets a tooltip that appears when the user hovers over the widget with the mouse. Use this to provide hints or extra information to the user.
RequiredSets whether the checkbox is a mandatory field. When the checkbox is within a Form widget, that Form's submit button is automatically disabled until the Checkbox is checked.
Show step arrowsControls visibility of step arrows. Turning this toggle off hides the step arrows to increment or decrement the values in the widget.
VisibleControls widget's visibility on the page. When turned off: The widget isn't visible when the app is published. It appears translucent when in Edit mode.
DisabledMakes the widget un-clickable or unusable. The widget remains visible to the user but user interaction isn't allowed.
Reset on SubmitClears the value entered by the user after form submission.
Auto FocusWhen enabled, the user's cursor focuses on the input box automatically on page load.
Animate loadingWhen turned off, the widget loads without any skeletal animation. You can use a toggle switch to turn it on/off. You can also turn it off/on using javascript by enabling the JS label next to it.
HeightIt configures how a widget’s height reacts to content changes. It has three possible configurations:
Fixed: The height of the widget remains as set using drag and resize.
Auto Height: The height of the widget reacts to content changes.
Auto Height with limits: Same as Auto height, with a configurable option to set the minimum and maximum number of rows that can be occupied by the widget.

Allow currency exchange

It enables/disables the currency dropdown next to the input box. If you enable this property, the user can change the currency from the dropdown.

Allow Currency Exchange

Placeholder

You can set a proxy text/value inside the input box using the placeholder property. It can be any message or hint for the expected input.

Placeholder

Default text

This property lets you set a default value for the widget before the user has made any changes. The value must be a number datatype.

Default text

Regex

Using Regex or Regular expression property, you can set specific constraints on the input you expect from the user.

For example, let’s add a regular expression for entering a price in multiples of 5.

.*[05]$

If you enter a value other than a multiple of 5, the widget shows an error message “invalid input.

Regular Expression (Regex)

Error message

If a user enters an incorrect value, the input widget shows a message “invalid input.” You can change this message by using the Error message property to provide better feedback on the input given by the user.

Error Message

Required

Entering a value in the input box is mandatory when the required property is enabled. You can also write a JS code to link this property to a user action. Click on JS next to the Required to write JavaScript code.

For example, let’s drag a checkbox widget checkbox1 onto the canvas and bind it to the Required property. To enable the Required when the user checks the checkbox, add the following JavaScript code in the Required property:

{{Checkbox1.isChecked}}

When you tick the checkbox, it enables the Required property, and the input box shows an error message “This field is required” if you haven't entered any input.

Error Message

Show step arrows

When Show step arrows property is turned on, the step arrows are displayed and user can use them to increase or decrease the value inside the widget. You can also use JavaScript code to dynamically show or hide the step arrows based on certain conditions or events. This can be useful if you want to enable or disable the step arrows based on the current state of the widget or other factors.

Show step arrows

Visible

Visible controls the widget’s visibility on the app’s page. The widget isn't visible on the published app if you turn off this property. You can also write a JS code to link the Visible property to a user action. Click on JS next to the Visible to write JavaScript code.

For example, drag a checkbox widget checkbox1 onto the canvas and bind it to the Visible property. To enable the Visible when the user checks the checkbox, add the following JavaScript code:

{{Checkbox1.isChecked}}

When you tick the checkbox, it enables the Visible property, and the input box is visible in the app.

Error Message

Disabled

It prevents the user from entering values in the widget. The widget is visible (if Visible is enabled), but user input isn't allowed. You can also write a JS code to link the Disabled property to a user action. Click on JS next to the Visible to write JavaScript code.

For example, drag a checkbox widget checkbox1 onto the canvas and bind it to the Disabled property. To enable the Disabled when the user checks the checkbox, add the following JavaScript code:

{{Checkbox1.isChecked}}

When you tick the checkbox, it enables the Disabled property and prevent a user input in the input box.

Disabled

Reset on submit

When Reset on Submit is enabled, the widget resets or clears the entered input after the user submits it.\ Let’s use the event onSubmit to show a message when input is submitted. You’ll see once the user submits and the message pops up, the currency input widget resets itself to its original state.

Disabled

Auto focus

When you enable Auto focus, the cursor focuses on the input box whenever the widget is loaded.

Disabled

Binding properties

These properties allow you to bind your currency input widget with any other widget in queries or JS objects.\ These properties help you share values between widgets and allow you to access the widget property within Queries or JS functions.

PropertyDescription
countryCodeContains the country code of the selected currency (string).{{currency_widget_name.Countrycode}}
currencyCodeContains the __ ISO 4217 code of the selected currency.{{currency_widget_name.Currencycode}}
isDisabledReflects the state of the widget's Disabled setting (bool).{{currency_widget_name.isDisabled}}
isValidReflects whether the widget's input is considered Valid (bool).{{currency_widget_name.isValid}}
isVisibleReflects the state of the widget's Visible setting (bool).{{currency_widget_name.isVisible}}
textContains the value of the widget's input, represented as a string.{{currency_widget_name.text}}
valueContains the value of the widget's input, represented as a number.{{currency_widget_name.value}}

Text

It fetches the formatted value that the user enters in the input box. It changes when the default value changes or the user enters a new value in the input box. The value is of String data type.

To bind the data in the currency input widget to another widget, open the property pane of it, and add the code snippet given below:

{{<currency_input_widget_name>.text}}

Where <currency_input_widget_name> is the name of your input box.

For example, take the widget currencyinput1 and bind its text to a text widget. Drag a text widget onto the canvas and add the following snippet:

{{currencyinput1.text}}

The text widget then displays the data present in the currency input widget.

Text

This property has many applications like it helps in parsing the values entered in the widget to a query.

Value

It fetches the value that the user enters in the input box. The value is of the Number data type.

To bind this widget with another widget using this property, Open the property pane of the desired widget and enter the snippet given below:

{{<currency_widget_name>.value}}

Where <currency_input_widget_name> is the name of your input box.

For example, bind a widget currencyinput1 value to a text widget. Drag a text widget onto the canvas and add the following snippet:

{{currencyinput1.value}}

The text widget then displays the value present in the currency input widget.

Value

currencyCode

It fetches the currency code of the chosen currency. For example, if the user has selected an American dollar. It fetches the value USD. A widget currencyinput1 uses this property to display the selected currency’s code in a text widget. Enter the code snippet given below:

{{currencyinput1.currencyCode}}
Currency Code

countryCode

It fetches the country code of the chosen currency. For example, if the user has selected an American dollar. It fetches the value US. A widget currencyinput1 uses this property to display the selected currency’s country code in a text widget. Enter the code snippet given below:

{{currencyinput1.currencyCode}}
Country Code

Events

EventDescription
onTextChangedSets an action to take place when the input's value is changed. Can be set from the GUI list of common actions (examples here), or you can define a custom JavaScript function to call instead.
onFocusSets an action to take place when the input area in the currency widget is focused. Can be set from the GUI list of common actions (examples here), or you can define a custom JavaScript function to call instead.
onBlurSets an action to take place when the input area in the currency widget loses focus. Can be set from the GUI list of common actions (examples here), or you can define a custom JavaScript function to call instead.
onSubmitSets an action to take place when the input is submitted with the ENTER key. Can be set from the GUI list of common actions (examples here), or you can define a custom JavaScript function to call instead.

Label

The property hosts a group of configurations that you can use to associate a display name and define a placement for the widget. These properties are usually useful when you want to design forms that follow a defined alignment for your form fields and give a professional look to your forms. Below are the properties that you can use:

LabelDescription
TextSets the label text of the widget.
PositionSets where the label appears relative to the widget's input area. Choose between Left, Top, or Auto.
AlignmentSets whether the label is left- or right-aligned.
WidthSets the width of the label. The number represents how many characters/columns wide the label is.

Text

It allows you to set the display name of the Currency Input. For example, if you want the user to enter an Item price on the currency input box, you can enter the text as “Item Price.”

tip

You can leave the text empty if you don't want any display name for your Currency Input widget.

Position

It allows you to specify the placement of the label. You can select one of the available options:

  • Top - It allows you to align the text at the top of the Currency Input box.
  • Left - It aligns the text to the left of the Currency Input box. When you select Left alignment, you get additional settings that you can use to control the alignment and define the text's width.
    • Alignment - With the help of alignment, you can define the placement of the text in accordance with the position of the Currency Input box. You can choose:
      • Left - It aligns the text to the widget's left boundary that's away from the Currency Input box.
      • Right - It aligns the text closer to the Currency Input box.
    • Width - With the help of width, you can define the number of columns in the grid that surrounds the widget. You can specify how close or far the text can be placed to the Currency Input box.
  • Auto - It automatically adjusts the position of the text based on the Currency Input box's height.
info

Columns are the dashed lines (-----) that surround a widget when you try to drag, and drop it on the canvas.

You can leave the label empty if you don’t want any labels.

How to set Lable Properties
Label StylesDescription
Text ColorSets the text color for the label. Accepts valid CSS color values.
Text SizeSets the size of the label font. Accepts valid CSS font-size values.
Label Font StyleToggles font styles (bold or italic).

Styles

Style properties allow you to change the look and feel of the widget.

Style PropertyDescription
Border RadiusRounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.
Box ShadowCasts a drop shadow from the frame of the widget. With JS enabled, this accepts valid CSS box-shadow values.