Surveys : Implementation

Survey Inbox

• This page lists all the created surveys in reverse-chronological order with latest created survey being at the top and first created one at the end. This table supports pagination and employees also specific the size of the list in each page.

• Inbox has search feature which helps employees to quickly find survey based on selected

ulb, document name and posted by fields.

• Inbox also has filter option where employees can filter document based on the Status of survey(ACTIVE/INACTIVE).
  
  
  

  Open

  

  Survey Inbox

  
  
  

API used

Technical Implementation Details:

The starting file for employee view of Citizen Surveys is :

https://github.com/egovernments/DIGIT-Dev/blob/RAIN-3431-5313/frontend/micro-ui/web/micro-ui-internals/packages/modules/engagement/src/pages/employee/CitizenSurveys/index.js

All the routing for the survey module for employee are defined here.

For calling the search API we have used a custom hook for code reuse. Below is a little snapshot of that:

All the hooks used in every module are defined here:

https://github.com/egovernments/DIGIT-Dev/tree/RAIN-3431-5313/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks

Create Survey

Employees can add new survey using the Add New Survey button, a form gets rendered which can be used to generate survey form based on the answer type expected from citizen. It has 5 answer types
SHORT_ANSWER_TYPE
LONG_ANSWER_TYPE
MULTIPLE_ANSWER_TYPE
CHECKBOX_ANSWER_TYPE
DATE_ANSWER_TYPE
TIME_ANSWER_TYPE
and survey form fields are rendered based on selected answer type from the drop down.

Refer screenshot below :

Open

API used

Technical Implementation Details:

Custom hook used to call the create API is useCreate. Below is a little snapshot :

Implementation details of the hook:

All the functionalities for creating a survey are defined here:

https://github.com/egovernments/DIGIT-Dev/blob/RAIN-3431-5313/frontend/micro-ui/web/micro-ui-internals/packages/modules/engagement/src/pages/employee/CitizenSurveys/NewSurvey.js

This is the response when survey creation is successful:

Survey Details Page

This page shows the complete information about the created survey. By clicking on the name of any survey employee gets navigated to the details page.

Here, employee can take action to edit, mark active, mark inactive or delete the survey altogether.

Edit Screen

API Used :

Mark as Active Pop up

API used :

Mark as Inactive Pop up

API Used :

Delete Survey Pop up

API Used :

All four of the above functionalities → Mark Active, Mark Inactive, Delete , Edit are defined in this file:

https://github.com/egovernments/DIGIT-Dev/blob/RAIN-3431-5313/frontend/micro-ui/web/micro-ui-internals/packages/modules/engagement/src/pages/employee/CitizenSurveys/SurveyDetails.js

And the hooks used for these functionalities are useUpdate for editing, marking active and marking inactive and useDelete for deleting a survey.

useUpdate:

useDelete:

Survey Results Page

This page shows the complete information about the responses submitted by citizens for a particular survey. By clicking on the statistics icon of any survey employee gets navigated to the results page.

Here, employee can view all the responses submitted by the users along with the email Ids and phone numbers of the users who have responded to that survey.

Responses are shown graphically for Multiple Choice and Checkbox type responses.

API Used :

Technical Implementation Details:

The link for the Survey Results view folder, all the components used are defined in this folder:

https://github.com/egovernments/DIGIT-Dev/tree/RAIN-3431-5313/frontend/micro-ui/web/micro-ui-internals/packages/modules/engagement/src/components/Surveys/ResultsView

These components are used in the results page:

https://github.com/egovernments/DIGIT-Dev/tree/RAIN-3431-5313/frontend/micro-ui/web/micro-ui-internals/packages/modules/pages/employee/CitizenSurveys/SurveyResults.js

For calling the APIs we have used custom hooks for code reuse. Below is a little code snippet of the custom hook used to call the results API:

Citizen Screens
Citizen can see all the active and inactive surveys in the Information & Updates section of the home page.
Here all the surveys are listed based on their status. Selecting any survey shows all the questions for that particular survey.

Citizen can fill the survey and submit their response only if survey is valid and has not already been responded by the same citizen account.

Citizen survey Form

Users can select any of the active surveys and start filling their responses. Once a form has been submitted users cannot modify their responses. Or submitting same survey form twice is not allowed.

API Used :

Localization :
Localization keys are added under the ‘rainmaker-common’ locale module. In future if any new labels are implemented in the Trade License (Citizen) that should also be pushed in the locale DB under rainmaker-tl locale module. Below is the example of few locale labels.

API Call Role Action mapping: