"ticket_top_navigation" app fails to open

App Platform
, ,
3

For those experiencing this problem, the template code generated by the FDK creates buggy code. The problem is due to the use of ‘async’ in the scripts tag and the omission of the script that defines the app client. Here is the index.html that resolves the problem:

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Custom App</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script defer type="module" src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.esm.js"></script>
    <script defer nomodule src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.js"></script>
    <script defer src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>
    <script defer src="{{{appclient}}}"></script>
    <script defer src="scripts/app.js"></script>
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
  </head>
</html>

Note that the FDK omits:

<script defer src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>

Note also that I removed ‘async’ and used ‘defer’. ‘defer’ preserves script order whereas ‘async’ does not. The following post was a hint as well as a github example.

I also followed the github example and omitted ‘async’ and ‘defer’ from the script tags in the modal view.

Now when I click the “ticket_top_navigation” button the modal dialog opens without fail (albeit with expected delays due to requests required for populating fields in the dialog).