ApiButton

A api button control

Import

import { ApiButton } from "@schukai/monster/source/components/form/api-button.mjs";

Source

View source code

Package

@schukai/monster

Since

3.32.0

click me!

Introduction

The ApiButton is an innovative web component from the Monster library designed to enhance user interfaces by providing dynamic API-driven buttons. This component is versatile, perfect for scenarios where actions need to be triggered based on the data received from APIs, improving real-time interaction and functionality in web applications.

Key Features

Dynamic API integration: Seamlessly integrates with backend services to fetch data and dynamically generate actionable buttons based on API responses.
Customizable templates: Allows extensive customization of button labels, actions, and URLs through configurable templates, enabling developers to tailor the component to specific needs.
Interactive popper element: Inherits the powerful features of the ActionButton, including a popper element that provides additional interactive capabilities.
Robust error handling: Implements comprehensive error management to ensure smooth operation even when API calls fail, maintaining a reliable user experience.
Advanced configuration options: Offers detailed configuration settings for API requests, including custom headers, fetch methods, and pre- and post-call callbacks for enhanced operational control.

Improving the user experience

The ApiButton enhances the user experience by making web interfaces more interactive and responsive. By dynamically generating buttons based on live data, it ensures that users have access to real-time functionalities, thus increasing engagement and efficiency in user interactions.

The component is designed to integrate smoothly with various web architectures, making it a valuable addition to any developer’s toolkit. Its functionality has been validated through extensive user testing, showing significant improvements in user engagement and satisfaction.

Efficiency in the development process

Integrating the ApiButton into web projects is streamlined and efficient. Its compatibility with modern web development standards ensures that it can be easily added to existing projects without significant rework. The component’s design focuses on ease of use and flexibility, greatly reducing the time and effort required to implement complex API-driven functionalities.

API Button

Javascript

/** this example does not use an extra script **/

HTML

/** this example does not use an extra html file **/

Stylesheet

/** no additional stylesheet is defined **/

Component Design

This component is built using the Shadow DOM, which ensures that its internal structure and styles are encapsulated. By using a shadow root, the component's internal layout, logic, and behavior remain protected from external influences, such as conflicting CSS or JavaScript.

Shadow DOM and Accessibility

Shadow DOM encapsulation restricts direct access to the component's internal elements. This ensures a consistent and predictable design and behavior. However, specific styling opportunities are provided through exported parts to allow customization while maintaining encapsulation. The component's accessibility features include support for keyboard interaction and clear semantic structure for assistive technologies.

Customizing Through Exported Parts

The component exposes certain exported parts that developers can style directly using CSS. These parts allow customization of the button and related UI elements without affecting the overall structure of the component.

Available Part Attributes

container: Represents the container wrapping all button and action-related elements.
button: Represents the API button itself, which can be styled for visual appearance.
popper: Represents the container for any additional action elements dynamically generated.

Below is an example of how to use CSS part attributes to customize the ApiButton component.


monster-api-button::part(container) {
    background-color: #f8f9fa;
    padding: 8px;
    border-radius: 4px;
    display: inline-flex;
    gap: 5px;
}

monster-api-button::part(button) {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

Explanation of the Example

monster-api-button::part(container): Styles the button container with padding, background, and spacing.
monster-api-button::part(button): Styles the primary API button for appearance and interactivity.
monster-api-button::part(button):hover: Adds a hover effect for better user feedback.
monster-api-button::part(button):disabled: Adjusts the appearance of the button in a disabled state.

Accessibility

Accessibility is integrated into the component design, ensuring it can be used effectively with keyboard navigation and assistive technologies. The component manages focus states and provides accessible feedback when interacting with dynamically fetched buttons or API responses.

HTML Structure

<monster-api-button></monster-api-button>

JavaScript Initialization

const element = document.createElement('monster-api-button');
document.body.appendChild(element);

Exported

ApiButton

Derived from

ActionButton

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the ActionButton.

Option

Type

Default

Description

mapping

object

undefined

The mapping object.

mapping.selector

string

undefined

The selector to find the buttons in the response.

mapping.labelSelector

string

undefined

The selector to find the label for the button.

mapping.labelTemplate

string

undefined

The template to create the label for the button.

mapping.apiTemplate

string

undefined

The template to create the api for the button.

mapping.urlTemplate

string

undefined

The template to create the url for the button.

mapping.filter

function

undefined

The filter function to filter the buttons.

url

string

undefined

The url to fetch the data.

api

object

undefined

The api options.

api.fetch

object

undefined

The fetch options.

api.body

string

undefined

The body template.

callbacks

object

undefined

The callbacks object.

callbacks.beforeApi

function

undefined

The beforeApi callback.

fetch

object

undefined

The fetch options.

fetch.redirect

string

undefined

The redirect option.

fetch.method

string

undefined

The method option.

fetch.mode

string

undefined

The mode option.

fetch.credentials

string

undefined

The credentials option.

fetch.headers

object

undefined

The headers option.

fetch.headers.accept

string

undefined

The acceptance option.

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the ActionButton.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the ActionButton.

Behavioral methods

fetch(url)

Parameters

url

Returns

{Promise}

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{ApiButton}

Other methods

importButtons(data)

Parameters

data {array|object|map|set}: data

Returns

{ApiButton}

Throws

{Error} map is not iterable
{Error} missing label configuration

Import buttons from a map.

Events

The component emits the following events:

monster-button-set
monster-api-button-click
monster-api-button-successful
monster-api-button-failed

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.