# Notes and Best Practices

Notes and best practices for using Tray Embedded custom js

## Notes

1. To render anything on the config wizard using custom JS you will have to do it through a config slot. For example, if you want to validate the user enters for a slot in the config wizard, you would need one more slot which can validate your first slot and render an error.
   ![custom js : data validation : workflow config property](https://tray.ai/documentation/images/platform/embedded/advanced-features/custom-js/best-practices/3PtHy4y7fZadGNpz7zW92j_customjs_validation_workflow.png)
   Check out this example [here](https://tray.io/documentation/embedded/advanced-topics/custom-js/examples/#4---validating-the-auth-or-input-data) on how you can achieve this.

## Best Practices

### Show LOADING status when rendering new JSON schema for better UX

If you have a slot which has dependencies on other slots on the same screen, we suggest executing the following sequence of states when listening to changes in the dependent slots:

1. Set the slot status to "LOADING", set the value to undefined . If the field is required, this will prevent the user from progressing further through the wizard. The loading status will show the user that the slot state is being changed.
2. Use the CONFIG\_SLOT\_STATUS\_CHANGED event to listen for the slot changing status to "LOADING". In this event you can now execute the logic for fetching the new slot state based on the new value of the dependent slot. You can see this in action in the example below - "[Showing/ hiding slots based on dependencies](https://tray.io/documentation/embedded/advanced-topics/custom-js/examples/#3---showing--hiding-slots-based-on-dependencies)"

### Use conditions to select a specific slot

If you have implemented custom JS code on multiple slots, it's best to select the slot using a conditional statement (IF statement). Here is a code block:

```json
tray.on('CONFIG_SLOT_MOUNT', async (\{
    event,
    previousWizardState
\}) => {
    //If the event triggering slot is not the validation slot, return undefined
    if (event.data.externalId !== "external_validation_slot") return;
    else {
        //do something....
    }
});
```

### Debugging your code

You can preview the behaviour of any code you write in the solution editor as soon as it auto-saves. If there are any errors in your code, these will be surfaced in the console log of your web browser. However, it isn't always easy to determine where the issue is in your code from the console log message.
We recommend passing your code through an external linter (ex. [ESLint](https://eslint.org/)) to verify syntax before implementing in the code editor.
![eslint linterCustomJs](https://tray.ai/documentation/images/platform/embedded/advanced-features/custom-js/best-practices/4VcNhxWsJMEfAL88hQmuqq_eslint_linterCustomJs.png)
If your syntax is correct and you are still encountering issues, you can utilise the [console.log](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) function in the code in order to verify whether the arguments you've referenced or variables you've defined are valid.
![debugCustomJs](https://tray.ai/documentation/images/platform/embedded/advanced-features/custom-js/best-practices/1YtaQW6rFDc4dwBwSTJJ6i_debugCustomJs.png)