# Action buttons

## Overview

You can use Action Buttons in Noloco to perform specific actions, or groups of actions, on your records. They are a great way to cut down on the number of repetitive tasks that your users have to do and to reduce human error with automation.

{% embed url="<https://cdn.prod.website-files.com/6145a64d8a08a13f1a8040f7%2F6745e5b663e17d8c57671d1b_action-button-flow-hd-3-transcode.webm>" %}

These seemingly simple buttons can be used to perform one of several different tasks on a record page, or one of its related records. For example you can [Create](https://guides.noloco.io/actions/action-buttons/create-records), View, [Update](https://guides.noloco.io/actions/action-buttons/update-records), or Delete a record, [add a comment](https://guides.noloco.io/actions/action-buttons/add-a-comment-action) to a record, Navigate to another record, Copy a record to the clipboard, [Show a message](https://guides.noloco.io/actions/action-buttons/show-a-message), Show an iFrame, or [Scan a barcode](https://guides.noloco.io/actions/action-buttons/barcode-scanner)

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-ddb69ef95fb08272a5ff9a5fc29492e29af4a7cf%2FList%20of%20Actions%20from%20Domhnall%20Noloco.png?alt=media" alt=""><figcaption><p>The different types of actions that can be triggered by Action Buttons</p></figcaption></figure>

You can also create multi-step actions by combining several actions together which get triggered by a single click. For example you could add an action button, like `Review & Publish` below, that allows you to review the name of a property and mark its status as active automatically.

![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-55fc293353280713e098c41e071d909e3aa6accd%2Fimage.png?alt=media)

![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-b52cd0e3ec82a6b64d7b6a88a820b2fc7f9d6c1b%2Freal-estate-sample.nolocolocal.dev_properties_view_recwXnvrpfOjO834l.png?alt=media)

### Adding an Action Button

To add an Action Button to your project, first enable edit mode. Next, click on the record where you want to add your action. At the bottom of the record's properties there is a section for Action Buttons.

Click the "+" button to add a new Action Button and then click on the edit icon to configure the appearance and functionality of your new Action Button.

![Adding an Action Button and then attaching an Action to the button](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-2dc30b2cdc16e73fccb3f86aa5c33989cc556977%2FAdd%20Action%20Button.png?alt=media)

### Configure an Action Button

Once you've added an Action Button you can configure the appearance and functionality of your button with the following options:

<table><thead><tr><th width="222">Option</th><th width="338">Description</th><th>Values</th></tr></thead><tbody><tr><td><strong>Button Text</strong></td><td>The text that appears on the button</td><td>Static string of text</td></tr><tr><td><strong>Appearance</strong></td><td>The colour of the button</td><td><p>Default - grey</p><p>Success - green</p><p>Warning - amber</p><p>Danger - red</p></td></tr><tr><td><strong>Icon</strong></td><td>The icon to show in the button (Optional)</td><td>Choose from one of our icons</td></tr><tr><td><strong>Type</strong></td><td>The way the action button executes</td><td><p>One click - Action executes immediately</p><p>Modal - Confirmation modal pops up before execution</p></td></tr><tr><td><strong>Modal Title</strong></td><td>The title of the modal</td><td>Dynamic string of text</td></tr><tr><td><strong>Modal Description</strong></td><td>Additional text to include in the modal</td><td>Any markdown formatted text</td></tr><tr><td><strong>Button Tooltip</strong></td><td>Help text to show when the user hovers over the button</td><td>Any markdown formatted text</td></tr><tr><td><strong>Notification</strong></td><td>Declare whether or not to show a notification to the user</td><td>On or Off</td></tr><tr><td><strong>Notification Type</strong></td><td>Choose the appearance (color and icon) of your notification, or choose to show the user confetti for completing the action</td><td>Success - Green<br>Information - Blue<br>Warning - Yellow<br>Danger - Red<br>Confetti - Confetto</td></tr><tr><td><strong>Notification Text</strong></td><td>Text to show in the Notification</td><td>Dynamic string of text</td></tr><tr><td><strong>What Should Happen</strong></td><td>What action will be performed</td><td>Explained in the section below</td></tr></tbody></table>

### Add an Action

Each Action consists of an Action Type, a Record and a Field. When you create a new Action you need to specify what should happen next, i.e. the Action Type. Supported record action types include:

* [Create a record](https://guides.noloco.io/actions/action-buttons/create-records) - Create new records with pre-filled or user-provided data
* [Update a record](https://guides.noloco.io/actions/action-buttons/update-records) - Modify existing record fields
* [Delete a record](https://guides.noloco.io/actions/action-buttons/delete-a-record) - Permanently remove records
* [Add a comment or note](https://guides.noloco.io/actions/action-buttons/add-a-comment-action) - Add comments to records
* [Navigate to](https://guides.noloco.io/actions/action-buttons/navigate-to) - Go to pages, URLs, emails, or phone numbers
* [Run an on-demand workflow](https://guides.noloco.io/actions/action-buttons/run-on-demand-workflow) - Execute workflows with complex logic
* [Show an iFrame](https://guides.noloco.io/actions/action-buttons/show-an-iframe) - Embed external content in modals
* [View a record](https://guides.noloco.io/actions/action-buttons/view-a-record) - Display record details in a modal
* [Copy to clipboard](https://guides.noloco.io/actions/action-buttons/copy-to-clipboard) - Copy text, URLs, or data to clipboard
* [Login](https://guides.noloco.io/actions/action-buttons/login) - Prompt authentication in public apps
* [Show a message](https://guides.noloco.io/actions/action-buttons/show-a-message) - Display custom messages and instructions
* [Scan a barcode](https://guides.noloco.io/actions/action-buttons/barcode-scanner) - Scan barcodes to populate fields or search records

<figure><img src="https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-03271a40e8e7bdeafcf63c37d89f05385d9fcf0e%2FSet%20Action%20from%20Domhnall%20Noloco%20(1).png?alt=media" alt=""><figcaption><p>Choose an Action Type (1); Specify the record (2) and select your fields (3)</p></figcaption></figure>

**The record:** This is the record you'll be updating or deleting, usually it's the record on the page, but you can update or delete a related record (like a buyer in this example)

* This record i.e. the record the Action Button is on
* This record -> {related record name} i.e. a related record from the record the Action Button is on

**The fields:** Toggle on the fields you want included as part of the action button

{% hint style="info" %}
One click create & update action buttons require [hidden values](https://guides.noloco.io/views/hidden-field-values) to be set
{% endhint %}

### Example Action Button

If an action button has multiple action steps, they can fill out the form fields required in each step and confirm each step before moving on. This makes it very easy to define multi-step workflows.

![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-793496faf38834102272483fd3371363c894eb5b%2Faction%20button%20example.png?alt=media)

The final result of this action button can be seen below:

A simple button that allows you to modify the sell price of a transaction and then mark the transaction as closed

![](https://319575345-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MifpIQWu0HCVYAt51oT%2Fuploads%2Fgit-blob-a429755abeb840a2cda054c1715b743fc6b1e92f%2Faction-buttons-example.gif?alt=media)

## Action Button Visibility

Action buttons can be configured with visibility rules to show/hide them based on user roles, user properties, or record values.

### Setting Up Action Button Visibility

1. **Select the Action Button**: In build mode, click on the action button you want to configure
2. **Access Visibility Settings**: Click on the "Visibility" tab in the sidebar
3. **Choose Visibility Type**: Select from the following options:

#### User Type Visibility

* **All Users**: Button visible to everyone (internal and external users)
* **Internal Users Only**: Button only visible to team members
* **External Users Only**: Button only visible to clients/external users

#### User Role Visibility

* Select specific user roles that should see the button
* Multiple roles can be selected
* Users must have one of the selected roles to see the button

#### Custom Visibility Rules

Create advanced rules based on:

* **Record Values**: Show button only when certain field conditions are met
* **Logged-in User Properties**: Show based on user attributes (department, status, etc.)
* **Complex Logic**: Use AND/OR conditions for sophisticated visibility rules

### Common Action Button Visibility Scenarios

#### Status-Based Buttons

Show different action buttons based on record status:

* "Approve" button only when status = "Pending"
* "Complete" button only when status = "In Progress"
* "Reopen" button only when status = "Closed"

**Setup**: Use Custom Rules > Record field condition: `Status equals "Pending"`

#### Role-Based Actions

Restrict powerful actions to specific roles:

* "Delete" buttons only for Admins
* "Approve" buttons only for Managers
* "Edit" buttons hidden from Read-only users

**Setup**: Use User Role visibility and select appropriate roles

#### User-Specific Buttons

Show buttons only for records owned by the current user:

* "Edit My Profile" only on user's own record
* "Delete My Task" only on tasks assigned to them

**Setup**: Use Custom Rules > `Record field "Assigned To" equals "Logged in User"`

### Testing Action Button Visibility

1. **Use "View as User"**: Test different roles and scenarios in build mode
2. **Check All Conditions**: Verify all visibility conditions are met
3. **Test Edge Cases**: What happens with empty fields, new records, etc.
4. **Mobile Testing**: Ensure buttons appear correctly on mobile devices

### Troubleshooting Action Button Visibility Issues

#### Button Not Appearing

1. **Check Visibility Rules**: Verify the user/record meets all conditions
2. **Role Assignment**: Confirm the user has the expected role
3. **Field Values**: Check that record fields have the expected values
4. **Permissions**: Ensure the user has permission to perform the action
5. **Publishing**: Republish the app after making visibility changes

#### Button Shows When It Shouldn't

1. **Review All Rules**: Check for conflicting or overly broad visibility rules
2. **Test Conditions**: Verify the visibility conditions are working as expected
3. **User Properties**: Check if user attributes are properly set
4. **Record State**: Ensure the record is in the expected state

#### Visibility Rules Not Working

1. **Refresh Cache**: Clear browser cache or test in incognito mode
2. **Check Field Names**: Ensure field references in rules are correct
3. **Data Types**: Verify field types match the visibility rule conditions
4. **Rule Logic**: Test AND/OR logic - all AND conditions must be true

### Advanced Action Button Visibility

#### Multi-Step Workflow Buttons

Create buttons that appear at different workflow stages:

1. "Start Review" (visible when status = "Draft")
2. "Approve" (visible when status = "Under Review" AND user role = "Manager")
3. "Publish" (visible when status = "Approved" AND user = record creator)

#### Conditional Button Text

Use dynamic text in buttons based on visibility conditions:

* "Submit for Review" vs "Resubmit for Review"
* "Assign to Me" vs "Unassign from Me"

#### Time-Based Visibility

Show buttons based on dates:

* "Renew" button only appears 30 days before expiration
* "Late Payment" actions only after due date

**Setup**: Use Custom Rules with date comparisons and relative date filters

### Troubleshooting

#### Browser Issues

If your browser seems to block `Navigate to` actions you may need to enable pop-ups in your browser for Noloco. Additionally you may need to disable browser extensions such as Loom to allow these actions to function as expected.

#### Visibility vs Permissions

Remember: Visibility controls what users see, but permissions control what they can actually do. Always set both:

* **Visibility Rules**: Control button appearance
* **Table Permissions**: Control actual data access and modification rights

### Hidden Field Values

Learn how to pass hidden field values for your action buttons [here](https://guides.noloco.io/views/hidden-field-values).