# Async API + React HTML Components ## What's this? The iframe API gives users access to pre-existing sandbox API endpoints **without** the need for message handling. We've exposed a set of asynchronous functions that can be awaited, this ensures that HTML components can be more deterministic as a result is guaranteed. Buzzy handles the message handling, making your HTML code snippets simpler! This feature is current **opt-in** and you must enable it through the HTML field settings under "**Enable Async API**". This page focuses on Async API behavior that is specific to Code Widgets. For shared row semantics such as metadata fields, linked-table structures, and `embeddingRowID`, use the REST API as the canonical source: * [Row Metadata and Relationships](/rest-api/buzzy-rest-api/rest-api/microapp-data-operations/row-metadata-and-relationships.md) * [microappdata](/rest-api/buzzy-rest-api/rest-api/microapp-data-operations/microappdata.md) * [microappdata/row](/rest-api/buzzy-rest-api/rest-api/microapp-data-operations/microappdata-row.md) Async API reads also follow Buzzy server-side row access, field access, and [Private Data](/the-building-blocks/datatables-fields-and-data/private-data.md) rules. If a Code Widget fetches rows or child file/image records, the returned values are shaped for the current user before the widget receives them. ## Script Placement {% hint style="warning" %} **Warning** You must place the `
``` ### Result With some data table rows, the above example provides the following output in Buzzy:\\
## Advanced Examples ### Example 1: Course Enrollment with File/Image Copying This example demonstrates how to create a course enrollment system that: 1. Creates a copy of a course template for a user 2. Copies all associated questionnaires, questions, and options 3. Handles file and image copying between templates and user instances 4. Uses navigation to guide the user through the process ```javascript Do Course with Images and Files
``` This example demonstrates several key features: * Using `getChildItemsByField` to fetch file and image attachments * Using `createMicroappChild` to copy attachments to new rows * Using `navigate` to guide users through the enrollment process * Handling complex data relationships and maintaining referential integrity ### Example 2: Course Unenrollment with Cleanup This example shows how to properly remove a course and all its associated data, maintaining referential integrity: ```javascript Manage Courses
``` This example demonstrates: * Proper cleanup of nested data structures * Using `navigate` to show processing and completion states * Maintaining referential integrity during deletion * Error handling and user feedback ## Limitations The current iteration of the new API is still under development. There are a number of key issue yet to be resolved: * [ ] Extensive error handling * [ ] Asynchronous call timeouts --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.buzzy.buzz/the-building-blocks/code-widget-custom-code/new-async-api-+-react-html-components.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.