Notes and Best Practices

Notes

Copy

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.

Check out this example here on how you can achieve this.

Best Practices

Copy

Show LOADING status when rendering new JSON schema for better UX

Copy

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"

Use conditions to select a specific slot

Copy

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:

1
tray.on('CONFIG_SLOT_MOUNT', async ({
2
    event,
3
    previousWizardState
4
}) => {
5
    //If the event triggering slot is not the validation slot, return undefined
6
    if (event.data.externalId !== "external_validation_slot") return;
7
    else {
8
        //do something....
9
    }
10
});

Debugging your code

Copy

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) to verify syntax before implementing in the code editor.

If your syntax is correct and you are still encountering issues, you can utilise the console.log function in the code in order to verify whether the arguments you've referenced or variables you've defined are valid.