Navigation:  GUI Introduction >

Elements Panel

Previous pageReturn to chapter overviewNext page

Elements panel is a panel that lists all available elements for you to create your prototype.  You can click the "Elements" button on the left toolbar, or press Ctrl+E (Command + E in Mac OS) to show/hide the elements panel.

element_view

Filter Elements

You can filter the listed elements by tag or keyword.

On the top of the elements panel, there are five predefined tag buttons.  Clicking these tag buttons can filter the elements by tag.  The "All" tag is selected by default, means all elements will be listed.  You can click any tag button to filter the listed elements by that tag.  For example, clicking on the "Custom" button will list all custom elements.

tag_buttons_mac

You can also add your own tag buttons by clicking the "+" button, and then input the new tag:

add_shape_category

Then you will see the new "shape" tag button.  If you click it, all shape elements will be listed.  You can click the "-" button to remove the current selected tag button.  Just keep in mind the predefined five tag buttons can not be removed.

Besides filtering elements by tag, you can also filter elements by keywords.  Just input the keyword in the "Filter Elements..." field and you will see all shape elements below.

filter_by_keyword

Add Element into Page

There are three approaches to add element into your page.

Drag and Drop

You can drag any element from the elements panel and drop it into any location in your page.  The newly created element will have default size.

drag_and_drop_to_area

Double-Click

You can double-click any element in the elements panel and it will be added into your page.  The newly created element will have default size and location.

double_click_to_add_element

Single-Click, then Drag and Drop

You can single-click any element in the elements panel, and then drag and drop in your page to determine the location and size of the new element.

click_dnd_add_element

Toolbar on Bottom

The toolbar on bottom of elements panel provides these tools:

pack_custom_elem_button Clicking this button can pack current selected element(s) into a custom element, which will be listed in the elements panel for future usage.

load_fce_fcl_button Clicking this button can load custom element (*.fce) or library (*.fcl) from file, and list the loaded custom element(s) in the elements panel.

download_resource_button Clicking this button will open ForeUI Store window, which allows you to download new custom elements, libraries and other resources.

pack_elements_button Clicking this button can pack one or more elements into .fce file or .fcl file.

pack_as_fcl_file