i4designer Knowledgebase

The quick actions area

Abstract

Check out this article to read more details about each of the options provided by the i4designer quick actions toolbar.

The quick actions area is positioned at the top of the Designer page allowing the user to perform a set of commands oriented towards the controls available in the currently opened project.

Quick_actions_1_20.jpg

The quick actions area

This toolbar provides the user with the following commands:

Action

Icon

Description

Undo

Redo.jpg

Erases the last changes done to the project.

Redo

Undo.jpg

As opposed to the undo the action, it reverses the undo or advances the project buffer to a more recent state.

Copy

Copy.jpg

Copies a component and allows the user to reuse it on an alternate location. The user can copy a i4designer control with different purposes:

  • the copied control can be inserted on the Designer page, in a different position.

  • the copied control JSON file can be inserted in a source code editor for further use.

Cut

Cut.jpg

Cuts a control and allows the user to move it to an alternate location.

Paste

past.jpg

Inserts a previously copied or cut control to an alternate position in the Designer project page.

Show errors

Show_errors.jpg

Allows the user to check the project control settings for errors. By enabling the toolbar button a visual indication about erroneous settings is displayed.

Show_errors.jpg

Example of highlighted error

Bring to Front

Bring_to_front.jpg

Determines the placement of an i4designer component, so that it appears in front of another control.

Send to Back

Send_to_back.jpg

Determines the placement of an i4designer component so that it appears behind another control.

Bring Forward

Bring_forward.jpg

Brings a component one step toward the front.

Send Backward

Send_backward.jpg

Sends a component one step towards the back.

Horizontal distribution

Horizontal_distribution.jpg

Horizontally distributes the selected components

Vertical distribution

Vertical_distribution.jpg

Vertically distributes the selected components

Align to left

Align_to_left.jpg

Aligns the selected components to the left side of the drawing space.

Horizontal centering

Horizontal_centering.jpg

Centers the component horizontally. The component is positioned at the center of the drawing space, by equally splitting the remaining space available on the left and the right side of the page.

Align to right

Align_to_right.jpg

Aligns the selected components to the right side of the drawing space.

Align to top

Align_to_top.jpg

Aligns the selected components to the top of the drawing space.

Vertical centering

Vertical_centering.jpg

Centers the component vertically. The component is positioned at the center of the drawing space, by equally splitting the remaining space available at the top and the bottom side of the page.

Align to bottom

Align_to_bottom.jpg

Aligns the selected components to the bottom of the drawing space.

Relative to page / Relative to last selected item

Relative_to_page_ok.jpg
Realtive_to_item.jpg

Allows the user to toggle between relative to page and relative to last selected item alignment. This option is used when aligning multiple components.

The Relative to page option aligns the selected objects relative to the page borders.

When spacing and aligning objects, using the Relative to the last selected item option, the selection should be made via Ctrl+Click. This way, the user can decide which is the last selected item.

multiselection_via_click.jpg

If multiple items are selected by drawing a rectangle on the drawing surface, the system will align the selected components relative to the last component added to the project page.

Multiselect_drag.jpg

Toggle grid view

show_grig.jpg

Allows the user to enable or disable the grid view of the Designer's surface.

Grid_enabled.jpg

Toggle ruler view

Show_ruller.jpg

Allows the user to enable or disable the ruler view of the Designer's surface.

rule_enabled.jpg

Toggle guidelines

Toggle_guide_lines.jpg

Allows the user to enable or disable the control position on the Designer page surface.

Guide_line_is_enabled.jpg

Enable snap to grid

Enable_snap_to_grid.jpg

Allows the user to enable or disable the snap to grid function. When the snap to grid function is enabled the component will be automatically fitted on the drawing surface, to the closest cell.

Snap_to_grid_on.jpg

Toggle cursor guidelines

Toggle_cursor_lines.jpg

Allows the user to enable or disable the mouse location pointer on the Designer page surface.

Toggle_function.jpg

Group selected components

Group_components.jpg

Allows the user to group the selected components in a frame, which is linked to an automatically created page. For more details about this function, please also visit the dedicated tutorials here.

group_components.jpg

Some of the quick actions area commands can also be used by means of keyboard shortcuts:

Designer command

Windows keyboard shortcut

Mac keyboard shortcut

Undo

Ctrl+Z

Command+Z

Redo

Ctrl+Y

Command+Y

Copy

Ctrl+C

Command+C

Cut

Ctrl+X

Command+X

Paste

Ctrl+V

Command+V

Duplicate

Ctrl+D

Command+D

Delete

Delete

Command+Delete

Objects selection (used when selecting multiple objects)

Ctrl+click

Command+Click