# Custom Form Tab

The code is encapsulated in a function that receives as parameters: entityData, callback

* **entityData** contains the data of the entity in json format.
This can contain a fully flattened entity object or a simple key-value object depending on the type of wizard (provisioning or advanced).

* **callback** is a function that must be called in order to paint the vanjs form created (useful when using promises or async code).

Function must return a vanjs element or a function that returns a vanjs element if no callback is provided.

Example:

```javascript
async function (entityData, callback) { 
    // YOUR CODE HERE WITHOUT FUNCTION DECLARATION
    
    const { div } = van.tags;

    return div("Hello Form");
}
```

{{% ux-widget-code-utils %}}

### Functions and Variables

**onDataUpdate(callback)**: callback to be called when data is updated from other steps. Callback receives all the data introduced in other steps as parameter.

**onStepEnter(callback)**: callback to be called when entering the step. Use it to control when the step is entered.

**setModelData(boolean[, data])**: Use it to (in)validate the form and send the data to other tabs.

**alert**: alert navigator method

**van**: A vanjs instance (https://vanjs.org/)

**vanui**: A vanui instance (https://vanjs.org/)

**echarts**: Echarts instance (https://echarts.apache.org/)

**ecstat**: Ecstat instance (https://github.com/ecomfe/echarts-stat?tab=readme-ov-file#api-reference)

**openWidget** -> (widgetId[, entityKey, title, extraConf]) -> Opens the selected widget in a modal panel

**openDashboard** -> (workspaceId, dashboardId, newPage) -> Opens the selected dashboard in selected workspace

**openEntityDashboard** -> (entityIdentifier[, organization[user if empty], resourceType['entity.device' if empty] , newPage]) -> Opens the entity's temporary dashboard

**openWizard** -> (wizardId[, wizardData, isEdit]) -> Opens the selected wizard in a modal panel. A list of available wizards will be available to use directly.

### Examples

{{% children sort="weight" depth="10" %}}

---