Apache Superset Userview Menu Plugin

Introduction

The Apache Superset Userview Menu plugin lets you integrate Apache Superset dashboards into a Joget DX 8 Userview Menu. You can choose to embed the dashboard as either public or protected. Customization options are available to control the display before rendering the dashboard.

This plugin is created using the Superset Embedded SDK, enabling the embedding of Superset dashboards within Joget DX.

The plugin's source code and JAR are available in the JogetOSS repository on GitHub.

Plugin information

• Plugin Available in the Bundle: Apache Superset Userview Menu
• Compatibility: This plugin is compatible with Joget DX 8.

Get started

Prerequisites

Before you begin, ensure you have the following prerequisites:

• Docker installed on your system
• Basic familiarity with Docker Compose
• Familiarity with Apache Superset

Follow the link to set up Apache Superset using Docker: Installing Superset using Docker Compose.

If you prefer to set up Apache Superset using methods other than Docker, see the official Installation and Configuration documentation.

Where to get the plugin

You can obtain the plugin from the Download Plugin and Source Code.

How to install

1. Install Docker Engine and Docker Compose.
2. Clone the Superset GitHub repository:
   

   git clone https://github.com/apache/superset.git

3. Launch Superset through Docker Compose:

   • Enter the superset folder:
     

     cd superset

   • Run in development mode using the following code:

     docker compose up

   • You will see the Superset container running in Docker.
     

   • Log in to Superset:

     • After the containers are initialized, access Superset at http://localhost:8088/.
     • Use the default credentials:
       • Username: admin
       • Password: admin
         
         
         

First steps to get started in Apache superset (Debugging)

1. If you can't build the Docker image:
   See the Docker startup on Apple Silicon.
   If you want to clear everything and start afresh, delete the container and the image using the following code. Also, check for unused volumes and manually delete them from the docker if necessary.
   

   docker-compose down && docker image prune -a
   docker builder prune

2. If you are unable to log in:
   
   

   • Manually set up the username and password using the command:
     

     docker-compose exec superset bash docker/docker-init.sh

3. Try to open the dashboard in incognito mode to check if it is indeed set as public. If access to the dashboard is denied in incognito mode, take the following action:
   
   
   • Add the necessary permissions, as shown in the Configure All Dashboard to be Public section to allow access.
4.  If you can open the dashboard incognito but can't see the dashboard in Joget.
   
   
   • Follow the instructions on Disabling Talisman. This information was compiled from the Stack Overflow page "Problem with Superset dashboard embedding in web app".
5. If the public dashboard is working in Joget but the protected dashboard is not working.
   
   
   • There might be a problem regarding the CSRF session token issue. Below is the Joget tomcat log.
     
     Try following the Disabling CSRF protection. 

How to use the plugin

How to Install and use the plugin

1.  In Joget, go to UI Builder. Under the Marketplace section, drag the Apache Superset Userview Menu into the UI.
   
2. Fill in the plugin configuration properties.
   For different dashboard types, see the information below: Public Dashboard and Protected Dashboard.

Public dashboard

1. For public dashboards, follow Configure All Dashboard to be Public or Configure Specific Dashboard to be Public to configure the Public role. Ensure you can see your dashboard in incognito mode (without logging into superset). Copy the URL.
   
2. Paste the URL in the Dashboard URL for the Public Dashboard Type.
   
3. Save and run in UI. You will be able to see the Apache Superset Public Dashboard.
   

Protected dashboard

1. For protected dashboards, you can use an admin user for the Superset Username and Password to save the hassle of creating a new user. If you wish to create a user with limited permissions, see Configure Superset User Role.
2. To use embed mode, ensure you see Configure Roles for Superset Dashboard Embedded Mode to have the necessary Guest Role permissions.
3. Obtain the dashboard embed ID after you have done the steps in Retrieve Superset Dashboard Embed ID.
   
   
4. Paste the embed ID in the Dashboard Embed ID. Save and run the UI.
   
   
5. Save and run in UI. You will be able to see the Apache Superset Protected Dashboard.
   
   

How to connect Joget data to superset

1. In Superset, go to Database Connections if you have not linked your Joget database to Superset.
   
2. Go to +Database on the top right to add your Joget database connection.
   
   
3. Connect your database. For this demo, I use MySQL as the database.
   
   
4. Fill in the details. Use host.docker.internal as the host if you are running Superset in docker. See connect superset to PostgreSQL in a docker container - The port is closed.
5. After the database is connected, click Create Dataset.
   
   
6. Click the database you connected earlier on the Create New Dataset page.
7. If you have a database table in mind, you can skip this step. If not, create a form and CRUD in Joget and enter some records for the list.
   
8. In the Create new Dataset page, select the table created.
9. Click Create Dataset and Create Chart.
   
   
10. On the Create New Chart page, select the chart you want. For this demo, you should use the Bar Chart.
    
11. Modify the chart according to your needs and click Save.
    
    
12. Add a chart name and add the chart to a dashboard so that we can copy the link to Joget later.
    
    
13. Click the three dots in the upper right-hand corner and select Share > Copy permalink to the clipboard to copy the link.
    
    
14. Paste the link in the Dashboard URL for Public. You can also copy the embed value to the Protected dashboard, as shown in the Protected Dashboard.
    
    
15. Now, you can see the dashboard with Joget data shown in Superset.
    

Configure apache superset userview menu properties

Fields to configure: 

• Label: Menu label (mandatory field).
• Menu ID: Unique ID for the menu element.
• Dashboard Type: Type of dashboard shown to the user:
  
  • Public
  • Protected
• Dashboard URL: Full URL for public dashboards.
  This field is visible when the Dashboard Type is public.
  Example: http://localhost:8088/superset/dashboard/5/ (Assuming your Apache Superset is running on default http://localhost:8088/).
• Apache Superset URL: Defines the domain running Apache Superset.
  This field is visible when Dashboard Type is protected.
  Example: http://localhost:8088 (Assuming your Apache Superset is running on default http://localhost:8088/)
• Superset Username: Superset username is used to create the guest token. See Configure Superset User Role.  
  This field is visible when the Dashboard Type is protected. 
   If you do not want to create a new user, use the Admin role.
• Superset Password: Superset user password used to create the guest token. 
  This field is visible when Dashboard Type is protected.
• Dashboard Embed ID: Embed ID retrieved from Superset dashboard. See Retrieve Superset Dashboard Embed ID.
  When using this embedded mode, please refer to Configure Roles for Superset Dashboard Embedded Mode to ensure you have the necessary roles to enable embedded mode.
  This field is visible when the Dashboard Type is protected.
• Show Title/Tabs/Chart Controls/Filters: Options to show or hide these elements. 
  
  • No
  • Yes
  This option is visible when the Dashboard Type is protected.

Expected outcome

You should be able to display an Apache Superset dashboard in the Joget Userview Menu.

Related documentation

• Installing Superset using Docker Compose
• Superset Embedded SDK
• Security Configurations

Download plugin and source code

• Visit https://github.com/jogetoss/superset-menu for the plugin's source code.
• You can find the latest release at https://github.com/jogetoss/superset-menu/releases.
• Upload the plugin to your Joget by going to Settings > Manage Plugins > Upload Plugin as admin.