ButtonTile Documentation

Overview

The ButtonTile component is an actionable UI element designed to perform various tasks upon user interaction. It is highly customizable and integrates seamlessly with a data platform, allowing users to trigger workflows, navigate between pages, open URLs, and execute scripts directly from the dashboard.

Purpose

The primary purpose of the ButtonTile is to enhance user interactivity within dashboards by providing access to actions that can be executed quickly and efficiently. Actions can range from simple URL openings to more complex operations, such as executing workflows or navigating to different dashboards.

Settings

Configuration Properties

• label

  • Input Type: String
  • Description: The text displayed on the button. If not provided, it defaults to 'Click Me'.
  • Default Value: 'Click Me'

• icon

  • Input Type: String
  • Description: The name of the icon to display alongside the label. It utilizes a predefined icon set but can support dynamically loaded icons.
  • Default Value: 'Play'

• actionType

  • Input Type: String
  • Description: Defines the type of action that the button will perform when clicked. Options include opening URLs, navigating to different pages, executing workflows, or doing nothing.
  • Default Value: 'none'

• actionConfig

  • Input Type: Object
  • Description: Contains specific configurations needed for the action type. For instance, it may require a URL, path, or workflow ID, depending on the action type chosen.
  • Default Value: {}

• variant

  • Input Type: String
  • Description: Determines the visual style of the button. Variants dictate colors and hover effects, allowing for differentiation based on importance or function. Options include 'primary', 'secondary', 'outline', 'ghost', 'success', 'warning', and 'danger'.
  • Default Value: 'primary'

• size

  • Input Type: String
  • Description: Defines the size of the button, affecting its padding, font size, and icon size for better visibility and usability. Available sizes are 'small', 'medium', and 'large'.
  • Default Value: 'medium'

• backgroundColor

  • Input Type: String
  • Description: Custom background color for the button. If provided, it overrides the default color according to the variant.
  • Default Value: ''

• buttonColor

  • Input Type: String
  • Description: Custom text color for the button, allowing for further styling and branding options.
  • Default Value: ''

• fullWidth

  • Input Type: Boolean
  • Description: Controls whether the button should take the full width of its parent container. This setting is useful for responsive designs.
  • Default Value: true

• borderRadius

  • Input Type: String
  • Description: Defines the roundness of the button's corners. Options include '0' for square corners, 'md' for moderately rounded, 'lg' for more rounded corners, and 'full' for pill-shaped buttons.
  • Default Value: undefined (uses default styles)

How it Works

When the ButtonTile component is rendered, it initializes several states, including loading status, last result, and the chosen icon. The component leverages routing to navigate between pages and supports asynchronous operations for actions that require API calls.

Upon clicking the button, the handleClick function is executed, which evaluates the actionType and performs the corresponding action based on the configuration provided. User feedback is provided through loading indicators and success/failure messages.

Handling Actions

1. openUrl: Opens a specified URL, either in a new tab or the current one.
2. navigate: Changes the current page based on the provided path.
3. openDashboard: Navigates to a specific dashboard by its ID.
4. newDashboard: Creates a new dashboard.
5. newWorkflow: Initiates the creation of a new workflow.
6. executeWorkflow: Executes a predefined workflow identified by its ID.
7. refreshDashboard: Refreshes the current dashboard or the entire page.
8. refreshTile: Reloads the data for the current tile.
9. generateAiSummary: Triggers an AI summary regimen for the tile.
10. custom: Allows for user-defined JavaScript execution, depending on future needs.

Data Expectations

The ButtonTile component expects the config prop to contain the necessary settings to render correctly and function as intended. Specifically, it anticipates configurations that define the button's label, action type, and any specific parameters associated with that action. If configurations are incomplete, the component will revert to default settings.

Use Cases & Examples

Use Cases

1. Dashboard Navigation: Users can navigate between different dashboards, enhancing workflows by allowing quick access to relevant data.

2. Workflow Execution: Automate processes through predefined workflows, facilitating background tasks and integrating smoothly with existing business operations.

3. AI Summary Generation: Users can generate AI-based summaries for visualized data, streamlining how information is compiled and communicated.

Example Configuration

Use Case: Dashboard Navigation

To create a ButtonTile that navigates users to a specific dashboard when clicked, the configuration could look as follows:

{
  "label": "Go to Sales Dashboard",
  "icon": "Home",
  "actionType": "openDashboard",
  "actionConfig": {
    "dashboardId": "sales-dashboard"
  },
  "variant": "primary",
  "size": "medium",
  "fullWidth": true,
  "backgroundColor": "#007BFF",
  "buttonColor": "#FFFFFF",
  "borderRadius": "md"
}

In this configuration:

• The button will be labeled "Go to Sales Dashboard" with a home icon.
• Clicking the button will redirect the user to the dashboard with ID sales-dashboard.
• It is styled as a primary button, medium-sized, filling its parent width, and features custom colors.

AI Integrations

The ButtonTile includes the capability to trigger AI-related actions, specifically the generation of summaries for specific tiles, enhancing the analytics capabilities of the platform.

Billing Impacts

There are no direct billing impacts related to the use of the ButtonTile itself, as it is a frontend component. However, actions such as executing workflows or generating AI summaries may incur costs based on API usage, data processing, or resource consumption as part of the broader Vantage platform’s billing policies. Ensure to consult the platform's pricing model for specifics related to these actions.