Skip to main content

UI Issues

This section covers problems with the Mango web user interface, including dashboard rendering failures, blank dropdowns, chart display issues, and browser compatibility problems. UI issues are often the most visible to users but frequently have straightforward solutions.

Common UI Issues​

  • Page Dropdown Is Blank -- The page list dropdown in the Dashboard Designer or Edit Pages view shows no entries. This is a known issue that can be resolved by restoring the page list from the audit trail.

  • Charts Not Displaying Correctly -- Troubleshoot charts showing no data, wrong time ranges, auto-scale issues, rollup mismatches, and rendering problems in Mango dashboards and the data point details page.

General UI Troubleshooting​

Clear Browser Cache​

Many UI issues are caused by stale cached resources in the browser, especially after a Mango upgrade. Before investigating further:

  1. Open your browser's developer tools (F12 or Ctrl+Shift+J).
  2. Right-click the browser's reload button and select "Empty cache and hard reload."
  3. Alternatively, clear the browser cache from the browser settings.

If the issue persists after clearing the cache, try accessing Mango in a private/incognito browser window to rule out cached resources or browser extensions as the cause.

Clear the Mango Work Directory​

Mango caches compiled web resources in the <MA_HOME>/work/ directory. If these cached files become corrupted or outdated:

  1. Stop Mango.
  2. Delete the entire work directory.
  3. Start Mango.

The work directory will be rebuilt automatically on the next startup. Pages may load slightly slower on the first access.

Check Browser Compatibility​

Mango supports the latest versions of Chrome and Firefox, and also supports Safari and Edge. Internet Explorer is not supported. If you experience UI issues, verify you are using a supported browser version by checking the browser's "About" page.

Check the Browser Console for Errors​

Many UI issues produce JavaScript errors visible in the browser console:

  1. Open developer tools (F12 or Ctrl+Shift+J in Chrome).
  2. Switch to the Console tab.
  3. Refresh the page.
  4. Look for red error messages.

Common JavaScript errors and their meanings:

  • $injector:modulerr: A required AngularJS module failed to load. This is often caused by corrupted UI settings or an incompatible mangoUI module version.
  • TypeError: Cannot read property of undefined: A UI component is trying to access data that does not exist, possibly due to permissions or a missing data source.
  • 404 Not Found on resource requests: Static assets are missing, which may indicate a failed module installation or corrupted work directory.

Check User Permissions​

If specific UI pages or components appear empty or inaccessible for a particular user, the issue may be permissions-related. Navigate to Administration > Users and verify that the user account has the appropriate roles and permissions for the data they are trying to view. Data source read permissions, data point read permissions, and page-level permissions can all affect what is displayed in the UI.

Recover from Bad UI Settings​

If a change to the mangoUI-settings JSON in the JSON Store has broken the entire UI, you can recover without access to the main interface:

  1. Navigate directly to the legacy login page at /login.htm (Mango 3.x).
  2. Log in and go to the SQL Console at /sqlConsole.shtm.
  3. Execute: DELETE FROM jsonData WHERE xid = 'mangoUI-settings'
  4. Restart Mango. The default UI settings will be restored.

For Mango 4.x and later where the legacy UI is not available, use an external database client to connect to the Mango database directly and run the same SQL command.