Adding Interactions to Widgets


Widget Event List - Axure Interactive Template


The main purpose of this article is to serve as a reference document. Check it out when you forget.

This article comes with an interactive template for easy understanding. It can be downloaded at the end of the article.

Interactive Template Preview


Widget Event List

All Widgets

Mouse:
Click or Tap: When the widget is clicked or tapped.
Double Click or Double Tap: When the widget is double-clicked or double-tapped.
Context Menu (Right Click): When the context menu is triggered on the widget, either by right-clicking or another method.
Mouse Button Down: When the widget is clicked, while the mouse button is pressed down.
Mouse Button Up: When the widget is clicked, upon the mouse button being released.
Mouse Move: Fires continuously as the mouse cursor is moved over the widget.
Mouse Enter: When the mouse cursor enters the area over the widget.
Mouse Exit: When the mouse cursor exits the area over the widget.
Mouse Hover: When the mouse cursor hovers over the widget for one second.

Keyboard:
Key Down: When a keyboard key is pressed while the widget has browser focus.
Key Up: When a keyboard key is released (after being pressed down) while the widget has browser focus. 

Widget:
Moved: When the widget is moved by a Move action.
Rotated: When the widget is rotated by a Rotate action
Resized: When the widget's size is changed by a Set Size action.
Shown: When the widget is shown by a Show or Toggle Visibility action.
Hidden: When the widget is hidden by a Hide or Toggle Visibility action.
Got Focus: When the widget gets browser focus by being clicked or tabbed to, or via a Focus action.
Lost Focus: When the widget loses browser focus by being clicked or tabbed away from, or via a Focus action.
Selected: When the widget is set to its selected state with a Set Selected action or when a checkbox or radio button is clicked.
Unselected: When the widget is set to its unselected state with a Set Selected action or when a checkbox or radio button is clicked.
Loaded: When the widget initially loads in the web browser (fires after Page Loaded).

Droplists and List Boxes Only

Selection Changed: When the selected option in the droplist or list box changes.

Text Fields and Text Areas Only

Text Changed: When the text on the text field or text area changes, either by a user typing in it or via the Set Text action

Dynamic Panel Only

Gesture:
Swiped Left: When the dynamic panel is swiped from right to left.
Swiped Right
: When the dynamic panel is swiped from left to right.
Swiped Up: When the dynamic panel is swiped from bottom to top.
Swiped Down: When the dynamic panel is swiped from bottom to top.

Dynamic Panel:
Panel State Changed: When the dynamic panel's state is changed with the Set Panel State action.
Drag Started: When you begin to drag the dynamic panel.
Drag Dropped: When you stop dragging the dynamic panel (fires when the mouse button is released, not when it stops moving).
Dragged: Fires continuously while the dynamic panel is being dragged.
Scrolled Up: When the dynamic panel is scrolled up.
Scrolled Down: When the dynamic panel is scrolled down.
Scrolled: When the dynamic panel is scrolled in any direction.

Dynamic Panel:
Item Loaded: When the repeater's items first load in the web browser and when the repeater's dataset changes in any way.
Item Resized: When a repeater item's size changes as a result of any interaction (such as a widget in the item being shown, hidden, or resized).


Axure Tutorial: Action List - Axure Interactive Template


Introduction

Because most people have not systematically studied the interactions of Axure, and the information on the official website is too general, it often takes a lot of time to search in the design, and there is no complete interaction template about Axure RP.

Therefore, I organized all the basic interactions in Axure into a template. Novice can quickly master the interaction in Axure and lay a solid foundation by learning the template; Skilled people can also quickly query if they forget an interaction when drawing a prototype.

Interaction template


Preview the completed prototype for this tutorial


Let's quickly introduce all interactions and usage scenarios in Axure RP through text paragraph. It is divided into four parts: link, component, repeater and others, which is consistent with the interactive structure in Axure software.

1. Link actions

1.1 Open link

1.1.1 Current Page

· Link to a page of the current project - select a page in the prototype and open in Current Window.

· Link to external URL - enter the URL address, including the network address( https://www.google.com )And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.

· Reload current page -  refresh the current page, which is suitable for data refresh.

· Back to previous page - common interaction, which is generally used when the sub page returns to the main page.

1.1.2 New Window/Tab

· Link to a page of the current project - select a page in the prototype and open in a new Window/Tab.

· Link to external URL - enter the URL address, including the network address( https://www.google.com )And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.

1.1.3 Popup Window

The difference between this interaction and the previous one is that this interaction will open a page in the form of a pop-up window. We can see the contents of two pages at the same time. The basic properties of the pop-up window (size, position) can be set. The common usage is to select organizations, employees and other page elements. It is not applicable to the drop-down list. Of course, it is also applicable to the jump of external advertisements and links.

· Link to a page of the current project - select a page in the prototype and open in a new Window/Tab.

· Link to external URL - enter the URL address, including the network address( https://www.google.com )And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.

1.1.4 Parent Window

The parent window corresponds to the source window of the popup window, that is, the page of the original window can be set in the pop-up window. This interaction is generally used together with Close Window. For example, if you click the advertisement in the popup window, you can first set the original page to jump to the product page, and then close the pop-up window.

· Link to a page of the current project - select a page in the prototype and open in a new Window/Tab.

· Link to external URL - enter the URL address, including the network address( https://www.google.com )And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.

1.2 Close Window

This is used to close the current window, but this interaction is rarely used because the browser is usually closed directly.

1.3 Open Link in Frame

1.3.1 Inline Framework

This is also a necessary action for each project. Generally, the project prototype will have a menu. Click the menu button to open a page in the inline frame.

· Link to a page of the current project - select a page in the prototype and open in a new Window/Tab.

· Link to external URL - enter the URL address, including the network address( https://www.google.com )And local address (D://tutorial.html). Note: the local address is not available during preview. It needs to generate local HTML to take effect. This is generally applicable to opening external maps, statistical charts and other contents.

1.3.1 Parent Framework

Parent Frame is the page containing an inline frame (this must be used from a page loaded in an inline frame). This interaction is rarely used in practice.

1.4 Scroll to Widget(Anchor link)

This interaction enables the page to scroll to the specified widget, which is common in long pages.


2. Widget Actions

2.1 Show/Hide

2.1.1 Show

This action is very common and is mainly used for content selection and notice of new panel. The Show action can add animation or select the Show motion effect.

Light Box Effect. After the light box effect is shown, if the mouse clicks other contents, the contents will be hidden, which is applicable to notice.

Pop up effect. After shown, if the mouse leaves the area, the content will be hidden. It is often used in the top menu or dropdown list

Push widgets. After shown, push the widgets on the right or below, which is suitable for showing contents according to different options.

2.1.2 Hide

Hide corresponds show. It is mainly used to hide after selection, notice, etc. Hide actions can also be animated. You can also pull/push widgets.

2.1.3 Toggle

Toggle is a combination of Show and Hide. If a widget is hidden, it can be shown. If a widget is shown, it can be hidden. It is often used in menus, cards, dropdown lists, etc.

2.2 Set Panel State

The dynamic panel is like a slide. You can only see one page at a time. Setting the panel state is equivalent to which page of the slide is shown. You can also set whether to start the animation and stop the animation, and whether to push or pull the widgets. There are many applications, such as image rotation, album, etc.

· Set to the specified state - you can use this action to set to the specified state, which can be set when there are few states.

· Previous - state back

· State forward - state forward

· Repeater Time - set the time of automatic state changing and whether to Wrap from last to first.

· Stop Repeating - Stop state changing

· Value- you can use functions to set the dynamic panel to the specified value. Using this action can reduce a lot of work when there are many states.

2.3 Set Text

The most common way to set text is to set the text of widget equals the text of text field, or set the style of rich text; In addition, some functions will be used, such as time, date, angle and so on.

· Set text as inputed value - this interaction is often used to save a value = inputed value.

· Set the text to rich text - change the capitalization, font, color and other styles of the text.

· Set the text to UTC time - this is what will be used at the top or bottom of the window.

· Set text as date - get the system date, which is often used to record the operation date after operation.

· Set text to time - get the system time, which is often used to record the maintenance time after maintenance.

· Set the number of decimal places reserved - common interaction in calculation, such as calculating percentage, etc.

· Set the text to a random number - randomly set a tree between 0-1. This is the basic feature.

2.4 Set Image

· Set the image as the repeater value - commonly used for the event when each item of the repeater is loaded, and set the icon as the image saved in the repeater

· Set the image as an external Image - it is applicable to directly set the image by entering the URL.

2.5 Set Selected/Checked

This interaction is often used for tabs, menus, radio groups.

· Selected - when selected, the selected style can be applied.

· Unselected

· Toggle - you can toggle the selected and unselected state, which is common in double selections, or whether the terms have been read.

· Set selection group - select one widget in the selection group, and other widget will be automatically unselected.

2.6 Set Selected List Option

This interaction is rarely used. First, the Droplist of the Axure is not easy to use and has no search feature. Generally speaking, the easy-to-use dropdown list is made with repeaters; The second is you can use the default option. Generally, you don't need to use this action list to control the selected option. In only one case, when the Droplist is in the repeater, each default selected item is different, you can use this event to set the selected item.

2.7 Enable/Disable

It is generally used for data editing. Some information cannot be modified or the person has no edition permission.

· Disable - disable a, and disable styles can also be set.

· Enable - enables a component

2.8 Move

It is generally used for games or sliding verification.

· Move - move widget to a specified position. You can animate the movement, absolute position and relative position. Absolute position refers to the coordinate to which the component moves; Relative position refers to how far you move.

· Drag - drag widgets with the mouse, you can add boundaries.

2.9 Rotation

It is generally used for game or image rotating verification.

· Direction of rotation - clockwise or counterclockwise.

· Rotation angle - 360 ° is one circle.

· Anchor point - to the center of rotation, generally select the center. If it is a pendulum type, select the top.

· Anchor offset - the distance from the center point.

· Animate -You can set the animation type and time.

2.10 Set Size

Using this interaction also requires the selection of anchor points and animation, which is generally used to zoom in/out to view products, images, etc.

· Set fixed size - sets the size of the widgets to a fixed value

· Enlarging - the Enlarged element is generally used with a function, for example, to enlarge the height of the target by 10%, and the function should be [[Target.height * 1.1]]

· Reduce - reduce the size, which is also used with the function. For example, reduce the height of the target by 10%, and the function should be [[Target.height * 0.9]]

2.11 Bring to Front/Back

These two actions are rarely used, because the show action can be directly set bring to top. This interaction may be required when multiple dynamic panels are fixed at the top level.

· To Front - sets the widget to the top.

· To Back - sets the widget to the bottom.

2.12 Set Opacity

This action is also rarely used because the opacity can be set when setting the widget color. This event is generally used to dynamically set opacity, such as drawing app, etc. 

2.13 Focus

This interaction is generally applicable to returning the focus to the text field after error, which is convenient for customers to use. For example, after entering the phone number, click the submit button. When the system judges that the phone number format is wrong, the focus will return to the mobile phone number text field.

Get focus lets you choose whether to select the text of the component.

2.14 Expand/Collapse Tree Node

This action is aimed at the tree widget in Axure, but it is rarely used. Because the tree widget can be expanded or collapsed when clicked, this action is not needed. Secondly, the default tree widget of Axure is not easy to use, and there is no feature of adding, deleting, modifying and searching. 

3. Repeater 

Like Excel, repeaters can store table information (text, images, pages) and achieve the effect of dynamic addition, deletion, edition and search. Therefore, repeater actions are the most important action in high-fidelity prototype.

3.1 Add Sort

· Numeric - you can switch between ascending and descending sorting by a column of numbers in the repeater table.

· Alphabetical - you can switch between ascending and descending sorting by a column of text in the repeater table.

· Alphabetical(case sensitive) - you can switch between ascending and descending sorting by a column of text in the repeater table.

· Date - you can switch between ascending and descending sorting by a column date in the repeater table.

· Alphanumerical - you can switch between ascending and descending sorting by a column of text and numbers in the repeater table.

3.2 Remove Sort

You can remove a single sort or all sorts from the repeater.

3.3 Add Filter

· Classification filtering - classification filtering can be performed according to the user's selection, and the most common is commodity classification.

· Precise search - you can enter text to quickly search the data row corresponding to the repeater.

· Fuzzy search - you can input text and quickly search the data row containing the input text in the repeater list

3.4 Add Filter

You can remove a single filter or all filters from the repeater.

3.5 Set Current Page

If there are a lot of data in the repeater, it is generally shown in pages. This interaction is to set the content of the page shown by the repeater. It can be set to show the next page, the previous page, the last page, the first page or a specific page.

3.6 Set items per Page

If you need to change the items per page during interaction, you can use this setting.

3.7 Add Rows

You can add a new row to the repeater.

3.8 Mark rows

· Mark - it can be regarded as one or more rows of repeater are selected, and the contents of the marked row can be updated or unseleted later.

· Unmark - it can be regarded as unselecting a row.

3.9 Edit Row Data

· Edit specified row - Deletes the column data of the specified row.

· Edit marked row - you can mark the row to be edited first, and then edit them in batch.

· Rule - use the rule to edit the specified row.

3.10 Delete Rows

· Deletes specified row - delete the specified row.

· Deletes marked row - you can mark the rows first, then delete them.

· Rule - use the rule to delete the specified row.

4. Other 

4.1 Set Variable Value

Global variables are generally used for high-fidelity prototype, which can be simply regard as the value of data transferred between pages. For example, after successfully logging in with Tom's account, all pages need to show Tom's information. At this time, you need to use global variables to pass this parameter.

4.2 Set Adaptive View

If a view with multiple resolutions is set, the action can select the view. This action is basically unnecessary, because the time of the demand phase is urgent, and there is little time to view several resolutions. In addition, it can also be controlled by browser zooming.

4.3 Wait

This action is generally used for interactions that need to be delayed. For example, when page loaded wait a few seconds before entering the corresponding page; Another example is that the notice information is automatically hidden after a period of time. This action can separate the time of the other two actions. 

4.4 Other

This action can set the text shown in the pop-up window.  

5.3 Fire Event

Fire Event is also a very common operation in high-fidelity prototypes. It can trigger other widget's event. Especially if there are multiple trigger buttons for the event of a widget, you don't need to write the actions again.

The above is the introduction of all the basic interaction actions in Axure. It is suggested that you can save them and search them quickly when you need them in the future.

Complete and Continue  
Discussion

0 comments