# 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](https://docs.buzzy.buzz/rest-api/buzzy-rest-api/rest-api/microapp-data-operations/row-metadata-and-relationships) * [microappdata](https://docs.buzzy.buzz/rest-api/buzzy-rest-api/rest-api/microapp-data-operations/microappdata) * [microappdata/row](https://docs.buzzy.buzz/rest-api/buzzy-rest-api/rest-api/microapp-data-operations/microappdata-row) ## 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