Tray Embedded / Advanced Topics / Custom JS / Best Practices

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. In the example below "Showing/ hiding slots based on dependencies" (link to example) you can see this in action.

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

If your syntax is correct and you're still encountering issues, you can utilise the console.log function in the code in order to check that arguments you've referenced or variables you've defined are valid (https://developer.mozilla.org/en-US/docs/Web/API/Console/log).