Link to

Select the 'Link to' action to create navigation to another page of your prototype or an external web page. You can configure the navigation so the target page opens in a new tab.

You can also select a transition effect to be shown when the navigation between the screens is performed (see the Transition Effects section for more information).

To navigate to an internal screen, select the radio button 'Internal Screen' and then select the screen you want the link to.

To navigate to the previous shown screen just as the back action of a browser would do, select the radio button 'Previous Screen'.

To navigate to an external web page, select the radio button 'External address' and type in the address you want to navigate to.

Change style

This action changes the style of a widget of the same screen. Several formatting attributes can be changed at once with this action. To create a change style action follow the steps:

1. Select the widget you want to change the style of on the current screen displayed in the small canvas or select it on the outline view. A set of styles will appear under the small canvas.
2. Select the styles you want to change checking them in the Styles' list.
3. Configure the attributes of the selected style to match the desired look and feel.

Show

This action makes a widget of the same screen appear (show). To create a show action follow the steps:

1. Select the widget you want to show on the current screen displayed in the small canvas or select it on the outline view.

You can also enhance the action with one of these effects:

• Blind: Blinds the element away or shows it by blinding it in.
• Bounce: Bounces the element vertically or horizontally n-times.
• Clip: Clips the element on or off, vertically or horizontally.
• Drop: Drops the element away or shows it by dropping it in.
• Explode: Explodes the element into multiple pieces.
• Fade: A gradual change in the transparency level of the target. You can define the length of the effect expressed in milliseconds. If it is a hide action, it will be a fade out (to be totally transparent at the end) and if it is a show action, it will be a fade in (to be totally opaque at the end).
• Fold: Folds the element like a piece of paper.
• Highlight: Highlights the background with a defined color.
• Puff: Scale and fade out animations create the puff effect.
• Pulsate: Pulsates the opacity of the element multiple times.
• Shake: Shakes the element vertically or horizontally n-times.
• Slide: A smooth movement of the target. You can define the length of the effect in milliseconds as well as the side where it will appear/disappear the figure. Depending on the action (hide or show), the widget will be appearing or disappearing from/to that side of the figure.

For all these effects you may define an animation selecting the desired duration and easing function (see the Animation section for more information)

Hide

This action makes a widget of the same screen disappear (hide). To create a hide action follow the steps:

1. Select the widget you want to hide on the current screen displayed in the small canvas or select it on the outline view.

You can also enhance the action with one of these effects:

• Blind: Blinds the element away or shows it by blinding it in.
• Bounce: Bounces the element vertically or horizontally n-times.
• Clip: Clips the element on or off, vertically or horizontally.
• Drop: Drops the element away or shows it by dropping it in.
• Explode: Explodes the element into multiple pieces.
• Fade: A gradual change in the transparency level of the target. You can define the length of the effect expressed in milliseconds. If it is a hide action, it will be a fade out (to be totally transparent at the end) and if it is a show action, it will be a fade in (to be totally opaque at the end).
• Fold: Folds the element like a piece of paper.
• Highlight: Highlights the background with a defined color.
• Puff: Scale and fade out animations create the puff effect.
• Pulsate: Pulsates the opacity of the element multiple times.
• Shake: Shakes the element vertically or horizontally n-times.
• Slide: A smooth movement of the target. You can define the length of the effect in milliseconds as well as the side where it will appear/disappear the figure. Depending on the action (hide or show), the widget will be appearing or disappearing from/to that side of the figure.

For all these effects you may define an animation selecting the desired duration and easing function (see the Animation section for more information)

Set Active Panel

Use this action on Dynamic Panels to change between its tabs. To do this select a Tab of the Dynamic Panel as the target of the action.

You can also select a transition effect to be shown when the change between tabs is performed (see the Transition Effects section for more information).

Set Value

This action sets a value to a particular widget in the current screen or to a variable. The value to assign can be either a simple text or an expression involving other widgets and variables.

To create an action which sets a value to a screen's widget, follow the steps:

1. Click on the 'Screens' button to indicate the target's type.
2. Select the widget you want to assign the value to on the current screen displayed in the small canvas or select it on the outline view. Notice that only some widgets have the property to display a value:
   • Input widgets: Text input, date input...
   • Selection widgets: List Boxes, Check and radio buttons...
   • Static widgets containing text: Text, Paragraph, Button and Text Cell from Text Tables.
3. Type the value in the 'Value' text box or click on 'Calculate' button to define a more complex value involving other elements of the prototype.

To create an action which sets a value to a variable, follow the steps:

1. Click on the 'Variables' button to indicate the target's type.
2. Select the variable you want to assign the value to on the variables' list.
3. Type the value in the 'Value' text box or click on 'Calculate' button to define a more complex value involving other elements of the prototype.

Select Value

This action selects a value or group of values from a selection widget in the current screen. The value or values to be selected can be defined either with a simple text or with an expression involving other widgets and variables.

To create an action which selects a value from a single selection widget, follow the steps:

1. Select a single selection widget on the current screen displayed in the small canvas or select it on the outline view. Notice that only the following selection widgets have the property to be selected:
   • List Box.
   • Selection List.
   • Radio Button List.
2. Indicate the value you want to select from the list of values drop-down or click on the 'Calculate' button to define a more complex value involving other elements of the prototype.

To create an action which selects a set of values from a multi selection widget, follow the steps:

1. Select a multi selection widget on the current screen displayed in the small canvas or select it on the outline view. Notice that only the following selection widgets have the property have more than one value selected:
   • Multi-selection List.
   • Check Box List.
2. Indicate the value(s) you want to select by clicking on the corresponding check boxes in the list of values or click on the 'Calculate' button to define a more complex value involving other elements of the prototype.

Pause

This action pauses the current event's execution and delays the execution of forthcoming actions defined for the same user event. Notice that it only pauses the execution of the current event for the current element, hence already executing actions for other elements or newly triggered events will be carried on normally.

To create this action, just specify the time you want the event's execution to be stopped in the Time input. Introduce the time in milliseconds (1s = 1000ms).

Move

This action moves a widget to a certain position in the screen. The target position can be defined independently for the x-position (left) and y-position (top) and in the following ways:

• Current: Use this option if you don't want to move the element for the selected axis.
• Fixed: Use this option if you want to move the selected widget to a certain known position. The new position will be taken as relative to the widget's closest parent.
• Offset: Use this option to move the selected widget by an offset defined in pixels.
• Calculated: This option will set the left or top position of the element as a result of an expression.

The move action can have additional options when combined with drag events:

• With cursor: Use the move action combined with a 'on Drag' event in order to move a widget around the screen according to the mouse movement.
• Drag start position: This option can be only combined with the 'on Drag' or 'on Drag Stop' events in order to move the selected widget to the position where the drag action started.

You can also animate the move action selecting the desired duration and easing function (see the Animation section for more information).

Resize

This action changes the width and height of an element dynamically. Used in combination with the event type 'on window resize' is a powerful tool to prototype Responsive and Adaptive websites or apps. The options are:

• Current: Leaves the width or height of the element at the value it has at that moment of simulation.
• Fixed: This option will set the width or height of the element as the value indicated.
• Calculated: This option will set the width or height of the element as a result of an expression.
• Relative to parent: This option will change the width or height of the element to a percentage of the element were it is contained.

You can also animate the resize action selecting the desired duration and easing function (see the Animation section for more information).

Rotate

This action changes the angle of an element dynamically. The options are:

• Fixed: This option will set the angle of the element as the value indicated.
• Offset: This option increments/decrements the angle of the element with the indicated value.
• Calculated: This option will set the angle of the element as a result of an expression.

You can also animate the resize action selecting the desired duration and easing function (see the Animation section for more information).

Insert Into

This action inserts a specific widget into another container widget. When a widget is inserted into a container, its absolute position will remain the same if the container has a free layout. Otherwise, the widget will be inserted according to the container's layout positioning itself next to the closest container's child.

Widgets which can be used as target containers for this action are:

• Panels from dynamic panels.
• Table Cells.
• Canvas (select the canvas and click OK. You won't see any selection feedback and can't select it through the Outline).

There is only one restriction for this action: container widgets cannot be inserted into any of their children widgets.

Data Master Action

This action is directly related to Data Masters. Select this action if you want to modify any Data Master by adding new records to it, modifying or deleting them.

To create any Data Master action, first click on the radio button to select the Data Master you want to be modified from current Data Master list. Then click on one of the following buttons:

• New: Click on new to construct an expression to add a new record to the Data Master. For further information about how to create the expression 'New' go to Data Simulation - Create.
• Modify: Click on modify to construct an expression to modify a Data Master's record or a set of records. For further information about how to create the expression 'Modify' go to Data Simulation - Update.
• Delete: Click on delete to construct an expression to delete a record or set of records from the Data Master. For further information about how to create the expression 'Delete' go to Data Simulation - Delete.

Set Focus on

This action sets the focus on an input field or a selection component in the same screen.

To create this action, just select the target widget you want to focus on the current screen displayed in the small canvas or select it on the outline view.

Scroll To

This action is commonly used when we have a widget on the screen which is out of the user view and we want it to be seen. When this action is executed the canvas will scroll until the target widget can be seen.

To create this action, just select the target widget you want to scroll to on the current screen displayed in the small canvas or select it on the outline view.

You can also animate the scroll action selecting the desired duration and easing function (see the Animation section for more information).

Enable/Disable input

This action enables or disables an input or a selection widget, making possible that the user interacts with it or not. Notice you can only apply this action to input and selection widgets. To create an enable/disable action follow the steps:

1. Select the input or selection widget you want to enable/disable on the current screen displayed in the small canvas or select it on the outline view.
2. Select enable or disable clicking on the corresponding radio button.

Paginate Data Grid

This action is directly related to Data Grids and Data Lists. Select this action if you want to navigate through the pages of a Data Grid or Data List.

To create any pagination action, select the 'Pagination Action' radio button and then click on one of the following buttons:

• First Page: Click on 'first page' if you want to display the first page of a Data Grid/Data List.
• Previous Page: Click on 'previous page' to display the page previous to the one currently being displayed of a Data Grid/Data List.
• Next Page: Click on 'next page' to display the page which follows the one currently being displayed of a Data Grid/Data List.
• Last Page: Click on 'last page' to display the last page of a Data Grid/Data List.