Use event-based data actions
This article describes how to use event-based data actions.
In some scenarios, you don't want a data action to run when a page is first loaded. Instead, you want it to run dynamically in response to some event on the client. For example, a product can be added to a customer's cart in response to a button click, search results can be shown in response to a change in the text input, or banner text can be updated in response to a time-based event.
Example
In the following example, a very basic module loads product information when a user clicks a button.
The following code shows a react component that contains a button that users can click.
// product-button.tsx
import * as React from 'react';
/**
* ProductAddToCart component
*/
class ProductButton extends React.Component {
public render(): JSX.Element {
return (
<div>
<button onClick={_getProductInfo}>Get Product Info!</button>
</div>
);
}
// On-Click handler function
private _getProductInfo = () => {
console.log('We need to get the product!');
}
}
export default ProductButton;
Currently, this component just logs a message to the console when the button is clicked. To replace that behavior with the data action, you must do three things:
- Import the data action and its input class.
- Create an input for the data action.
- Invoke the data action.
The following code shows an updated react component that makes a call for a product when the button is clicked.
// product-button.tsx
import * as React from 'react';
// Import our data action and input class
// NOTE: Generally the data action is the DEFAULT export of the file it was written in.
import getProductDataAction, { ProductInput } from '../../actions/get-product';
/**
* ProductAddToCart component
*/
class ProductButton extends React.Component {
public render(): JSX.Element {
return (
<div>
<button onClick={_getProductInfo}>Get Product Info!</button>
</div>
);
}
// On-click handler
private _getProductInfo = async() => {
// Create the input for our data-action
const actionInput = new ProductInput('12345');
// Run and await the result of the data action
const product = await getProductDataAction(actionInput, {callerContext: this.props.context.actionContext});
// Log the result to the console
console.log(product);
}
}
export default ProductButton;
Note
This example uses a hard-coded productId value. However, it can be updated so that the productId value is read from text input or the module's configuration properties.