1 of 12

Common UI Docs

Events & Notifications UI Docs

Employee Flow - Events

Screen Flow

User Permissions

Employee users with user roles including “EMPLOYEE ADMIN" or “EMPLOYEE" have access to the event actions.

Event CRUD API Curls

Search / Inbox API

curl 'https://qa.digit.org/egov-user-event/v1/events/_search?tenantId=pb.amritsar&eventTypes=EVENTSONGROUND&limit=10&offset=0&_=1639367436102' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/employee/engagement/event/inbox' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"RequestInfo":{"apiId":"Rainmaker"}}' \
  --compressed

Create API

curl 'https://qa.digit.org/egov-user-event/v1/events/_create?_=1639367625957' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/employee/engagement/event/response' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"events":[{"source":"WEBAPP","eventType":"EVENTSONGROUND","tenantId":"pb.amritsar","description":"Be safe bro","name":"HEY","eventcategory":"PUBLICHEALTH","eventDetails":{"fromDate":1639453920000,"toDate":1640505480000,"fromTime":"09:22","toTime":"13:28","address":"moon ","organizer":"SOMEONE","fees":"1000","longitude":74.8978579,"latitude":31.6160638}}],"RequestInfo":{"apiId":"Rainmaker","authToken":"df875063-9b4e-4fc7-bad6-f80844a6b4ed"}}' \
  --compressed

Update API

curl 'https://qa.digit.org/egov-user-event/v1/events/_update?_=1639367667570' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/employee/engagement/event/response?update=true' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"events":[{"tenantId":"pb.amritsar","id":"671036f4-671e-41be-b04d-ed330e545747","referenceId":null,"eventType":"EVENTSONGROUND","eventCategory":"PUBLICHEALTH","name":"HEY","description":"Be safe bro","status":"ACTIVE","source":"WEBAPP","postedBy":"d0710c4c-728a-446d-bc7e-d4614efe1463","recepient":null,"actions":null,"eventDetails":{"id":"ce296daf-0409-4f6d-a24c-406eeafcbbd9","eventId":"671036f4-671e-41be-b04d-ed330e545747","organizer":"SOMEONE","fromDate":1639453920000,"toDate":1640505480000,"latitude":31.6160638,"longitude":74.8978579,"address":"moon ","documents":null,"fees":"200","fromTime":"09:22","toTime":"13:28"},"auditDetails":{"createdBy":"d0710c4c-728a-446d-bc7e-d4614efe1463","createdTime":1639367627529,"lastModifiedBy":"d0710c4c-728a-446d-bc7e-d4614efe1463","lastModifiedTime":1639367627529},"recepientEventMap":null,"generateCounterEvent":null,"internallyUpdted":null,"user":{"id":12074,"userName":"QAADMIN","salutation":null,"name":"FSM Admin","gender":"MALE","mobileNumber":"9966999999","emailId":null,"altContactNumber":null,"pan":null,"aadhaarNumber":null,"permanentAddress":null,"permanentCity":null,"permanentPinCode":null,"correspondenceAddress":null,"correspondenceCity":null,"correspondencePinCode":null,"alternatemobilenumber":null,"active":true,"locale":null,"type":"EMPLOYEE","accountLocked":false,"accountLockedDate":0,"fatherOrHusbandName":"Test","relationship":"FATHER","signature":null,"bloodGroup":null,"photo":null,"identificationMark":null,"createdBy":12011,"lastModifiedBy":1,"tenantId":"pb.amritsar","roles":[{"code":"FSM_VIEW_EMP","name":"FSM Employee Application Viewer","tenantId":"pb.amritsar"},{"code":"FSM_ADMIN","name":"FSM Administrator","tenantId":"pb.amritsar"},{"code":"EMPLOYEE","name":"Employee","tenantId":"pb.amritsar"},{"code":"FSM_REPORT_VIEWER","name":"FSM Employee Report Viewer","tenantId":"pb.amritsar"},{"code":"STADMIN","name":"State Administrator","tenantId":"pb.amritsar"},{"code":"EMPLOYEE ADMIN","name":null,"tenantId":"pb.amritsar"},{"code":"FSM_DASHBOARD_VIEWER","name":"FSM Employee Dashboard Viewer","tenantId":"pb.amritsar"}],"uuid":"d0710c4c-728a-446d-bc7e-d4614efe1463","createdDate":"15-02-2021 14:41:32","lastModifiedDate":"06-04-2021 14:58:43","dob":"1990-09-09","pwdExpiryDate":"16-05-2021 14:41:32"},"eventcategory":"PUBLICHEALTH"}],"RequestInfo":{"apiId":"Rainmaker","authToken":"df875063-9b4e-4fc7-bad6-f80844a6b4ed"}}' \
  --compressed

Employee Flow - Messages

Screen Flow

User Permissions

Employee users with user roles including “EMPLOYEE ADMIN" or “EMPLOYEE" have access to the event actions.

Events API Curls

Search Inbox API

curl 'https://qa.digit.org/egov-user-event/v1/events/_search?tenantId=pb.amritsar&status=ACTIVE,INACTIVE&eventTypes=BROADCAST&limit=10&offset=0&_=1639369326123' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/employee/engagement/messages/inbox' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"RequestInfo":{"apiId":"Rainmaker"}}' \
  --compressed

Create API

curl 'https://qa.digit.org/egov-user-event/v1/events/_create?_=1639369667873' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/employee/engagement/messages/response' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"events":[{"recepient":null,"source":"WEBAPP","eventType":"BROADCAST","tenantId":"pb.amritsar","description":"contect","name":"Message","eventDetails":{"documents":[],"fromDate":1639506540000,"toDate":1640284140000}}],"RequestInfo":{"apiId":"Rainmaker","authToken":"df875063-9b4e-4fc7-bad6-f80844a6b4ed"}}' \
  --compressed

Update API

curl 'https://qa.digit.org/egov-user-event/v1/events/_update?_=1639369794800' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/employee/engagement/messages/response?update=true' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"events":[{"tenantId":"pb.amritsar","id":"4d888e56-be4d-45a0-b05c-f7939f544213","referenceId":null,"eventType":"BROADCAST","eventCategory":null,"name":"Message","description":"content","status":"ACTIVE","source":"WEBAPP","postedBy":"d0710c4c-728a-446d-bc7e-d4614efe1463","recepient":null,"actions":null,"eventDetails":{"documents":[],"fromDate":1639440000000,"toDate":1640217600000},"auditDetails":{"createdBy":"d0710c4c-728a-446d-bc7e-d4614efe1463","createdTime":1639369670687,"lastModifiedBy":"d0710c4c-728a-446d-bc7e-d4614efe1463","lastModifiedTime":1639369670687},"recepientEventMap":null,"generateCounterEvent":null,"internallyUpdted":null,"user":{"id":12074,"userName":"QAADMIN","salutation":null,"name":"FSM Admin","gender":"MALE","mobileNumber":"9966999999","emailId":null,"altContactNumber":null,"pan":null,"aadhaarNumber":null,"permanentAddress":null,"permanentCity":null,"permanentPinCode":null,"correspondenceAddress":null,"correspondenceCity":null,"correspondencePinCode":null,"alternatemobilenumber":null,"active":true,"locale":null,"type":"EMPLOYEE","accountLocked":false,"accountLockedDate":0,"fatherOrHusbandName":"Test","relationship":"FATHER","signature":null,"bloodGroup":null,"photo":null,"identificationMark":null,"createdBy":12011,"lastModifiedBy":1,"tenantId":"pb.amritsar","roles":[{"code":"FSM_VIEW_EMP","name":"FSM Employee Application Viewer","tenantId":"pb.amritsar"},{"code":"FSM_ADMIN","name":"FSM Administrator","tenantId":"pb.amritsar"},{"code":"EMPLOYEE","name":"Employee","tenantId":"pb.amritsar"},{"code":"FSM_REPORT_VIEWER","name":"FSM Employee Report Viewer","tenantId":"pb.amritsar"},{"code":"STADMIN","name":"State Administrator","tenantId":"pb.amritsar"},{"code":"EMPLOYEE ADMIN","name":null,"tenantId":"pb.amritsar"},{"code":"FSM_DASHBOARD_VIEWER","name":"FSM Employee Dashboard Viewer","tenantId":"pb.amritsar"}],"uuid":"d0710c4c-728a-446d-bc7e-d4614efe1463","createdDate":"15-02-2021 14:41:32","lastModifiedDate":"06-04-2021 14:58:43","dob":"1990-09-09","pwdExpiryDate":"16-05-2021 14:41:32"}}],"RequestInfo":{"apiId":"Rainmaker","authToken":"df875063-9b4e-4fc7-bad6-f80844a6b4ed"}}' \
  --compressed

Citizen Flow

Notifications and the citizen home screen are part of the core module.

Screen flow for the citizen home

Notifications

The notifications screen is a part of the user engagement module and shows all the active events, messages and broadcast messages.

For Event notifications, we are using OnGroundEventCard component
For What's new notification, we are using WhatsNewCard component
For Broadcast messages, we are using BroadcastWhatsNewCard component

All these screens are accessible without logging in.

cURL for notification API -

curl 'https://qa.digit.org/egov-user-event/v1/events/_search?tenantId=pb.amritsar&_=1639123598630' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/citizen/engagement/notifications' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"RequestInfo":{"apiId":"Rainmaker","authToken":null}}' \
  --compressed

However, after logging in notification count becomes available to use and the system displays the unread notification count as a ticker on the notification icon.

Notification count cURL -

curl 'https://qa.digit.org/egov-user-event/v1/events/notifications/_count?tenantId=pb.amritsar&_=1639124556487' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/citizen' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"RequestInfo":{"apiId":"Rainmaker","authToken":"307ae48a-d684-4bf3-b109-9d2d2926e81b"}}' \
  --compressed

Notification count update cURL -

curl 'https://qa.digit.org/egov-user-event/v1/events/lat/_update?tenantId=pb.amritsar&_=1639124605545' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/citizen/engagement/notifications' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"RequestInfo":{"apiId":"Rainmaker","authToken":"307ae48a-d684-4bf3-b109-9d2d2926e81b"}}' \
  --compressed

Events

Events are also a part of the Engagement module. Only active events are displayed on the events list page.

Events API cURL -

curl 'https://qa.digit.org/egov-user-event/v1/events/_search?tenantId=pb.amritsar&eventTypes=EVENTSONGROUND&_=1639134376115' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'DNT: 1' \
  -H 'Content-Type: application/json;charset=UTF-8' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36' \
  -H 'sec-ch-ua-platform: "Windows"' \
  -H 'Origin: https://qa.digit.org' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://qa.digit.org/digit-ui/citizen/engagement/events/details/b29e70c7-284f-489e-982e-67806245779c' \
  -H 'Accept-Language: en-US,en;q=0.9,hi;q=0.8' \
  --data-raw '{"RequestInfo":{"apiId":"Rainmaker","authToken":"307ae48a-d684-4bf3-b109-9d2d2926e81b"}}' \
  --compressed

Navigation Between Old & New UI

Problem Statement

Since not all modules are in the new UI, and the user has access to modules in both the new and old UI, navigating between them creates confusion. So framework needs to be designed to avoid this confusion.

Solution

The default landing page will be that of the new UI home screen for a user

When the user is on a module that is in old UI (eg: Fire NOC) and clicks on the {{Home}} screen button from the sidebar, then the screen should be navigated to the New UI Home screen
When the user is on a module that is in the new UI, then clicking on the {{Home}} button should redirect to the new UI home screen.
There will be no changes in the side panel and it will remain the same for the respective new UI or old UI
This change will be applicable to both citizen-side and employee-side interfaces

Technical Implementation:

As per the Requirement, the changes were made in both old and new UIs such that always Home/ Landing screen will be New UI Landing Screen. (This is applicable in both citizen and employee Screens )
So the old UI Home screen will be always redirected to New UI.
To access the Old UI Modules, you can access them through Sidebar navigation links. Check this link to add a sidebar link for navigation Citizen Home screen card | How cards are rendered along with links and icons: and Mdms UI configurations
To configure any sidebar link to navigate to Old UI citizen as follow

 {
      "id": 2367,
      "name": "FirenocCitizen",
      "url": "digit-ui-card",
      "displayName": "FireNoc Search",
      "orderNumber": 1,
      "parentModule": "FireNoc",
      "enabled": true,
      "serviceCode": "",
      "code": "",
      "path": "",
      "navigationURL": "/citizen/fire-noc/home",
      "leftIcon": "FirenocIcon",
      "rightIcon": "",
      "queryParams": "",
      "sidebar": "digit-ui-links",
      "sidebarURL": "/citizen/fire-noc/home"
    }

and employees as follows:

 {
      "id": 1800,
      "name": "FIRE-NOC",
      "url": "url",
      "displayName": "Search",
      "orderNumber": 3,
      "parentModule": "",
      "enabled": true,
      "serviceCode": "FIRE-NOC",
      "code": "null",
      "navigationURL": "fire-noc/search",
      "path": "FIRE-NOC.Search",
      "leftIcon": "social:people"
    },

The following commit has to be added

User Profile

Objective: The User Profile page is used to view or update user details like name, gender, email, phone number, and profile pic.

A user profile is created when the user registers the application for the first time.

Types of User Profiles

Citizen: A citizen is a basic user who uses the application to perform basic tasks including
- creating applications, properties, etc
- viewing all applications, properties, etc
- payments
Employee: An employee is a user linked to the organization and is more privileged than the citizen and can perform the following tasks
- creating applications, properties, etc
- viewing all applications, properties, etc
- payments
- and many more

Technical Implementations

Technical Implementations of the user profile code link: https://github.com/egovernments/DIGIT-Dev/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Home/UserProfile.js

API Call Role Action Mapping

Citizen Profile

User manual for common UI/UX revamp for citizen screens

Overview

The User Profile page for citizens can be accessed by clicking on the Edit Profile icon in the app drawer. Click on the hamburger menu in the top bar on the app to open the app drawer.

Screen Details

Functionalities - User Profile Page

Upload or remove profile picture

A user can upload or remove their profile picture by clicking on the camera icon available over the profile thumbnail.
Clicking on the camera icon displays the bottom drawer. Select the upload photo from the gallery or remove the profile picture option as required.

The user can upload a new photo or remove the old photo.

Update user details

Users can update their details by editing the required text fields on the User Profile page.
Values entered by the user must be valid.

Update user password (Only for employee users)

Users can also change the current password by providing
- current password
- new password
- confirm password (must be same as new password entered)

Save changes

All changes are updated when the Save button is clicked.
Saving changes validates the fields and the status is shown in the toast messages.

User details are updated successfully.

Employee Profile

User manual for common UI/UX revamp for employee screens

Overview

The user profile page allows users to manage user information. Users can add their own profile picture and can update their password from this page. The User Profile page provides common functionalities for both citizens and employees with some differences.

Screen Details

Employees can access the User Profile page by clicking on the Edit Profile icon at the top app bar.

Below are the fields employees can edit as per the given validation.

Employee City Change

User manual for common UI/UX revamp for employee city change screens

Overview

Employees can change cities by clicking on the dropdown available in the top right corner of the screen.

Screen Details

Changing the city allows employees to perform all actions such as generating demand and collections etc in the new ULB/City.

Update Number & Invalid Number

Objective: To facilitate users update invalid or inactive mobile numbers in the owner records.

Update Mobile Number

Reminds ULB users about the invalid mobile numbers existing in the owner's record and facilitates updating those in an easy way.
Enables ULB users to update the mobile numbers in a request from the property owner(s).
Enables property owner(s) to update the mobile number in their record by way of login into the system.

Users can update the mobile number from the application details page by clicking on the assign button at the workflow level.

This opens a pop-up window where users can enter the respective details required to update the mobile number.

Click on the Update button once the details are entered.

Following actions take place on successful updates -

Mobile number is updated in the owner’s record and a success message is displayed.
View Property page is refreshed to reflect the updated mobile number.
SMS is sent to both (old and new) mobile numbers intimating about the change in the mobile number in the owner’s record.

The following actions take place on failure to update -

Failure message is displayed.
User remains on the View Property page.

Invalid Mobile Number

Property is searched to collect the tax and the search result is displayed.

Clicking on the Collect Tax button displays an alert dialogue box communicating the following details:

Mobile number associated with owner(s) detail is incorrect. Update the correct mobile number to receive future notifications. - Text message.
Continue to Collect- action button
Update Mobile Number - action button

Continue to Collect - The user is taken to the collection page and the collection process is completed.

Update Mobile Number - Users must provide the below details to update the mobile number:

Owner’s name - displays the owner name.
Current mobile number - displays the existing mobile number of the owner.
New mobile number - a text box to enter the new mobile number. The mobile number validations are applicable as per the DIGIT standard mobile number validation.
Documents required - provision to upload necessary documents as attachments. This is optional and includes -
- Duly Signed Change Request Form
- Identity Proof (Aadhar Card, Voter ID)
  - Document Name - Drop-down with the list of documents considered as identity proof.
  - Choose File - File picker to upload the file.
Update - action button to update the mobile no.

The remaining process is the same as in the application details edit page.

Technical Implementation Details

Update and invalid mobile number code link: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/pt/src/components/search/PropertySearchResults.js

Popup component code link: https://github.com/egovernments/DIGIT-Dev/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/pt/src/pages/citizen/MyProperties/updateNumber.js

Assignment code:

const UpdatePropertyNumberComponent = Digit?.ComponentRegistryService?.getComponent("EmployeeUpdateOwnerNumber");

A mobile number is invalid if it doesn't match the pattern defined in the MDMS config file or if the number of digits is invalid.

MDMS Config

 "MdmsCriteria": {
        "tenantId": "pb",
        "moduleDetails": [
            {
                "moduleName": "PropertyTax",
                "masterDetails": [
                    {
                        "name": "UpdateNumber"
                    }
                ]
            }
        ]
    }

Response:

invalidNumber: "9999999999"
invalidPattern: "^[6789][0-9]{9}$"
skipEnabled: true
warningEnabled: true
documents:[]

MDMS

The MDMS is used to check any invalid number. This data is present in the technical implementation part.

Localization

The localization keys for update mobile number and invalid number are added to the ‘rainmaker-pt’ locale module. Any changes, updates or addition of any new localization key are done in the same locale module.

Role Actions Mapping

Troubleshoot Using Browser Network Tab

Objective: To provide users with additional information on the error messages on UI.

Network Tab

Generic error messages may appear on the UI while using the application and performing some action. For instance, Something went wrong / Please try again or contact support.

Despite trying again, the same error message pops back up. What else could go wrong? The Network tab provides users with more information about the error.

The steps below provide detailed information on using the Network Tab.

Step 1: Inspect the Page On the page with the error message, right-click anywhere on the page. Click on Inspect in the dropdown menu.

Step 2: Select the Network Tab The browser’s network tab offers a way to look directly at what’s happening behind the scenes of a page. It offers not only the type of data being requested and passed as we interact with the page, but also provides information on any actions that are failing. After selecting Inspect, a new window pops up. Click on the Network tab on this window. Select the XHR filter option. This hides everything except API requests.

Step 3: Refresh the Page Click the Refresh button on your browser. Since the Network tab displays the requests that occur after the tab has been opened, refreshing the page enables users to view the error as it occurs. The various API request details appear on the page as it reloads.

Step 4: Re-create the Error The error needs to be re-created to understand what is causing it. This is done by repeating the steps that led to the error. For instance, clicking on Update re-creates the error and the panel pinpoints the request that is causing the issue.

Step 5: Find the Red-Line Item in the Network Panel The line item appearing in red is the error. The status reflected on the image above is 404, which is the error code for a bad request. If the status is 200, it means the code is OK and there is nothing wrong with these requests.

Step 6: Preview the Error Details Click on the red-line item to see the error details. Clicking on that line item opens a new frame on the right-hand side. The tabs in this frame include Headers, Preview, Response, Cookies, and Timing. Click on Preview since this contains the basic information.

Step 7: View the Error Message

There is no specific message in some cases. In this instance, the following message is displayed:

Thanks to the network panel, it allows users to diagnose the issue and apply a fix.