# Grid appearance and layout

Videos on YouTube: Layout options, Collect elements, Prediction elements (German, but auto-translated subtitles available)

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

Video on YouTube: Add and edit elements (German, but auto-translated subtitles available)

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

Last Updated
1/18/2022, 8:49:06 AM