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.
Additional resources
Commentaires
https://aka.ms/ContentUserFeedback.
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultezEnvoyer et afficher des commentaires pour