Selected Element Toolbar

The Selected Element Toolbar appears when you select a Page Element on the Page Editor canvas.

It provides quick access to actions for working with the selected element without leaving the visual editing area. These actions can include opening Element Settings, importing content, reusing element structures, and exposing content that is otherwise hidden while editing.

The toolbar is contextual. Available actions depend on the selected element's type, position, and supported behavior. Some actions appear directly on the toolbar, while others are available from the selected element's action menu.

Use the Selected Element Toolbar to work with the element itself. Use Element Settings to configure its content, appearance, layout, and other supported properties.

Selecting an Element

Select a Page Element on the canvas to access its available toolbar actions.

The selected element may be:

• A layout element, such as a Container, Row, Column, Content Area, Flexible Area, or Collapsible Area.
• A content element, such as Heading, Text, Image, Video, Button, or Link.
• An input control inside a Form.
• A Widget or other configured component.
• A child element nested inside another element.

Selecting the Correct Element

Page Elements are often nested within other elements. Each level represents a different part of the page structure.

For example:

Container
  Row
    Column
      Image
      Heading
      Button

Selecting the Column allows you to work with the area containing all three child elements. Selecting the Image, Heading, or Button allows you to work with that individual element.

When selecting an element:

1. Locate the content or layout area you want to change.
2. Select the corresponding element on the canvas.
3. Check the selected element's label, outline, or other available selection indicators.
4. Confirm that the toolbar belongs to the intended parent or child element.
5. Choose the appropriate toolbar action.

If an action seems to affect the wrong area, check the current selection before continuing. A parent element and its children can have different settings, available actions, and editing consequences.

For more information about working with nested page structures, see Editing Page Content.

Common Toolbar Actions

The available actions depend on the selected element. Common actions include:

Action	Purpose
Settings	Opens Element Settings for the selected element.
Import HTML	Converts supported external HTML markup into editable Page Elements inside the selected element.
Toggle View	Shows or hides an alternate editing view for supported elements.
Toggle Target	Shows or hides content associated with a supported control or trigger.
Clipboard Export	Copies an ioLoop element structure to the browser clipboard for reuse.
Clipboard Import	Adds compatible ioLoop element content from the clipboard into the selected element.
Text Alignment	Provides alignment controls for supported text-oriented elements.

Depending on the editing context, other controls may be available for rearranging, duplicating, or removing elements.

Not every element supports every action. Actions that do not apply to the current selection may be unavailable or omitted.

Action Menu

The selected element's action menu groups actions that apply to the current selection.

Depending on the element, the menu may provide access to:

• Settings.
• Import HTML.
• Clipboard Export and Clipboard Import.
• Toggle View.
• Toggle Target.
• Other supported element-specific actions.

For example, a content container may provide an import action because it can contain child elements, while a menu-related control may provide a way to expose associated popup content for editing.

Some actions can also be available directly on the toolbar. Use the controls displayed for the selected element rather than expecting every toolbar to contain the same options.

Settings

Settings opens the Element Settings dialog for the selected element.

Use Settings to configure properties such as:

• Text content and formatting.
• Image or video sources.
• Button labels and actions.
• Link destinations.
• Layout sizing, spacing, and alignment.
• Form input properties.
• Widget configuration.
• Styling and responsive presentation.

The properties shown depend on the element type.

Selected Element	Example Configuration
Image	Image source and presentation.
Heading or Text	Content and supported typography settings.
Button	Label, appearance, and supported interaction settings.
Row or Column	Layout and responsive arrangement.
Form input	Input-related properties.
Widget	Settings supported by that Widget.

Opening Element Settings

1. Select the element you want to configure.
2. Choose Settings from its available toolbar controls or action menu.
3. Modify the relevant properties in Element Settings.
4. Apply or save the changes as appropriate.
5. Preview the Page or Form when the change affects appearance, layout, or interaction.

Changing an element's appearance does not necessarily change any Page Flow behavior that references it. Review related logic when modifying interactive elements.

For detailed configuration guidance, see Element Settings.

Import HTML

Import HTML converts supported HTML markup into editable Page Elements inside the selected element.

Use Import HTML when:

• Migrating existing website content.
• Reusing an HTML content block created elsewhere.
• Starting from existing markup instead of recreating the layout manually.

Import HTML is intended for a suitable parent element or container that can contain the imported child content.

Importing HTML into an Element

1. Select the destination element or container.
2. Choose Import HTML from its available actions.
3. Paste the HTML markup into the import dialog.
4. Confirm the import.
5. Review the generated Page Elements and adjust their settings or layout as needed.
6. Save and preview the result.

For example, you might import a simple content section containing a heading, paragraph, and link. Supported parts of the markup are converted into elements that can then be edited through the Page Editor.

Supported Content and Limitations

HTML import is a content conversion operation, not a mechanism for importing an entire web application's implementation.

ioLoop processes the markup and filters unsupported or unsafe content. As described in Editing Page Content, markup such as scripts, stylesheets, page header metadata, iframes, embedded media tags, and SVG structures is not imported.

The resulting Page Elements may therefore differ from the original markup. In particular:

• Custom styling may need to be recreated using Element Settings or supported CSS approaches.
• External scripts and application behaviors are not recreated.
• Unsupported embedded content may need to be replaced with suitable Page Elements or Widgets.
• Interactive workflows may need to be configured separately through Page Flow.

After importing, inspect the element hierarchy and verify content, links, media, styling, and interactive behavior in Preview.

Import HTML is for external markup. To move existing ioLoop element structures between editing contexts, use Clipboard Export and Clipboard Import instead.

Clipboard Export and Clipboard Import

Clipboard Export and Clipboard Import allow you to reuse Page Element structures within ioLoop.

They are particularly useful when a layout or group of configured elements needs to be recreated in another Page, Form, or Page Slice.

Clipboard Export

Clipboard Export copies the selected element and its supported configuration to the browser clipboard using ioLoop's element format.

You can use it to reuse:

• A configured content section.
• A nested layout structure.
• A Button Group or a group of content elements.
• A Card or similar visual composition.
• A navigation or media section, where supported.

When the selected element contains child elements, the exported structure can include those children.

To export an element:

1. Select the element that represents the structure you want to reuse.
2. Confirm whether you need the parent and its children or only an individual child.
3. Choose Clipboard Export from the available actions.
4. Keep the copied content available in the browser clipboard for the destination import.

Clipboard Import

Clipboard Import reads compatible ioLoop element content from the browser clipboard and adds it inside the selected element.

To import exported content:

1. Open the destination Page, Form, or Page Slice in the Page Editor.
2. Select a destination element that can contain the imported structure.
3. Choose Clipboard Import from the available actions.
4. Import the compatible content from the clipboard.
5. Review the new element hierarchy and its configuration.
6. Save and preview the destination.

The destination must support the imported content. An element that cannot contain the copied structure may not offer a compatible import action.

Example: Reusing a Card Layout

Consider a Project with a Card containing an Image, Heading, Text, and Button:

Card
  Image
  Card Body
    Heading
    Text
  Card Footer
    Button

To reuse this design on another Page:

1. Select the Card rather than only its Heading or Button.
2. Use Clipboard Export to copy the Card structure.
3. Open the destination Page.
4. Select an appropriate parent area for the Card.
5. Use Clipboard Import.
6. Adjust the text, image, and Button settings for the new context.

This avoids recreating the same nested structure manually.

Reviewing Imported Elements

Reusing an element structure does not mean that every Project-specific dependency will necessarily work in its new location.

After a clipboard import, review:

• Links and Page URLs.
• Image and media references.
• Form or Widget configuration.
• Page Flow interactions that depend on specific elements or the current Page.
• Context-specific content or styles.

For example, a copied Button may need its destination or Page Flow interaction reviewed before it is used on a different Page.

Clipboard Import expects content produced by ioLoop's Clipboard Export. It is not intended for arbitrary HTML copied from a website or external editor.

Browser clipboard permissions can also affect the success of export and import operations.

Toggle View

Toggle View is available for supported elements that have an alternate editing view or content area that may not be visible in the current canvas state.

Use Toggle View to expose that content while working in the editor.

For example, a collapsible layout or menu-related structure may contain content that is temporarily hidden in its normal appearance. Toggle View can help make that content accessible for selection and editing where the action is supported.

A typical workflow is:

1. Select the element that supports an alternate view.
2. Choose Toggle View.
3. Select and edit the content revealed on the canvas.
4. Toggle back when appropriate to inspect the normal layout.
5. Preview the Page or Form to test the user-facing behavior.

Toggle View is an editing aid. Do not assume that changing the visible editing state changes the element's runtime interaction or default behavior for application users.

Toggle Target

Toggle Target is available for supported controls that are associated with another element or content area.

Use Toggle Target when you need to expose the content controlled by the currently selected trigger.

For example, a menu trigger may be associated with a Popup Menu that is not visible on the canvas. Toggle Target can expose that menu so its Popup Menu Items can be selected and edited.

A typical workflow is:

1. Select the supported control or trigger.
2. Choose Toggle Target.
3. Locate the associated target content on the canvas.
4. Select and edit the target's child elements or settings.
5. Return to the normal editing view when appropriate.
6. Preview the interaction to verify that the control opens or reveals the intended content.

Toggle Target helps you access content associated with the selected control. It does not, by itself, configure the relationship, destination, or application logic for that control.

For menu-specific configuration, see Menus and Navigation.

Toggle View vs. Toggle Target

The two actions serve related but different editing purposes.

Action	When to Use It	Editing Focus
Toggle View	A supported element has an alternate view or hidden editing state.	The selected element's own alternate content or view.
Toggle Target	A supported control is associated with another element or content area.	The content targeted or controlled by the selected element.

Both actions help reveal content while editing. Neither should be treated as a substitute for configuring the element's actual user-facing behavior.

Text Alignment

Text Alignment provides a quick way to adjust alignment for supported text-oriented elements, such as Headings and Text.

Use it when the immediate task is to change how text is aligned in the selected editing context.

For example, a centered Heading may be appropriate in a feature panel, while left-aligned Text may be more suitable for a longer description.

The available alignment options depend on the selected element. For complete typography, spacing, and other presentation settings, open Element Settings.

For more information, see Text and Content.

Moving, Duplicating, and Removing Elements

Depending on the element and editing context, the Page Editor may provide controls for moving, duplicating, or removing selected elements.

These operations affect the page structure rather than just a visual property.

Moving Elements

When moving an element, pay attention to its parent and destination.

For example, moving a Button between Columns may change its position and how it responds to the surrounding layout. Moving a parent element can reposition the entire group of elements nested inside it.

After rearranging content, preview the layout at relevant screen sizes.

Duplicating Elements

Duplicating an element can be useful for creating visually consistent content, such as repeated feature panels or similar Buttons.

Review the duplicated element's content, destinations, and supported interaction settings. A copy intended for a different purpose may need more than a change to its label.

For data-driven repeated content, consider whether Data Design is more appropriate than maintaining many manual copies.

Removing Elements

Before removing an element:

1. Confirm that the selected element is the one you intend to remove.
2. Check whether it contains children that will also be affected.
3. Review whether Page Flow, Data Design, Forms, Widgets, or navigation controls depend on it.
4. Remove the element using the available editing action.
5. Review the remaining page structure and associated behavior.
6. Save and preview the result.

Removing a parent Container, Row, or Column can also remove its nested content. Removing or replacing a Button, input control, or Widget may leave Page Flow or other application configuration referring to the original element.

Element removal does not necessarily update every reference to that element elsewhere in the Project.

For more information, see Editing Page Content.

Working with Hidden and Nested Content

Some elements are difficult to select because they are nested deeply, collapsed, or displayed only during an interaction.

For example:

Menubar
  Menubar Item
    Menubar Item Link (Account)
    Popup Menu
      Popup Menu Item (Profile)
      Popup Menu Item (Sign Out)

The Menubar Item Link is the visible menu control, while the Popup Menu contains the choices shown during the menu interaction.

To edit a Popup Menu Item, you may need to expose the associated menu content through a supported Toggle View or Toggle Target action before selecting the child element.

Once the target content is visible, select the specific Popup Menu Item to configure its link or action. Changing the trigger's settings is not the same as changing the destination of a menu item within the popup.

When working with hidden or nested content:

• Confirm whether you have selected the parent, trigger, target, or individual child.
• Use the relevant toggle action only where it is available.
• Configure each element's properties at the correct level.
• Return to the normal layout as appropriate before reviewing the page.
• Preview the runtime interaction rather than relying only on what is visible in the editor.

See Menus and Navigation for additional examples of nested popup and collapsible menus.

Shared Content and Editing Scope

The toolbar operates on the selected element, but the effect of a change can extend beyond the currently open Page when that element belongs to shared content.

Editing Context	Scope of the Change
Page	Updates the selected Page's content.
Form	Updates the Form, including where that Form is reused.
Page Slice	Updates the Page Slice wherever it is referenced by Structured Pages.

For example, changing a Button or navigation element inside a shared Header Page Slice can affect every Structured Page that uses that slice after the change is published.

Before removing or changing elements in shared content, consider the other Pages and workflows that depend on them.

For more information, see Editing Structured Pages.

Choosing the Right Action

Need	Use
Change an element's content, appearance, or properties	Settings
Convert external HTML into editable elements	Import HTML
Reuse existing ioLoop element structure elsewhere	Clipboard Export and Clipboard Import
Expose an element's alternate editing state	Toggle View
Expose content associated with a selected control	Toggle Target
Quickly adjust supported text alignment	Text Alignment
Change an element's position	Available move or layout editing controls
Create another similar element	Available duplicate action, followed by configuration review
Remove an element and its applicable structure	Available remove or delete action, after checking dependencies

Good Practices

• Confirm the selection. Select the smallest element that matches the change you intend to make.
• Use Settings for configuration. Toolbar actions provide access to operations; Element Settings provides the element-specific properties.
• Use the correct import method. Import HTML is for supported external markup; Clipboard Import is for structures exported from ioLoop.
• Review converted HTML. Imported content may require adjustments to layout, styling, media, and interactions.
• Verify clipboard imports. Check destinations and application-specific dependencies after reusing elements elsewhere.
• Distinguish Toggle View and Toggle Target. Use each action according to whether you need an alternate view or a control's associated content.
• Treat toggles as editor aids. Test the actual interaction in Preview.
• Protect nested content. Inspect children before moving or removing parent layout elements.
• Check application references. Review Page Flow and related configurations when replacing interactive elements.
• Consider shared content. Changes to a Page Slice can affect multiple Structured Pages.
• Save and preview. Verify layout and behavior after significant toolbar operations.

Common Mistakes

Avoid these patterns:

• Selecting the wrong level. Editing a parent element when you intended to change an individual child.
• Expecting every toolbar to be identical. Available actions vary with the selected element and editing context.
• Using Clipboard Import for website HTML. Clipboard Import expects compatible ioLoop element content.
• Expecting HTML import to reproduce an entire application. Unsupported markup, styling, scripts, and external behaviors are not recreated.
• Assuming imported elements are fully configured. Reused elements may require updated links, media references, or Page Flow behavior.
• Confusing editor visibility with runtime behavior. Toggle View and Toggle Target help expose content for editing; they do not replace user-facing interaction settings.
• Removing a parent without inspecting its children. Nested content may also be affected.
• Replacing referenced elements without updating dependencies. Page Flow or Form behavior may still depend on the original element.
• Overlooking shared Page Slices. An edit to shared content can affect multiple Structured Pages.
• Skipping Preview. Changes that appear correct on the canvas may behave differently in the published application.

The Selected Element Toolbar is the Page Editor's quick-access interface for acting on the current selection. Choose the correct element, use the relevant action, and verify the resulting structure and behavior through Settings and Preview.

Related Topics

• Element Settings
• Editing Page Content
• Editing Structured Pages
• Element Library
• Layout Elements
• Text and Content
• Menus and Navigation
• Tables and Cards
• Data Design
• Page Flow