Create custom actions and place them either on the Detail Page, Activity Timeline or right on the Card. There are different types of App Actions:
- System. Pre-existing ones like Edit or Delete Records (out-of-the-box).
- Automation. On App Action click, trigger your automation.
- Custom Code. Create your own flow.
- Add Task. Creates a new Task.
- Bulk. This type of action requires some custom code.
- Bulk Add. Add multiple items at once.
- Dropdown & Overflow. Creates a menu with multiple options.
User Permissions: Only Administrators can create App Actions.
Prerequisites: For the Automation type, the desired Automation has to be created before adding a new App Action.
In this tutorial, we will cover the following topics:
- Navigate to App Actions
- Create App Action
- Edit App Action
- Deactivate / Activate App Action
- Reorder App Actions
- Automations
- Custom Code App Actions
- Custom Code Examples
- Form Rules for App Actions
Navigate to App Actions
Open the menu and go to 'Settings' to display the available options, then select your desired App and click on the 'App Actions' tab. You can also use the search function to get there faster, just start typing 'App Actions'.
Create App Action
Click on the 'Create App Action' button to get started.
There are a few elements to take into consideration when creating a new App Action, you can see the details for each of them below:
1. Name
Identifies the App Action.
2. Type
Automation
It will allow you to select from any of the existing automations in the field available above.
If the type is 'Automation' here you will need to select the automation that will be triggered when the App Action button is clicked on.
Bulk
This type of action needs a bit of custom code.
You’ll see two text boxes:
•Use the first box to set the condition for the action.
•Use the second box to define what the action will do.
For example, in the next image, we’ve created a button called 'Won' that marks a record in the Opportunities App as 'Closed Won.'
This is How to Set it Up
First you have to go to Settings>App>Opportunities and fill the required fields as shown above.
Then on the Bulk Action Custom Code you have to place the next code at the Bulk Condition.
(function(records, context) {
const {
userPermissions,
aclUtils,
roles,
listActionOptions: listApi,
} = context;
const allowed = userPermissions.includes(roles.BULK_EDIT) &&
aclUtils.hasPermission(context.appACLs, 'update');
if (allowed && (records.length > 0 || listApi.allSelected)) {
return {
disabled: false,
};
}
return {
disabled: true,
};
}(records, context))
This code checks if a Bulk action, like 'Edit' should be available based on two things:
•The user’s permissions to perform Bulk Edits or Updates.
•Whether there are records selected or not.
After copying the code, the next step is to define the Bulk Action for your button. Here’s the code for that section:
(function(records, context){
const {
appConfiguration: entity,
userPermissions,
aclUtils,
roles,
listActionOptions: listApi,
} = context;
const SALES_STAGES = {
CLOSE_WON: '69dcb80b-ebb8-43cb-ab61-b23596ac800f',
CLOSE_LOST: 'f3b51638-5aed-4884-8c41-57ce7eb0c931',
};
const getIds = () => {
let ids = [];
if (listApi.allSelected) {
ids = ['all'];
} else {
ids = (records || []).map((record) => record.id);
}
return ids;
};
context.clientAPI
.bulkUpdateEntities({
ids: getIds(),
entity: entity.name,
pattern: listApi.extraData.pattern,
filters: listApi.extraData.filters,
field_values: {
deal_fa_field16: SALES_STAGES.CLOSE_WON, // Sales Stage
},
})
.then(() => {
context.clientAPI.showSuccessMessage('Done!');
listApi.resetSelection();
})
.catch((e) => {
context.clientAPI.showErrorMessage(e);
});
}(records, context));
This code handles a bulk update operation:
•It updates either the selected records or all records in the app.
•It changes a specific field (deal_fa_field16) to 'CLOSE_WON.'
•It provides feedback to confirm success ('Done!') or highlight errors, then clears the selected records.
Here is the button in action:
Bulk Add
This type of App Actions lets you add multiple items at once, in this example, the 'Add Contacts' button on the Details Page of any Account Record lets you create multiple Contacts and add them to the account.
Here is the Builder layout:
And this is the button placed on the Details Page:
Custom Code
For more complex actions that might involve 3rd party apps. Here is where you can add the code for your App Action. From simple status changes to more complex integrations with 3rd party apps.
We’ve included a few examples right here in this article for you to reference.
Dropdown
This type is useful if you'd like to create a menu with multiple options. In this example, a dropdown was created within the Detail Page of the Contact App. The Child App Actions are the dropdown options.
Overflow
This type is useful if you'd like to create a menu with multiple options, in contrast with Dropdown the changes are only visual. In this example, a menu was created within the Detail Page of the Contact App. The Child App Actions are the menu options.
This is what it looks like in action.
Set Fields
This is a great way to add a button that performs multiple tasks without having to create any code. Let's take a look at an example. We're going to create a button that will allow team members to close a sale with one button click.
After choosing the action name and appearance it's important to decide where this button will be placed. In this case, it will be on the detail page of the record as well as the list view menu. Feel free to add an icon if you'd like the button to stand out a little.
Now we need to create our conditions. In this case, the button will not appear if the Contact wasn't Created By the User called Robert Anderson.
Lastly, we need to set our fields. These are the actions that will take place behind the scenes when the button is clicked. In this case, the 'Contact Stage' will be changed to 'Customer'.
System
The system type has all out-of-the-box actions for the app to run.
_____________________________
Webform's URL
With the System type of action, you can also create custom URLs for Webforms. These URLs will automatically include Record data and be unique to each record.
For example, we’ll set up a button on the Detail Page of any Contact record. Clicking this button will allow you to copy a pre-filled URL to your clipboard. You can paste this link into a browser to see the Webform with the record’s information already filled in.
Here’s how to set it up:
1.Go to the App Actions tab in the Contact App’s settings.
2.Click Add App Action to open the editor.
3.Select System as the action type to enable Webform functionality.
Here’s what it looks like:
To set up this App Action, choose System as the Type. Then, from the dropdown called System Type, select Webform URL since the button’s purpose is to generate a URL you can copy and paste into a browser.
Next, use the Webform dropdown to pick the form you want. This should be a Webform that uses data from the Record where you’re adding the button. For this example, I’ve created a simple test Webform, but the dropdown will show any Webforms you’ve already made.
You can apply as many Restrictions for the button to appear as you want, for this example we wont need them.
Next, go to the Webform Set Fields section. This is where you decide what data will be filled in automatically.
For each row the 'Field' dropdown will display all the Fields your Webform already has
In the Set From dropdown, you can choose between two options:
- Triggering Record: This sets the Value to match any of the the record’s existing data for the selected Field (In this example, set within the Contact App, all records include First Name and Last Name fields for creating new ones. We recommend matching the selections in the Field dropdown with the Value dropdown to ensure consistency)
- Static Value: This lets you enter a custom Value for the Field, which is useful if you don’t want to use the data already in the record.
Now click 'Save' to apply.
Your new button should look like this on the Details Page of any Contact record:
When you click the button, a modal will appear at the top of your screen. This will give you the option to either copy the newly created URL or cancel the operation.
A new prompt will appear confirming that the URL has been successfully copied.
From here, simply open a new tab in your browser, paste the URL, and you’ll see the Fields in your Webform already filled out.
If you want to know more about Webforms, take a peek into this article.
Once you've saved your App Action it will be available in the App Actions tab.
_____________________________
3. Action Hint
This can be identical to the name of the action or you can provide more detail on what that action does. If you use this action as a button this text will act as the mouse over text.
4. Icon
You can search for an icon to add to your action to help identify it.
6. Appearance
You have three options
Default - Light grey colored button.
Primary - The button will have the main color of the selected theme.
Secondary - Light grey colored button.
6. Placement
List - Add the action to the options menu within the list view.
Detail Page - The buttons will show up on the top right corner of the detail page of any record.
Notification Card
Mobile - Enables the App Action on the mobile App.
Related - This is the related list that shows in the detailed view of any record within an app. In this example, I've created an Action in the 'Contacts" app and it shows up in the related list options menu of any other app where Contacts are referenced.
7. Role
Select the Roles that will have access to the App Action
Edit App Action
Select the App Action to modify and click the 'Edit' button. Make your changes and save once you are done.
Deactivate / Activate App Action
Select the App Action that you want to stop using and click the 'Deactivate' button. To start using it again, click the 'Show deactivated' checkbox to show all App Actions, select it and click the 'Activate' button.
Reorder App Actions
You can change the order in which the buttons appear on the detail page, just click the 'Reorder' button and drag and drop your App Actions in the desired order. Then just save your changes.
Automations
In order for the App Actions to do something, it is necessary to create an Automation for them. There are different types of Automations available, from the creation of new records or tasks to more elaborated ones, like those based on Custom Code. To learn more about Automations and how to create them, please visit the following tutorial:
Automations
Custom Code App Actions
Servis.ai allows you to easily set up powerful App Actions via Custom Code. When creating a new App Action select 'Custom Code' or 'Bulk' within the Type field to enable the custom code window below:
This code will now be editable and with a few simple modifications, you can create a robust App Action. Through this feature, you will empower your team to achieve seemingly complex flows with the simple click of a button.
Custom Code Examples
Share
Let’s create a custom App Action to make sharing easier. In this example, we’ll set up a 'Share' button that allows you to copy the link of a record directly from the List, Card, and Detail Page of the Contacts App.
This makes it simple for your team to share records directly from the Contacts App without extra steps.
How to set it up
1.Go to App Actions: Navigate to the App Actions page of your Contacts App and click Add New App Action.
2.Set Required Fields: Fill in the necessary fields, including the Placement field. For this example, select Detail Page, List, and Card to make the button appear in all these views.
3.Add Custom Code: Scroll to the Custom Code section, which is now editable. Enter the code provided for the ‘Share’ button, then click Save.
(function(record, context){
const {
appConfiguration: entity,
} = context;
const URL = `https://freeagent.network/${entity.name}/view/${record.id}`;
context.clientAPI
.copyToClipboard(URL)
.then(() => {
context.clientAPI.showSuccessMessage('Copied to Clipboard.');
});
}(record, context));
Add Docs
In this example, we’ll create a button that lets you select and store documents directly within the Detail Page of the Contact App. This is done using custom code and Input Parameters.
How to Set it Up
1.Go to App Actions: Open the App Actions tab in the Contact App’s Settings and fiil the fields as follows:
2.Add Input Parameters: In the Input Parameters section, set it up like this:
•Name the property ‘documents.’
•Set the type to ‘File - Multi Select’ so the button allows selecting multiple files at once.
3.Add Custom Code: Scroll to the Custom Code section, paste the provided code, and click Save.
(fu(function(record, context) {
const {
appConfiguration: entity,
inputVariables: params,
} = context;
context.clientAPI.updateEntity({
id: record.id,
entity: entity.name,
field_values: {
documents: params.documents,
},
});
}(record, context));
That’s it! You can now see your new button in action and start selecting and storing documents directly from the Detail Page of Contact App.
Refer to our most popular use case to see a sample of custom code and how to modify the parameters: Publish Via PDF Template
If you want to know more about API properties, take a look to this article.