diff --git a/CHANGELOG.md b/CHANGELOG.md index d446ac719..c819d3c3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,37 @@ # What's new +## v3.31.2 + +__General Updates__ + +- Add APIs to access MySQL tables +Data Managers who have been granted the `can_access_mysql_api` permission can now access Tangerine MySQL data through the web interface. This is useful for building reporting dashboards within Tangerine or through other tools like PowerBI, R, Stata or Tableau. + +See the [Custom Dashboard Example](docs/editor/custom-dashboard.md) for instructions. + +- Scoring: Add scoring percent and denominator values +When Tangerine form scoring is turned on, each section will now output the score, percent, and denominator values. The values will be output in csv and mysql data as: + - `sectionName_score` + - `sectionName_percent` + - `sectionName_denominator` + +For existing projects who want this functionality, there are scripts availabel to add the values to already uploaded data. + +- Add server scripts: New server administration scripts + +__Fixes__ +- After adding a user to a group, navigate back to the user table +- Run 'npm install' during APK and PWA builds to ensure installation of dependencies and build for custom code + +__Libs and Dependencies__ +- NA + +__Server upgrade instructions__ + +See the [Server Upgrade Insturctions](https://docs.tangerinecentral.org/system-administrator/upgrade-instructions). + +*Special Instructions for this release:* N/A + ## v3.31.1 __General Updates__ diff --git a/docs/editor/custom-dashboard.md b/docs/editor/custom-dashboard.md new file mode 100644 index 000000000..9217e7381 --- /dev/null +++ b/docs/editor/custom-dashboard.md @@ -0,0 +1,55 @@ +# Custom Dashboard in Tangerine's Web Interface + +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. + +__Example Dashboards__ + +![Tangerine Teach](https://github.com/Tangerine-Community/tangerine-teach-editor-dashboard-example) + + +## Accessing MySQL Data in a Custom Dashboard + +The code below provides and example of how to run the Tangerine APIs to get MySQL data in a custom dashboard. This code is written in JavaScript and uses the `fetch` API to make the request to the Tangerine server. The code also uses the `localStorage` to get the token from the browser's local storage which only works from within the Tangerine web interface for users who have permission. + +```javascript +try { + const appConfig = await window.T.appConfig.getAppConfig(); + this.serverUrl = appConfig.serverUrl; + this.groupId = appConfig.groupId + this.formId = appConfig.formId + } catch (error) { + console.error('Error: missing serverUrl in appConfig', error); + } + + /* + * The shape of the response is: + * results[0]: rows + * results[1]: headers + */ + let results = []; + try { + const token = localStorage.getItem('token'); + const headers = { + 'Access-Control-Allow-Credentials': 'true', + 'authorization': token, + 'Content-Type': 'application/json; charset=utf-8' + }; + + const api = `mysql-api/get-table?groupId=${this.groupId}&formId=${this.formId}`; + const response = await fetch(`${this.serverUrl}${api}`, { + method: 'GET', + headers: headers + }); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + results = await response.json(); + } catch (error) { + // if this is localhost, we are in development mode and we can load the csv file directly + if (window.location.hostname === 'localhost') { + results = loadTestData(); + } else { + console.error('Error fetching the mysql data:', error); + } + } +``` \ No newline at end of file