Table of Contents

Layout - Grid

Dialog selections are discussed below the image. To navigate to an item, select it in the Grid Layout image.

Layout - Grid dialog

Select Option Pin Copy Cut Save Delete Selection:_back_-_forward Z-order:_front_-_back Group Rotate-Transform Align Not clickable since it is selected. Tap an empty area to navigate, or see the Options description (below) for configuration of the grid layout. Empty area - click to deselect grid layout Empty area - click to deselect grid layout Selection Options Pin Copy Cut Save Delete Empty area Empty area Selection: Back- Forward Z-order: front - back Group Rotate - Transform Align Not clickable since it is selected. Tap an empty area to navigate, or see the Options description (below) for configuration of the grid layout.

Grid Layout Object Design screen. Make selection above.

Grid Layout

The page after selecting the Grid layout, with the 'grid' selected. It provides spatial positioning, canvas boundaries, and action toolbars for linear vertical container arrangements.

Steps to Complete the Grid Layout

The user will customarily follow these steps to complete the grid layout setup:

  1. The container with the 5 default object placeholders can be moved to another location by tap/hold/dragging the center of the selected container itself. Individual object placeholders cannot be moved independently, only in tandem.
  2. The 5 default placeholders can be increased or decreased by using the Object Design menu Options icon which will open the Option Edit dialog shown here . While this interactive demo cannot apply a grid layout, those wanting to explore its Options for further interaction and explanation can tap the Option icon in the Grid Layout dialog at the top of this page.
  3. To assign an action to a + placeholder:
    1. Deselect the Grid Layout container by tapping an empty space outside of the layout placeholder.

Grid Layout Objects Description

Griod objects

Other objects on this page are described below. For items that are not actionable in this demo, provide a video of the action or user involvement in the selection.

Object Design Menu (Top)

Notice the Object Design Menu at both the top and bottom of the screen. The icons contained in these menus describe what will happen or what options are available for the selected object. Read below and view a demo of what happens when specific icons are selected.

TOP Object Design Menu - Top

Selection

- Once the selection icon is tapped, the user can drag left to partially intersect any selected object or right to fully select any object.

Action

- This would normally enable the object's action when tapped or swiped, such as an application, folder, or calendar. However, since the “layout” is selected, the Action icon is grayed out. A user will want to assign “actions” to the objects within the grid layout. To accomplish that, tap an empty area to deselect the layout. This changes the Launcher focus from Object Design mode to Page Design mode, enabling tapping the layout's '+' icons to assign actions.

Option
Pin
Copy
Cut
Save
Delete


Object Design Menu (Bottom)

BOTTOM Object Design Menu - Bottom

Selection: Back - Forward
Z-order: Front - Back
Group
Rotate - Transform
Align

===== Hidden Index Anchors ===== ui-layout-grid-deselected