Number Pad iBloc

The Number Pad iBloc is a custom text input widget designed for mobile tablet (e.g., iPad) app prototypes that enables input through a calculator-style number pad instead of the native device keyboard.

Current Version: 1.0.1
Supported iRise Studio Versions: 8.7 – 8.12
Supported Browsers: IE 8.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes

What does it do?

  • Displays a standard text input on the page, that when clicked or touched displays a calculator-style keypad that can be used to enter numbers.
  • The placement of the number pad on the screen relative to the input can be specified in the properties panel.
  • The style of the text input (font, border, background, etc.) can be controlled with iRise styles.
  • A default value can be specified in the properties panel, or sent from a clipboard or datasheet.
  • The number entered can be submitted to a clipboard or record action.
  • Actions can be triggered (such as Submit form) when the number pad is displayed, or when it is closed.

How do I use it?

  1. Drag the iBloc onto the page.
  2. To change the height or width of the input widget, resize by clicking and dragging (like any iRise page widget), or change the Height and Width in the properties panel.
  3. To set a default value, manually enter a number into the Default Value field in the properties panel, or connect a data flow from a clipboard or a record action.
  4. To send the number entered to a clipboard or datasheet, simply place the widget in a form and connect it to a clipboard or record action, like any other iRise input widget. The value will be sent when the form is submitted.
  5. To change the style of the displayed text input field, create or edit a style using the iRise Style Manager, and specify the style attributes in the Form panel. Apply the style to the parent container (form, section, or table cell) of the iBloc (if the iBloc isn’t inside a container, place it into a section, form, or table, and apply the style to the container).
  6. The two keypad types available: Decimal (default), which includes a decimal point key, and Integer, which includes plus and minus keys which increment and decrement the entered value by 1. Select the Keypad Type in the properties panel.

Tips & Tricks

  • If you want to submit the number entered to a datasheet or clipboard when the user closes the number pad (i.e., clicks ‘Done’), connect the widget to a Submit action and change the event to ‘OnDone’ (custom event for this iBloc).
  • You can use the custom ‘OnShowPad’ event to trigger Actions when the keypad is shown (i.e., the user clicks on the input), such as highlighting the input field (use Change Properties on the iBloc’s container), or displaying a help message.
  • Adjust the positioning of the keypad relative to the input by changing the Vertical Offset and Horizontal Offset properties (both accept positive or negative values). To make the pad appear just below the input (default), the Vertical Offset should equal the Height property. To make it appear just above the input, set Vertical Offset to -305. To center the keypad horizontally relative to the input (above or below) subtract the 186 from the Width property value and divide by 2. Examples: (1) Width = 120 (default): 120 – 186 = -66; -66 / 2 = -33; Set Horizontal Offset to -33.  (2) Width = 220:  220 – 186 = 34; 34 / 2 = 17; Set Horizontal Offset to 17.

Feel free to download this and any of our free iBlocs here, and please tell us what you think.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© Copyright 2013 - id8    Privacy Policy