Yes, you can create a widget for your popup message, or a set of widgets in a group or dynamic panel. I’ve included a simple example of this in my file below. It uses the “treat as lightbox” option–you can remove this or try out the other treatment styles.
- You can also call a standard javascript alert message, but this method is not officially supported by Axure. As long as javascript is enabled in the browser, it should work. See the “Just show a popup” button.
Very unfortunate, but when Text Fields are set to an input type other than the default “Text” then they don’t get values that are accessible in Axure logic, nor do user interactions trigger any Axure events. That is the bug, and has existed in all versions of Axure RP as far as I know. So, if your TimeToTextField is set to input type: Time, it just won’t work. There is no text value for this widget, as far as Axure is concerned, and no way to know when or if it has been set or changed by the user.
Because of this bug, you have to manually set up your time input elements and handle input errors. For time input, there are several methods, including:
- Using regular text fields (set to input type: Text)
- In my example below, I do this with some basic tests for format and time values. I use 24-hour clock values. This could be extended to automatically format input like “1234” into “12:34” and “1” into “1:00”. It could also be extended to support 12-hour clock values (with additional setting/value for AM and PM).
- Or, you could create two text fields for “Time from”, one for hour and the other for minute. You could style them with no fill and no border and include both in front of a rectangle widget with border and fill, so to the user they would appear as one input field. You can even automatically focus the minute field when the hour field has 2 digits.
- Using a Droplist or List Box widget for the Hour and another for the Minute.
- Manually create a custom popup or dropdown/droplist. Using a Repeater widget for this is best.
- Manually create a time selector to match what is used in your browser (this will vary by OS and browser brand)
With my method of one Text Field widget per time entry, it is best to test for errors on the Lost Focus event, or with a Submit button (fired when user presses Enter) If you use the Text Changed event, then user doesn’t get a chance to enter a valid time. For example, if I wanted to enter “12:34” I would click in the field, press my ‘1’ key to start typing, and that would generate an error–because “1” by itself is not a valid time format. You can inspect the logic I use to test for a valid time format on the “TimeFromTextField”, as well as how the popup modal dialog is used.
The “TimeToTextField” has additional cases:
- Case 1 tests the format to ensure it contains a colon, is long enough, the hour is between 0 and 24
- (Else if) Case 2 tests if the hour is less than the hour on “TimeFromTextField”
- The text values must include a colon (’:’) to be a valid time format, but this colon makes any numerical comparisons or math invalid. So, to get “just the numbers” you can test the hour by getting a substring of the time value–everything before the colon. For example, with a time of “12:34” the hour is “12” and this can be accessed by using the substring() function like so:
[[ This.text.substring(0,This.text.indexOf(':')) ]]
…which means "get everything from the start to the colon (but don’t include the colon)
- (Else if) Case 3 tests if the hour equals the TimeFrom hour but the minutes are less.
- You can get the minutes–everything after the colon with the expression:
[[ This.text.substring(This.text.indexOf(':')+1) ]]
Comparing Hours.rp (66.3 KB)
. This bug breaks a lot of the logic I intended for the prototype (more than this, also setting global variables). So I see the only two options, i.e. either Axure fixes this bug (but when could it happen…) or I should use custom widgets (one with date, the other with time because I need these two).