[SOLVED] How to write custom javascript in superset which is installed in docker?

How to write custom javascript in superset which is installed in docker?

I have installed superset in docker and I want to embed a simple Javascript code in superset. There is templates/superset/basic.html file and it's code looks like:


    <!DOCTYPE html>
    {% import 'appbuilder/general/lib.html' as lib %}
    {% from 'superset/partials/asset_bundle.html' import css_bundle, js_bundle with context %}
    
    {% set favicons = appbuilder.app.config['FAVICONS'] %}
    <html>
      <head>
       
        <title>
          {% block title %}
            {% if title %}
              {{ title }}
            {% elif appbuilder and appbuilder.app_name %}
              {{ appbuilder.app_name }}
            {% endif %}
          {% endblock %}
        </title>
        {% block head_meta %}{% endblock %}
        {% block head_css %}
          {% for favicon in favicons %}
            <link
              rel="{{favicon.rel if favicon.rel else "icon"}}"
              type="{{favicon.type if favicon.type else "image/png"}}"
              {% if favicon.sizes %}sizes={{favicon.sizes}}{% endif %}
              href="{{ "" if favicon.href.startswith("http") else assets_prefix }}{{favicon.href}}"
            >
          {% endfor %}
          <link rel="stylesheet" type="text/css" href="{{ assets_prefix }}/static/appbuilder/css/flags/flags16.css" />
          <link rel="stylesheet" type="text/css" href="{{ assets_prefix }}/static/appbuilder/css/font-awesome.min.css">
    
          {{ css_bundle("theme") }}
    
          {% if entry %}
            {{ css_bundle(entry) }}
          {% endif %}
    
        {% endblock %}
    
        {{ js_bundle("theme") }}
    
       <!-- Start of HubSpot Embed Code -->
       
    <!-- End of HubSpot Embed Code -->
      </head>
    
        <input
          type="hidden"
          name="csrf_token"
          id="csrf_token"
          value="{{ csrf_token() if csrf_token else '' }}"
        >
      
    
      <body {% if standalone_mode %}class="standalone"{% endif %}>
        {% block navbar %}
          {% if not standalone_mode %}
            {% include 'appbuilder/navbar.html' %}
          {% endif %}
        {% endblock %}
    
        {% block body %}
          <div id="app" data-bootstrap="{{ bootstrap_data }}">
            <img src="{{ assets_prefix }}/static/assets/images/loading.gif" style="width: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)">
          </div>
        {% endblock %}
    
        <!-- Modal for misc messages / alerts  -->
        <div class="misc-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content" data-test="modal-content">
              <div class="modal-header" data-test="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-test="modal-header-close-button">
                  <span aria-hidden="true">&times;</span>
                </button>
                <h4 data-test="modal-title" class="modal-title"></h4>
              </div>
              <div data-test="modal-body" class="modal-body">
              </div>
              <div data-test="modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
    
        {% block tail_js %}
          {% if not standalone_mode %}
            {{ js_bundle('menu') }}
          {% endif %}
          {% if entry %}
            {{ js_bundle(entry) }}
          {% endif %}
          {% include "tail_js_custom_extra.html" %}
        {% endblock %}
      </body>
      <script type="text/javascript">
        alert("This alert box was called with the onload event");
      </script>
    </html>

The <html>....</html> all the code of the frontend is here , so I put my code here , but it is not working . The part I just added and wanted to check was:

       <script type="text/javascript">
            alert("This alert box was called with the onload event");
          </script>

But the alert event is not happening. In which file should I need to put the javascript code? Where can I write custom javascript in superset

Solution

How I got some customization going.

Put your code in a file say customize.js


window.sayHello = function(message) {
  alert(message);
}

import script in superset-frontend/src/views/App.tsx

import './customize.js';

call the function where you need it.
rebuild superset