Yesterday we demonstrated six of our best iBlocs live, at a webinar hosted by iRise titled “iBloc Expo: There’s a Widget for That!”. Attendance peaked at over 380, and we got some really positive feedback. If you missed it, a video of the entire webinar will be available online soon, and we’ll post a link here.
Here are links to the support pages for the iBlocs we demonstrated yesterday:
We also created an iDoc containing the completed examples that we demonstrated at the webinar — download it here (iRise Studio 8.10). All of our iBlocs are available for free on our Workshop page.
If you find any of our iBlocs especially useful or have any suggestions for improvement or for future iBlocs, please let us know!
The Action Calculator iBloc executes equations using Input widgets without refreshing the page, and displays the results in a Text or Input widget.
Current Version: 1.2.1
Supported iRise Studio Versions: 8.7 – 8.10
Supported Browsers: IE 7.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes
Previous Version: 1.1.1
Supported iRise Studio Versions: 8.5, 8.6
Supported Browsers: IE 7.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?
Dynamically performs calculations without requiring a page refresh
Can be triggered with any event (onLoad, onClick, onChange, etc.) like a standard Action
Allows you to create your own equations using up to 10 input widgets as variables
Equations can include numbers, parentheses, and standard operators (+ – * / %)
The result can be shown in an Input widget or a Text widget
Multiple ActionCalc iBlocs may be used on a single page
Inputs can contain commas or non-numeric characters (e.g., “$”)
Answer can be formatted with or without commas and any number of decimal places
How do I use it?
Drag the iBloc onto the canvas.
In the Properties panel, enter an equation (default is “a + b”) using numbers, parentheses, numbers, operators (+ – * / %) and/or the letters a – j as variables.
Select a widget to display the result by clicking the “…” button next to “Result Widget” and choosing a Text or Input widget.
Enter the desired Precision (number of places after the decimal – default is 2, use 0 for an integer result).
Place Input widgets onto the page to use as variables for your equation (you can also use any input widgets already on your page).
Select Input widgets for each variable letter used in your equation, by clicking the “…” button next to each letter variable used and choosing a an Input widget.
(Optional) Enter a text string or number to display in the result widget if invalid (non-numeric) values are entered into selected Input widgets.
Can I see it work?
Video and sample iDoc coming soon!
Can you share some ProTips?
Initial values for variable and result Inputs can be populated from a Datasheet or entered manually as the default value property of the widget.
To use values from a Datasheet in your equation that you do not want to display on the screen, use hidden Input widgets.
To send your result to a Clipboard or Datasheet, use an Input widget inside a form for your result, and submit normally.
Dynamic spreadsheet-like behavior can be simulated by using result widgets as variable inputs in other ActionCalc iBlocs, and triggering them with onChange events.
Feel free to download this and any of our free iBlocs on our Workshop page, and please tell us what you think.
The Date Calculator iBloc is a custom widget that displays calculated dates and times in any format, in any iRise widget.
Current Version: 1.2.1
Supported iRise Studio Versions: 8.7 – 8.10
Supported Browsers: IE 7.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes
Previous Version: 1.1.1
Supported iRise Studio Versions: 8.5, 8.6
Supported Browsers: IE 7.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?
Adds or subtracts years, months, days, hours, minutes and seconds from any date and/or time
The date/time used as the starting point for the calculation can be:
The current date/time (now)
The date/time in any input or calendar widget
From a clipboard or record action connected to the iBloc via data flow
Manually entered in the properties panel
The result can be:
Expressed as any combination of month, day, year, day of week, hours, minutes, or seconds, in any format
Shown on the page at the iBloc location as standalone text
Shown as the value of any input or calendar widget
Inserted inline into a block of text in a standard text widget
Submitted to a clipboard or record action via data flow
Any number of Date Calculator iBlocs may be used on a page
How do I use it?
Drag the iBloc onto the page.
Specify the start date for the calculation:
To use the current date/time (now) as your start date, select “Use Current Date/Time” (checked by default).
To use the date/time shown in an input or calendar widget, deselect “Use Current Date/Time”, and click the “…” button next to “Start Date/Time Widget” and choose a widget (Note: The result updates dynamically when the value of the input changes).
To specify a start date/time manually, enter a date in any common format into the “Start Date/Time” property.
Enter number of years, months, days, hours, minutes and/or seconds to add to the start date (to subtract, enter negative numbers).
Select a Result Format from the drop down menu in the properties panel (M/d/yyyy is default). See ProTip below for custom formatting.
Choose where you want to display/send the result date:
By default, the result date will be displayed on the page at the location of the iBloc. To change the style of the displayed date, you must wrap the iBloc in a section and apply styles to the section, or apply styles to an existing parent container (section, form, table, or page).
To display the result in an iRise input or calendar widget, click the “…” button next to “Target Input Widget” and choose a widget.
To display the result inline inside an iRise Text widget, click the “…” button next to “Target Inline Text Widget” and choose a text widget. Then insert the “Inline Replacement String” into your text widget where you want the result to be inserted (*insertDate* is the default).
The result can be displayed simultaneously in any combination of the above methods. Select the “Hidden” property of the iBloc if you do not want the result shown at the iBloc location.
Can I see it work?
Video and iDoc coming soon!
Can you share some ProTips?
You can send data into and out of this iBloc:
To use a value from Clipboard or a Datasheet as the start date/time, deselect “Use Current Date/Time” and connect a Clipboard or Get Record Action to the iBloc (Start Date/Time Widget must also be empty). Then click the small box to the right of the “Start Date/Time” property and select the label on the data flow you just connected.
To use values from Clipboard or a Datasheet for your calculation, connect a Clipboard or Get Record action to the iBloc, then click on the small box to the right of the appropriate “Change By…” property, and select the appropriate data flow label.
To send the result to a Datasheet or Clipboard, place the iBloc inside a Form and connect it via data flow to a Clipboard or record action widget. Then click on the data flow label and in the properties panel, select “Result (default)” under “Choose which property to send:”.
To create your own custom format for your result, select “Custom” for Result Format, and enter your custom format string in the the “Custom Result Format” property (format string may be sent from a data flow — see above). Click here for a complete list of format specifier codes (opens in new tab/window).
To have a date or message displayed when the input widget you’re using as a start date is empty, enter the default value in the “Result (default)” property field at the bottom of the properties panel.
Feel free to download this and any of our free iBlocs on our Workshop page, and please tell us what you think.
The Slide Panel iBloc is a custom action that allows you to move any iRise widget beyond the top and left boundaries of the page, with or without animation. A typical use for this widget is a navigation panel that can slide on and off screen from the top or left edge of the browser.
Current Version: 1.2
Supported iRise Studio Versions: 8.7 – 8.10
Supported Browsers: IE 7.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes
Previous Version: 1.1
Supported iRise Studio Versions: 8.5, 8.6
Supported Browsers: IE 7.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?
Moves any iRise page widget by the specified number of pixels in the X or Y direction, or both, or to specified X and Y coordinates.
Allows you to move widgets to negative X and Y coordinates (off of the top and left edge of the screen), unlike the Edit Properties Action.
How can I use it?
Drag the Slide Panel iBloc onto any empty area of the canvas.
In the properties panel, select target widget.
To move the widget a certain number of pixels from its current location, select “Move By” and and enter the number of pixels to move in X and/or Y properties.
To move the widget to a specific location, select “Move To” and enter the coordinates in the X and/or Y properties. Enter a negative value to move the widget beyond the top or left edge of the browser window. (Note that coordinates are relative to the parent container of the widget. For best results, place your target widget at page level, outside of any containers.)
Enter the duration of the animation effect in milliseconds. For no animation effect, enter zero (default is 500).
Select the animation effect desired. Options are linear and swing (default, more natural motion).
Connect any iRise widget to the iBloc using any event (like any iRise Action).
Can I see it work?
Here’s a brief demo of the Slide Panel iBloc in action and how to use it in Studio.
Can you share some ProTips?
If you want your widget to appear outside the top or left edge of the browser window initially, hide the widget (select the Hidden property for the widget) and connect a Slide Panel action and a Show Widget action to the page ‘on load’ event. (Enter zero for the Duration property of the Slide Panel widget). Watch the demonstration video to see how this works.
Feel free to download this and any of our free iBlocs on our Workshop page, and please tell us what you think.
The Table Filter iBloc is a custom action that instantly hides or shows table rows that contain a given word or phrase without requiring a page refresh. This is great for prototyping dynamic pre-set filters on data-driven pages, such as search results.
Current Version: 1.2.1
Supported iRise Studio Versions: 8.7 – 8.10
Supported Browsers: IE 7.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari
Works in iRise iPhone and iPad Apps: Yes
Previous Version: 1.1.1
Supported iRise Studio Versions: 8.5, 8.6
Supported Browsers: IE 7.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari
Works in iRise iPhone and iPad Apps: Yes
What does it do?
Instantly hides or shows table rows which contain a specified text string.
Works on static tables as well as tables with repeated rows (data-driven).
How can I use it?
Drag the Table Filter iBloc onto any empty area of the canvas.
In the properties panel, select Show or Hide.
Enter the text string to match against the table row content.
Enter a Key string to use to identify the table rows to apply filtering to (default is ‘Filter’).
Insert the Key string into the name property of any table rows that you want the Table Filter to act on (data and/or static rows).
Connect any iRise widget to the iBloc using any event (like any iRise Action).
Can I see it work?
Here’s a brief demo of the Table Filter iBloc in action and how to use it in Studio.
Can you share some ProTips?
Place hidden text widgets in your table rows to create filters based on information not visible to the user (see the demonstration video for an example).
Feel free to download this and any of our free iBlocs on our Workshop page, and please tell us what you think.
The Orientation iBloc is a custom widget designed for running iRise prototypes on mobile devices, including iPads, iPhones, and Android devices. It enables dynamic page resizing and reformatting when the screen is rotated and orientation changes.
Current Version: 1.2
Supported iRise Studio Version: 8.10
Supported Browsers: IE v7.0+, Firefox v3.5+, Safari v4+, Chrome v8+, iOS Safari (iPhone and iPad), Android Browser
Works in iRise iPhone and iPad Apps: Yes
Current Version: 1.1
Supported iRise Studio Versions: 8.7 – 8.9
Supported Browsers: iOS Safari (iPhone and iPad), Android Browser
Works in iRise iPhone and iPad Apps: Yes
What does it do?
Fires one of two custom events when a page loads or orientation changes while viewed on an iPad or iPhone or other mobile device browser.
Version 1.2 also allows you to manually switch orientation and fire custom events when viewing in a browser.
These custom events can be used to trigger any combination of iRise actions or links, including switch views, change properties, show/hide, etc.
How can I use it?
Drag the Orientation iBloc onto any empty area of the page.
In the properties panel, select target device. Options are iPad, iPhone, or Custom.
If your target device is a non-Apple mobile browser (Android for example), select Custom for target device enter the device’s portrait and landscape screen widths in pixels.
Connect the iBloc to any action or link on the canvas by dragging and dropping.
Change the default event to “on landscape” or “on portrait”
The same iBloc can be used to trigger both events.
See the video below for a demonstration.
Can I see it work?
Here’s a brief demo of the Orientation 1.1 iBloc in action on the iPad and how to use it in Studio.
Can you share some ProTips?
Note that this iBloc does nothing at all when viewing prototypes on desktop or laptop computers. It is only for reviewing prototypes on mobile devices
You can create links in your prototype to trigger your ‘on landscape’ and ‘on portrait’ actions for testing or changing modes when reviewing in a browser.
Feel free to download this and any of our free iBlocs on our Workshop page, and please tell us what you think.
The Highlighter iBloc that is a custom action that highlights words on a page that match the value of a text input widget.
Current Version: 1.2
Supported iRise Studio Versions: 8.7 – 8.10
Supported Browsers: IE 7.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes
Previous Version: 1.1
Supported iRise Studio Versions: 8.5, 8.6
Supported Browsers: IE 7.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?
Highlights words in text widgets on any event, based on the current value of a text input widget.
Matching text can be highlighted with any background color, bold text, and/or italics, and can be selected based on partial or exact matching.
How can I use it?
Drag the Highlight Action iBloc onto the canvas.
Connect any page widget to this action using any event to activate the highlight effect.
Choose a text widget in the properties panel within which matching strings will be highlighted, or a container such as a section, form or table that contains a set of text widgets.
Choose a text input field in the properties panel that contains the string to be highlighted.
Can I see it work?
Coming soon!
Can you share some ProTips?
Connect the widget to an onLoad event action to show highlighted words on load, such as in a search results page.
Text widgets to be highlighted can be dynamically populated from a datasheet or clipboard for realistic search functionality.
You can use hidden text inputs if you do not want the highlight string displayed on the page in an input field.
Feel free to download any of the free iBlocs on our Workshop page, and please tell us what you think.
The Text Counter iBloc is a custom widget that counts characters as they are typed into text input and text area widgets.
Current Version: 1.0
Supported iRise Studio Versions: 8.5 – 8.10
Supported Browsers: IE 7.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?
Counts characters as they are typed into text input and text area widgets.
Can be customized to count up from zero or down from a pre-set limit.
The message displayed with the count can be customized.
Actions can be triggered when the limit is reached.
How can I use it?
Drag it onto a page like a regular Page Widget.
Choose a Text Area or Text Input widget in the properties panel.
Change other properties to customize behavior and display.
Can I see it work?
Coming soon!
Can you share some ProTips?
Put the widget inside of a section and apply style to the section to change the fonts displayed.
Connect the widget to an action and change the event to onLimitReached to trigger an action when the user reaches the character limit. This can be used to show a warning message.
Use the onLimitUnreached event to trigger another event when the user deletes characters to make the count less than the limit. This could be used to hide the warning message displayed when the limit was reached.
The Date Calculator iBloc is a custom widget that displays calculated dates and times in any format, in any iRise widget.
The Highlighter iBloc that is a custom action that highlights words on a page that match the value of a text input widget.
CONTACT US