Is there a way to display more than 3 inline action icons on a field in a detail view on mobile?

AppSheet AppSheet Q&A
1

I want to display 4 action icons (call, text, confirm, or mark bad) on a phone field in a mobile detail view, but the layout seems to only have room for 3 icons; when I set a 4th one to inline it just pushes the first one off the edge of the display. Is there a way to create a layout that would allow 4 icons? or to bump the icons down to the row beneath the phone field so there is more room for them?

Screenshot 2025-03-03 at 11.44.30 AM.png
Screenshot 2025-03-03 at 11.44.30 AM.png357×280 9.89 KB

2

In AppSheet, you have a few ways to adjust your layout to accommodate all four icons for the phone field in a mobile Detail View.

Solution 1: Use a Virtual Column for a Second Row of Icons

Since AppSheet does not allow direct wrapping of inline actions, you can create a Virtual Column that holds additional actions and displays them below the phone number.

Steps:

  1. Create a Virtual Column:

    • Go to Data > Columns for the table that contains the phone field.
    • Click “Add Virtual Column”.
    • Name it something like Phone Actions 2.

  2. Configure the Virtual Column Formula:

    • Set the formula to a simple placeholder like:

      "Additional Actions"

    • This column will not store data but will act as a visual separator for more action buttons.

  3. Go to UX > Detail View Settings:

    • Under Columns, add the new Virtual Column below the phone field.
    • Assign the extra two inline actions to this Virtual Column.
    • Now, you will have two rows of icons:
      • First row (attached to the Phone field).
      • Second row (attached to the Virtual Column).

Solution 2: Reduce Icon Size (If Available)

While AppSheet does not provide a direct “size” option for inline actions, you can try reducing text label lengths to free up space.

Solution 3: Use a Dropdown Action for Extra Buttons

  1. Instead of showing four separate buttons, create a single “More Actions” button.
  2. Use an Action of type “Grouped: execute a sequence of actions” that presents a list of available phone actions.
  3. When the user clicks “More Actions”, it can show an overlay or navigate to another view with all four options.

Solution 4: Move Actions to a Separate “Quick Actions” Section

  1. Go to UX > Detail View for the table.
  2. Instead of attaching all actions to the phone field, create a dedicated section in the Detail View.
  3. Under Columns, add an empty Virtual Column as a placeholder.
  4. Assign all four actions to this section.

This method prevents icons from being pushed off-screen and keeps them organized.