Grid appearance and layout

This chapter is about a grid’s layout and appearance and how to edit it:

  1. Adding elements and change the layout
  2. Editing grid elements menu
  3. Edit modal: changing label and image

Back to Overview

Adding elements and layout options

In the Edit view the following menu opens on a click on “More”:

edit view - more menu
Fig. 1: Edit view - menu “More”

These are the actions to select in the menu:

  1. New → New Element: creates a normal new element, opening a dialog where label and image can be defined
  2. New → Many new elements: creates multiple new normal elements at once, opening a dialog where multiple elements can be defined and inserted into the grid
  3. New → New collect element: creates a new collect element, see Terms
  4. New → New prediction element: creates a new prediction element, see Terms
  5. Delete all elements: removes all grid elements from the grid
  6. Add row to layout: adds a new row to the grid layout, e.g. creating a new third row for elements at the bottom in Figure 2
    add row
  7. Remove row from layout: removes the last row from the grid layout while keeping all grid elements. Applied to Figure 2 this would mean that afterwards there is only a single row where all six elements are placed.
    remove row
  8. Fill gaps: moves all grid elements as far left as possible, closing gaps. Applied to Figure 2 this would result in moving “Food” to the left, closing the gap between “Food” and “Clothing”.
    fill gaps

Editing grid elements

A right click (or long tap) on a grid element in edit view opens the following menu:

edit view - element menu
Fig. 2: Grid element menu

These are the options to select:

  1. Edit: opens a dialog to edit the label and the image of this element
  2. Actions: opens a dialog to edit actions that should be performed if this element is selected, see Grid actions
  3. Delete: deletes this element
  4. More → Duplicate: inserts a copy of this element to the grid
  5. More → Do element action: performs the actions that are assigned to this grid element, e.g. speaking the label or navigating to another grid

Edit modal

Clicking on “Edit” in the grid element menu (Fig. 2) opens this modal, Figure 3:

edit grid element
Fig. 3: Edit grid element modal

These are the elements in the modal of Figure 3:

  1. Label: change the label of the element shown under the image, can be empty
  2. Choose file: opens a file dialog to choose a different image
  3. Clear image: deletes the currently chosen image
  4. Image preview: shows a small preview of the currently chosen image
  5. Drop area: drag and drop image files in this area to select them. It’s possible to drag and drop files from a file explorer or also other programs like e.g. METACOM MetaSearch*.
    fill gaps
  6. Cancel: discard all changes and close the modal
  7. OK: save all changes and close the modal
  8. OK, edit previous: save all changes, edit the previous grid element in the edit modal
  9. OK, edit next: save all changes, edit the next grid element in the edit modal

*METACOM and MetaSearch © Annette Kitzinger

← Previous Chapter Next Chapter →

Back to Overview