---
id: container-configuration
title: Container Configuration
---

The **Container Configuration Editor** is a development tool that enables Miniapps to access and trigger functions defined within the Superapp. Through this editor, developers can integrate Miniapps with Superapp functions, define application behaviors, and simulate these functions in the development environment using mock data support.

## How to Add Container Configuration to Your Application?

You can click the **Add New** button in the navigation menu on the left side of the page and select the **Container Configuration** option from the **UI Settings** dropdown in the menu that appears. Alternatively, if a folder has been added to the navigation menu, you can click the **+** button next to that **folder** and access the **Container Configuration** option from the **UI Settings** dropdown in the resulting menu.


## How to Define a Function ?

You can navigate to the function creation screen by clicking the **ADD NEW** button in the **Container Configuration**.

The **function creation screen** includes two tabs:
**Function Detail**: Used to **define the function’ structure and parameters**.
**Mock**: Used to **generate mock data** for the function.

### How to Add Function Details

- Fill in the **Function Name** field.
- If the function has a **return value**, **activate** the Is there a **"Return Value?" switch**.
- Select the **return type** from the **Return Type dropdown**.
If the **return type** is **Object**:
- The **Object Content** field becomes **enabled**, and the **object value must be entered** in this field.
If the **Object Content** field is **enabled** but left **empty**:
- If you are **creating** the function for the **first time**, an **empty object {} will be set by default**.

#### How to Add Function Parameters
- Click the **ADD NEW** button at the **top right** of the **Input Parameters table**.

In the new row, enter:
- Parameter name
- Parameter type
- (If applicable) Object content

#### How to Delete Function Parameters
The **parameter** can be **deleted** by clicking the **delete icon** located on the **right side** of the corresponding **row** in the **Input Parameters table**.

### How to Add Mock Data

This tab allows you to generate mock data for the function defined in the **Function Detail** tab.
- After defining the function structure, switch to the Mock tab.
- There are two buttons available: **Dynamic and Static**.
- Using the **Dynamic** button, you create a **function-based mock data**.
Example Data:
- Using the **Static** button, you create **mock data in JSON format**.
Example Data:

**Note**: If an invalid return type or **incorrect mock data** is entered, an **error message** will be displayed on the screen. While this **error is unresolved**, attempting to generate mock data will **not create a new mock**.

## How to Use Defined Functions?

You can use the **functions** you **defined** in the **Container Configuration Editor** in the **UI Editor's code editor**. All configured functions will appear as intellisense under the **"quick.container"** object.

quick.container.yourFunction();