Skip to main content

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.

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();