# Provision Wizard

Here you can view/configure provision wizards for your organization's website.

### Provision Wizard

{{< staticImage "ux/ProvisionWizardAdmin/ProvisionWizardAdmin/wizardProvision.png" "Wizard provision" >}}

When editing an item from the listing, you will see the wizard with its previously entered data.

### Administrative data step

Here you must define administrative data for the provision wizard. This data will be used to identify the wizard in the system and the kind of resource that will be provisioned with this wizard.

* **Identifier**: Identifies the wizard in the system. Useful when you need to invoke the wizard programmatically.
* **Title**: Title of the wizard. This will be the visible part of the wizard in the system.
* **Icon**: Icon of the wizard. This will be the visible part of the wizard in the system.
* **Wizard Type**: Type of the wizard. This will be the visible part of the wizard in the system.
* **Specific Type**: Specific type of the wizard. This will be the visible part of the wizard in the system.

### Fields (tabs) step

Here you can define tabs and fields for the provision wizard. Each tab will be a tab in the wizard and each field will be a field in the tab.

You will find the following type of tabs/steps:

* **Default tabs**: Tabs with predefined fields for the selected resource type (Only when not an Advanced Wizard)
* **Custom tabs**: Tabs with custom fields/form for the selected resource type.

Custom tabs have their own fields:

* **Name**: Name of the tab
* **Description**: Description of the tab

Below you have to select how to configure the layout of the fields within this tab. You have 3 options:

* **Fields selection**: a combo field will be displayed in final wizard with a list of all fields of this specific type. Select the fields you want to display.

* **Preselected fields**: You can preselect some fields with default values. These fields will be displayed in final wizard with the preselected values.

* **Custom form**: A fully customized form using vanjs will be displayed in final wizard. See [Custom Form Tab](./customformtab/) for more information.

### Default values step

Here you can define default values for the operation that will be executed within this custom view (Only when not an Advanced Wizard)

### Previous validations step

In this step you can write a script to validate the data introduced in the previous steps before the final action is executed. 

Note that in Advanced Wizards you have to perform the final action here because there is no default provision action as in other provision wizards.

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 validate the introduced data.

Callback must be called in order to validate the introduced data and has these params:

- **result**: (boolean) determines if the execution can continue. If false, the execution will stop and the messages will be shown to the user.
- **messages**: (array<string>) messages to be shown in the execution log.

Example:

```javascript
async function (entityData,callback) { 
    // YOUR CODE HERE WITHOUT FUNCTION DECLARATION
    
    // Example of validation:
    let validationResult = true;
    let messages = [];
    if (entityData["name"] === "") {
        validationResult = false;
        messages.push("Name is required");
    }
    callback(validationResult, messages);
}
```

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

### Post execution step

In this step you can write a script to perform the final action of the wizard after the completion of the previous actions. If previous validations returned *false* this step would have never been executed.

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

* **entityData** contains the data of the entity in json format.
* **callback** is a function that must be called to indicate the end of the execution.

Callback must be called in order to validate the introduced data and has these params:

- **result**: (boolean) indicates the result of the execution. If false, the execution will be marked as failed and the messages will be shown to the user.
- **messages**: (array<string>) messages to be shown in the execution log.

Example:

```javascript
async function (entityData,callback) { 
    // YOUR CODE HERE WITHOUT FUNCTION DECLARATION
    
    // Example:
    let executionResult = true;
    let messages = [];
    if (entityData["name"] === "") {
        executionResult = false;
        messages.push("Name is required");
    }
    callback(executionResult, messages);
}
```

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

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

---