Tangerine Custom Dashboard for Tangerine Teach

Data Managers can create custom dashboards in Tangerine's web interface. These dashboards can be used to display data from multiple forms in a single view. This is useful for monitoring data collection progress, or for displaying data in a way that is more useful than the default form views.

This repository contains an example custom dashboard for Tangerine Teach that uses Tangerine APIs to pull data from MySQL and display it in the web interface using LitElement.

Local Development

Development uses Tangerine Preview, which is a local development environment for Tangerine.

Set Up App Config

Copy the file client/app-config.defaults.json to client/app-config.json and update the values.

Get Test Data

To test the dashboard, you will need to have some test data in your MySQL database. Update the loadTestData() function in editor/components/test-data.js to load data example json data from your MySQL database.

Install Dependencies and Start Tangerine Preview

For Linux and macOS:

npm install
npm start

For Windows:

npm install
npm start-windows

The development app will be available at http://localhost:8080/custom-app. Note: This is note the default home url set in app-config.json. You will need to navigate to this url to see the custom dashboard.

Deployment to Tangerine

To deploy the custom dashboard to Tangerine, you will need to copy the files from editor/ to the content set directory in the Tangerine Group you are working with on the server. Once the files are in place on the server, restarting Tangerine with ./start.sh will make the dashboard available in the web interface under Data > Dashboard.