Dataloader Dialog

The dataloader dialog allows users to load, preview, and embed structured data into templates within the Uhuu editor.

Parameters

The editDialog method is configured with the following options for dataloader editing:

• type (enum, required: "dataloader"): Sets the type as "dataloader" to trigger the Dataloader Dialog for loading and embedding structured data.
• path (string, required): Specifies the path within the payload where the Dataloader Dialog response will be stored. In this example, "dataloader_response" holds the loaded data.

Example Usage

Below is a sample React component setup that uses The dataloader dialog to load and display data. In this example, a chart is rendered using the data loaded by the dialog.

export default ({ payload }) => {
    const { dataloader_response } = payload;
    
    return (
        <div onClick={() => $uhuu.editDialog({ path: "dataloader_response", type: "dataloader" })}>
          <div className="chart-container">
              <Chart data={dataloader_response?.data} />
          </div>
        </div>
      );
}

This dialog is particularly useful for importing CSV datasets and generating dynamic content visualizations.

Example Response

The Dataloader Dialog’s response might look like this in the payload:

{
  "dataloader_response": {
    "data": [
      { "label": "January", "value": 100 },
      { "label": "February", "value": 200 },
      { "label": "March", "value": 150 }
    ]
  }
}

The loaded data can then be displayed in various formats, such as charts or tables, within the template.