How do I add a custom button at the team level?

In this article, we explain how you can insert custom buttons into the product interface at the team level, specifically in the application header or in the navigation bar on the left side of the screen. These buttons are very useful, for example, for custom document creation, but they can be used for different purposes.

With this feature, you can include custom buttons like the ones you could include with custom code, but in this case, you won't have to touch the application code.

Athento allows you to add two types of buttons at the team level.

• Link type: when clicked, the user is redirected to a specific link.
• Custom type: allows you to embed the HTML code that the user wants.

These buttons are added and configured from the advanced administration, in Action Buttons.

Create a new Action Button using the Add Action Button option.

Next, you must configure the following options:

• Target content type: Select the value "teams | team".

• Target object id: The ID of the team where you want these buttons to appear.

• Place: The location where the button will be displayed. At team level, the available options are:

  • Team – Sidebar: Displays the button in the sidebar.

  • Team – Header: Displays the button in the header (top bar), centered.

  • Team – Right header: Displays the button in the header, aligned to the right.

• Type: Select the type of button you want in the document view.

  • link: Adds a link that the user will be redirected to when clicking the button.

  • custom: Displays the HTML element configured in the button’s html attribute.

  • button: This option is not available at team level.

If the button type is Link, you must also configure the following attributes:

• Label: The helper text displayed when hovering over the button.

• Style: (in JSON format) The custom icon you want this button to display.

{"icon" : "fal fa-file-invoice"}

• Params: If it is a Link type button, the URL must be added here in JSON format.

If the button is a Custom type, you must configure this other attribute:

• Html: The element to be displayed represented by the HTML code to be rendered. For this functionality, it is possible to include tags from the Django template engine.

Related Articles

How do I create a custom button to create documents that requires mandatory information before creation?