June 2022

Connections - New UI

A new UI has been developed for connections. Following are the new UIs and implementations:

Connections home page:

  • When opening the connections homepage, previously, all the connections were shown as blocks with the headings, connection links and date. As per the new UI, the connections are shown as a list with name, the connection, and the date along with a kebab menu, which shows the following options:

    • View data

    • View configuration

    • Archive

    • Pin connection

  • A checkbox is added in front of every connection, to select individually or as a group and perform necessary actions.

  • New options have been added on top right corner, above the list, which are:

    • Search

    • Archive

    • Pin

Connection details:

  • On clicking the option called “View configuration” in the kebab menu of each connection, a screen as shown below shows up. It shows the list of data sources linked and the type of join.

  • On hovering over the icons, a tooltip appears. The tooltip shows the data source table connection in detail.

  • Also, if the data connection name is longer than 17 characters, it is truncated and mentioned with ellipsis points. On hovering over the name, a tooltip shows the full name.

Adding a new connection:

  • Click on “New Connection” on the top right corner of the homepage to create a new join. A slide screen appears on the right side of the page.

  • User has to choose the type of connection from the three options listed:

    • Left join

    • Inner join

    • Include all data

  • Near every option, tooltips are provided for the user to interact and understand what the options mean.

  • Next a left data source has to be selected. When a User template is chosen from the list, the following pop-up appears.

  • The left field is active immediately after the left data source. User need not define the right data source to activate the left-side field.

  • If field 2 is already entered, and after that if field 1 is changed, field 2 gets reset, and the join is no longer completed. However, data source 2 doesn’t get reset.

Adding new fields:

  • When a second field is added

    • Delete icon appears for each row

    • New row appears with the left field dropdown already open.

    • Save Button is inactive, until the user defines the new fields or deletes this row. In the dropdown, only fields that are not already connected to the selection in the right field will appear.

  • Clicking on “Save” goes to the next page - “Connection details”.

  • Clicking on “Cancel”, shows a pop-up asking to Save join - “Would you like to save the join before proceeding? ”.

  • A default name for the connections is “New Connection 01”, which will change to 02, 03, etc.

  • Then the user can click on “Create Connection” to finish creating a connection.


  • Changing left datasource:

    • Left field is reset

    • Right field is reset

    • Both the fields flash for the user to notice the change.

  • Changing right datasource:

    • Left field remains the same

    • Right field is reset

    • Right field flashes for the user to notice the change.

  • Changing left field:

    • Right field is reset

    • Right field flashes for the user to notice the change.

  • Changing right field:

    • Left field remains the same.

    • Right field flashes for the user to notice the change.


  • In the connection details, users have the option to “Add new join”. Clicking on the button, takes the user to “Create new join” screen.

  • The data source used there should be one of the two used in the last connection. The drop down list also shows only the user templates that have already been used in the previous join.


  • Once joins are created, users can still change their data source using the edit icon (pencil) in the connection details screen.

  • When selecting a new data source from the drop down list, if the existing one is a user template, other available user templates will be shown, so that users can change them if they want to.

  • If they select a new user template, then all the joins with that template will be reset.

  • Also, a pop-up appears, mentioning how many joins will be affected by changing the data source and asks the user's confirmation if they would like to proceed or cancel.

Once it is reset, all the joins with the previous data source will show “Select a data source” instead of the name in “Connection details” screen.


  • Users can delete a join by clicking on the bin icon on the right of every join.

  • Also, a pop-up appears, mentioning how many joins will be affected by deleting the join and asking the user's confirmation if they would like to proceed or cancel.

  • The lower joins will not be deleted and the affected data source fields will be selected and “Save” button will be inactive.

  • Deleting a join when there’s only one connection:

    • When there’s only one connection, the pop-up shown states the action cannot be undone and asks for the user's confirmation.

Reset and Apply functions improvement

  • Previously, when a user tries to manage the list of items in Incentives and clicks on “Reset” or “Apply”, API calls were generated even when no changes were made.

  • Now, performance improvements have been done, in order to avoid unnecessary API calls.

  • The page gets reloaded only when any changes are made in managing the columns and when “Reset” or “Apply” buttons are pressed.

Metrics rearrangement

  • Under any program, the admin is allowed to set the theme of the app. In the same page, a new tab, namely - Targets for Metrics - has been added in order to customize the visibility and rearrange the metrics, for the end user, on their app. On clicking on “More”, options to uncheck or check the visibility of the metric is displayed.

  • In order to rearrange the order, a dropdown menu is provided beside every metric, which when altered, reflects itself, for the end user. Once done, the admin needs to click on “Update” and then “Save” to get them reflected on the app.

Badges UX improvement

  • Under the Customization tab, if the user wishes to disable a particular badge, then, it abruptly got disabled and got reflected in the active programs, without prior information to the admin. Hence, to keep the user informed of the consequences of disabling a badge, a new pop-up has been introduced.

Bulk upload scroll bar UX

  • After importing user data, via .csv file, mapping is performed. However, previously, the horizontal scroll bar below the names, couldn’t be moved smoothly and only at certain positions.

  • This made it difficult to perform proper mapping of the columns. Hence, the new horizontal scroll bar has been replaced that can smoothly move, thus enabling the user to perform mapping of columns more easily and quickly.

Contains and NOT Contains Function

  • For creating new conditions, metrics need to be created using functions. New functions, namely - “contain” and “not contain” have been added to the list. This can be used to verify if a group ‘contains’ a particular alpha-numeric that we mention as a part of the condition.

Tamil language support in app

The compass app is now available in Tamil language along with existing English and Hindi. User can prefer the language of preference before logging in.

Documents shared with you - hidden

The “Documents shared with you” tab has been removed from the profile page in the compass app.

UI fix

The issue of occurrence of ‘/100’ under the achievement and task section, under programs, in the compass app, was observed to be breaking. The bug has been fixed..

Last updated