DIGIT Core
PlatformDomainsAcademyDesign SystemFeedback
2.9-LTS
2.9-LTS
  • 🖥️Platform
    • Overview
    • Why DIGIT?
    • Principles
    • Architecture
      • Service Architecture
      • Technology Architecture
        • Open Source Tools
      • Infrastructure Architecture
      • Deployment Architecture
    • API Specifications
      • Access Control
      • Boundary
      • Document Uploader
      • Encryption
      • File Store
      • ID Generation
      • Indexer
      • Localisation
      • Master Data Management
      • OTP
      • Payment Gateway
      • PDF Generation
      • URL Shortner
      • WhatsApp Chatbot
      • Workflow
    • Core Services
      • Access Control Services
      • Audit Service
        • Signed Audit Performance Testing Results
      • API Gateway
        • Configuring Gateway Rate Limiting
      • Boundary Service
        • Migrate Old Boundary Data - Steps
      • Email Notification Service
      • Encryption Service
        • Encryption Client Library
        • User Data Security Architecture
        • Guidelines for supporting User Privacy in a module
      • FileStore Service
      • ID Generation Service
      • Indexer Service
        • Indexer Configuration
      • Internal Gateway
      • Location
      • Localization Service
        • Configuring Localization
          • Setup Base Product Localisation
          • Configure SMS and Email
      • MDMS V2 (Master Data Management Service)
        • Adopt New MDMS - Steps
        • MDMS (Master Data Management Service)
          • Setting up Master Data
            • MDMS Overview
            • MDMS Rewritten
            • Configuring Tenants
            • Configuring Master Data
            • Adding New Master
            • State Level Vs City Level Master
        • MDMS Migration
      • OTP Service
      • Payment Gateway Service
      • PDF Generation Service
      • Persister Service
        • Persister Configuration
      • Service Request
      • SMS Notification Service
        • Setting Up SMS Gateway
          • Using The Generic GET & POST SMS Gateway Interface
      • User
        • User Session Management
      • User OTP Service
      • URL Shortening Service
      • Workflow
        • Setting Up Workflows
        • Configuring Workflows For An Entity
        • Workflow Auto Escalation
        • Migration To Workflow 2.0
      • Libraries
        • Tracer Library
        • Encryption Client
      • Accelerators
        • Inbox Service
    • DIGIT: How-Tos
      • SMS Template Approval Process
      • Notification Enhancement Based On Different Channel
    • Releases
      • DIGIT 2.9 LTS
        • Test Automation
        • Release Checklist
        • Service Build Updates
          • Hotfix
        • Test Cases
        • Automated DIGIT Deployment
        • Upgrade Guide: Transitioning DIGIT Modules to Spring Boot Version 3.2.2
        • Postgres Upgrade: Service Code Changes
        • Updating RDS Version in AWS
        • LTS DIGIT Migration - v2.8 To v2.9
        • Changelog
        • Backup PostgreSQL Database In AWS - Steps
    • Source Code
  • 📓Guides
    • Installation Guide
      • Infrastructure Setup
        • AWS
          • 1. Pre-requisites
          • 2. Setup AWS Account
          • 3. Provision Infrastructure
          • FAQ
        • Azure
          • 1. Azure Pre-requisites
          • 2. Understanding AKS
          • 3. Infra-as-code (Terraform)
        • SDC
          • 1. SDC Pre-requisites
          • 2. Infra-as-code (Kubespray)
          • CI/CD Setup On SDC
        • CI/CD Set Up
          • CI/CD Build Job Pipeline Setup
      • DIGIT Deployment
        • Full Deployment
          • Deploy DIGIT
            • Prepare Deployment Configuration
        • Full Deployment (Beta)
          • Creating New HelmChart
          • Prepare Helm Release Chart
      • Quick Setup (AWS)
    • Data Setup Guide
      • Bootstrap DIGIT
      • Productionize DIGIT
      • User Module
      • Localisation Module
      • Location Module
      • MDMS - V2
    • Design Guide
      • Model Requirements
      • Design Services
      • Design User Interface
      • Checklists
    • Developer Guide
      • Pre-requisites Training Resources
      • Backend Developer Guide
        • Section 0: Prep
          • Development Pre-requisites
          • Design Inputs
            • High Level Design
            • Low Level Design
          • Development Environment Setup
        • Section 1: Create Project
          • Generate Project Using API Specs
          • Create Database
          • Configure Application Properties
          • Import Core Models
          • Implement Repository Layer
          • Create Validation & Enrichment Layers
          • Implement Service Layer
          • Build The Web Layer
        • Section 2: Integrate Persister & Kafka
          • Add Kafka Configuration
          • Implement Kafka Producer & Consumer
          • Add Persister Configuration
          • Enable Signed Audit
        • Section 3: Integrate Microservices
          • Integrate IDGen Service
          • Integrate User Service
          • Add MDMS Configuration
          • Integrate MDMS Service
          • Add Workflow Configuration
          • Integrate Workflow Service
          • Integrate URL Shortener Service
        • Section 4: Integrate Billing & Payment
          • Custom Calculator Service
          • Integrate Calculator Service
          • Payment Back Update
        • Section 5: Other Advanced Integrations
          • Add Indexer Configuration
          • Certificate Generation
        • Section 6: Run Final Application
        • Section 7: Build & Deploy Instructions
        • FAQs
      • UI Developer Guide
        • DIGIT-UI
          • UI Components Standardisation
            • DIGIT UI Core React Components
            • DIGIT UI Core Flutter Components
              • Input Field
              • Radio
              • Toggle
              • Button
              • Dropdown
              • Checkbox
              • Toast
              • Info Card
            • DIGIT UI Components v0.2.0
              • Foundation
                • Typography
                • Colour Pallete
                • Spacer
              • Atom
                • Accordion
                • Button
                • Checkbox
        • DIGIT UI Development Pre-requisites
        • UI Configuration (DevOps)
        • Local Development Setup
        • Run Application
        • Build & Deploy
        • Pre-defined Screens In DIGIT-UI
          • Create Screen (FormComposer)
          • Inbox/Search Screen
          • Workflow Component
        • Create a New UI Module/Package
          • Project Structure
          • Install Dependency
          • Module.js
          • Import Required Components
          • Common Hooks
        • Employee Module Setup
          • Write Employee Module Code
          • Create Form - Create Screen
        • Citizen Module Setup
          • Sample screenshots
          • Citizen Landing Screen
          • Write Citizen Module Code
        • Customisation
          • Integrate External Web Application/UI With DIGIT UI
          • Utility - Pre-Process MDMS Configuration
          • CSS Customisation
          • Kibana Dashboard Integration With DSS Module
          • Login Page
        • Setup Monitoring Tools
        • Android Web View & How To Generate APK
        • FAQs
          • Troubleshoot Using Browser Network Tab
          • Debug Android App Using Chrome Browser
      • Flutter (Mobile App) UI Developer Guide
        • Introduction to Flutter
          • Flutter - Key Features
          • Flutter Architecture & Approach
          • Flutter Pre-Requisites
        • Setup Development Environment
          • Flutter Installation & Setup Guide
          • Setup Device Emulators/Simulators
          • Run Application
        • Build User Interfaces
          • Create Form Screen
        • Build Deploy & Publish
          • Build & Deploy Flutter Web Application
          • Generate Android APKs & App Bundles
          • Publishing App Bundle To Play Store
        • State Management With Provider & Bloc
          • Provider State Management
          • BloC State Management
        • Best Practices & Tips
        • Troubleshooting
    • Operations Guide
      • DIGIT - Infra Overview
      • Kubernetes
        • RBAC Management
        • Database Dump - Playground
      • Setup Jenkins - Docker way
      • GitOps
        • Git Client installation
        • GitHub organization creation
        • Adding new SSH key to it
        • GitHub repo creation
        • GitHub Team creation
        • Enabling Branch protection:
        • CODEOWNER Reviewers
        • Adding Users to the Git
        • Setting up an OAuth with GitHub
        • Fork (Fork the mdms,config repo with a tenant-specific branch)
      • Working with Kubernetes
        • Installation of Kubectl
      • Containerizing application using Docker
        • Creation of Dockerhub account
      • Infra Provisioning Using Terraform
        • Installation of Terraform
      • Customise Existing Terraform Templates
      • Cert-Manager
        • Obtaining SSL certificates with the help of cluster-issuer
      • Moving Docker Images
      • Pre and post deployment checklist
      • Multi-tenancy Setup
      • Availability
        • Infrastructure
        • Backbone services
          • Database
          • Kafka
          • Kafka Connect
          • Elastic search
            • Elastic Search Rolling Upgrade
            • ElasticSearch Direct Upgrade
        • Core services
        • DIGIT apps
        • DSS dashboard
      • Observability
        • ES-Curator - Clear Old Logs/indices
        • Monitoring
        • Environment Changes
        • Tracing
        • Jaeger Tracing Setup
        • Logging
        • eGov Monitoring & Alerting Setup
        • eGov Logging Setup
      • Performance
        • What to monitor?
          • Infrastructure
          • Backbone services
          • Core services
        • Identifying bottlenecks
        • Solutions
      • Handling errors
      • Security
      • Reliability and disaster recovery
      • Privacy
      • Skillsets/hiring
      • Incident management processes
      • Kafka Troubleshooting Guide
        • How to clean up Kafka logs
        • How to change or reset consumer offset in Kafka?
      • SRE Rituals
      • FAQs
        • I am unable to login to the citizen or employee portal. The UI shows a spinner.
        • My DSS dashboard is not reflecting accurate numbers? What can I do?
      • Deployment using helm
        • Helm Installation
        • Helm chart creation
        • Helm chart customization
      • How to Dump Elasticsearch Indexes
      • Deploy Nginx-Ingress-Controller
      • Deployment Job Pipeline Setup
      • OAuth2-Proxy Setup
      • Jira Ticket Creation
    • Implementation Guide
    • Security & Privacy Guide
      • Security & Privacy Guidelines For Product Developers
      • Security & Privacy Guidelines For Solution Implementing Agencies
      • Security & Privacy Guidelines For Program Owners
  • 🚀Accelerators
    • UI Frameworks
      • Service Build Updates
    • Integrations
      • Payment
      • Notification
      • Transaction
      • Verification
      • View
      • Calculation
    • Concepts
      • Deployment - Key Concepts
        • Security Practices
        • Readiness & Liveness
        • Resource Requests & Limits
        • Deploying DIGIT Services
        • Deployment Architecture
        • Routing Traffic
        • Backbone Deployment
    • API Playground
    • Sandbox
    • Checklists
      • API Checklist
      • Security Checklist
        • Security Guidelines Handbook
        • Security Flow - Exemplar
      • Performance Checklist
      • Deployment Checklist
    • Contribute
    • Discussion Board
    • Academy
    • Events
Powered by GitBook

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.

On this page
  • Overview
  • Steps
  • UI Implementation
  • Banner Image
  • Citizen Services Card/Information/Updates Props
  • WhatsApp Banner Image / Link To WhatsApp Bot
  • Citizen Home Screen Configuration
  • UI Implementation

Was this helpful?

  1. Guides
  2. Developer Guide
  3. UI Developer Guide
  4. Citizen Module Setup

Citizen Landing Screen

PreviousSample screenshotsNextWrite Citizen Module Code

Last updated 1 year ago

Was this helpful?

Overview

This page provides details about how the Banner image and Citizen Services Card are rendered.

Steps

UI Implementation

The link to banner images and the labels and links of citizen services on the citizen services card are defined in the below MDMS file.

Banner Image

For mobile and desktop we have different banner images link. We can change the images link on the below object

"appBannerDesktop":{
"code": "APP_BANNER_DESKTOP",
"name": "App Banner Desktop View",
"bannerUrl": "https://s3.ap-south-1.amazonaws.com/egov-qa-assets/app-banner-web.jpg", "enabled": true},
"appBannerMobile":{
"code": "APP_BANNER_MOBILE",
"name": "App Banner Mobile View",
"bannerUrl": "https://s3.ap-south-1.amazonaws.com/egov-qa-assets/app-banner-mobile.jpg", "enabled": true}

Citizen Services Card/Information/Updates Props

Here we have two objects citizenServicesCard and informationAndUpdatesCard. Both of them have sideOption object which is a link to View All page.

props object contains the objects that we want to show on these two cards.

Change the label of the cards and add the navigation URL for each prop. Click on the card redirects users to the respective screen.

"citizenServicesCard":{
"code": "HOME_CITIZEN_SERVICES_CARD",
"name": "Home Citizen services Card",
"enabled": true,
"headerLabel": "DASHBOARD_CITIZEN_SERVICES_LABEL",
"sideOption": {
"name": "DASHBOARD_VIEW_ALL_LABEL",
"enabled": true,
"navigationUrl": "/digit-ui/citizen/all-services" },
"props": [
{
"code": "CITIZEN_SERVICE_PGR",
"name": "Complaints",
"label": "ES_PGR_HEADER_COMPLAINT",
"enabled": true,
"navigationUrl": "/digit-ui/citizen/pgr-home"},]},

WhatsApp Banner Image / Link To WhatsApp Bot

Similar to Banner image, for WhatsApp Banner Image, we have two objects for mobile and desktop view. On click of the image it will redirect to WhatsApp bot. The redirection URL is defined in the navigation URL param.

"whatsAppBannerDesktop":{
"code": "WHATSAPP_BANNER_DESKTOP",
"name": "WhatsApp Banner Desktop View",
"bannerUrl": "https://s3.ap-south-1.amazonaws.com/egov-qa-assets/whatsapp-web.jpg", "enabled": true,
"navigationUrl": "https://api.whatsapp.com/send?phone=918744060444&text=mSeva"},
"whatsAppBannerMobile":{
"code": "WHATSAPP_BANNER_MOBILE",
"name": "WhatsApp Banner Mobile View",
"bannerUrl": "https://s3.ap-south-1.amazonaws.com/egov-qa-assets/whatsapp-mobile.jpg", "enabled": true,
"navigationUrl": "https://api.whatsapp.com/send?phone=918744060444&text=mSeva"}

Multiple options can be selected.

Citizen Home Screen Configuration

Details about how the module cards are rendered in the Citizen Home screen and how to add a new Card.

UI Implementation

All the modules that are enabled are defined in this file

const enabledModules = [   "PGR",   "FSM",   "Payment",   "PT",   "QuickPayLinks",   "DSS",   "MCollect",   "HRMS",   "TL",   "Receipts",   "OBPS",   "Engagement",   "NOC",   "WS",   "CommonPT",   "NDSS",   "Bills", ];
const { isLoading, data: initData } = Digit.Hooks.useInitStore(stateCode, enabledModules);

Now initData.modules will be containing an array of modules containing the following details about each module. Example object is shown here as PT module:

{ "module": "PT", "code": "PT", "bannerImage": "https://egov-qa-assets.s3.amazonaws.com/PT.png", "active": true, "order": 1, "tenants": [ { "code": "pb.jalandhar" }, { "code": "pb.nawanshahr" }, { "code": "pb.amritsar" } ] }

This array is further passed down to the CitizenHome component present in the file

This component will render a CitizenHomeCard component for every module that is present in the passed-down array of modules according to some conditions that are explained below.

How cards are rendered along with links and icons:

As you can see in the home screen of Citizen, every module card has some links for it. Details of those links is stored in MDMS so that it becomes configurable. In the UI those details are fetched and accordingly module cards are rendered with the information fetched from the MDMS.

  1. url → every link in the citizen side has this property set to “digit-ui-card”. It is used to filter all the links that belong to Citizen side

  2. parentModule → describes to which module this link belongs

  3. navigationURL → describes the destination url

In the UI this above mentioned data is fetched using this hook which calls this API egov-mdms-service/v1/_search.

const { isLoading: islinkDataLoading, data: linkData, isFetched: isLinkDataFetched } = Digit.Hooks.useCustomMDMS()

After some processing in the UI this linkData will be an array in which every key will be module name and its value would be an object containing the links array and iconName and module Header, it will look like this:

Using this data every card along with it’s icon, header and links will be rendered in Citizen Home.

Icon Configuration / Naming Convention

Add New Card

Now that we are aware of how the module cards are rendered with their respective data , let’s discuss how to add a new module Card.

To add a new module card , we need to add the name of the module in the list of enabled modules. The details of this module will be fetched using this same hook as explained above:

const { isLoading, data: initData } = Digit.Hooks.useInitStore(stateCode, enabledModules);

Sample actions-test and roleactions object

Sample actions-test object

{ "id": 2307, "name": "BPA_CITIZEN_HOME_VIEW_APP_BY_CITIZEN_LABEL", "url": "digit-ui-card", "displayName": "View applications by Citizen", "orderNumber": 1, "parentModule": "OBPS", "enabled": true, "serviceCode": "", "code": "", "path": "", "navigationURL": "/digit-ui/citizen/obps/my-applications", "leftIcon": "OBPSIcon", "rightIcon": "", "queryParams": "" }

Sample roleactions Object

{ "rolecode": "CITIZEN", "actionid": 2307, "actioncode": "", "tenantId": "pb" }

Multiple options can be selected.\

This array contains a list of modules that are enabled in DIGIT-UI. This array is passed down to DigitUIWrapper Component defined here: . Here this array is passed down to this hook:

This module card data is stored in this file . The format of the link data is described in such a way that every link object will have these key properties among others:

This hook call is made in this file

This rendering is done in this component using CitizenHomeCard component.

Every module icon is stored as an svg component in this file . Name of every svg component follows a common format which is the name of the module followed by Icon string. For instance, PTIcon is the icon name for PT module. This icon name details are also stored in the MDMS file, which is used to display appropriate icons on the module cards.

By doing this a new module card will be rendered but it’s header, links, and icon will not be rendered because we need to add this data in the MDMS. We need to add this data in this file as explained above and accordingly add matching ids in this file with rolecode property set to ‘CITIZEN’

📓
egov-mdms-data/data/pb/common-masters/uiHomePage.json at DEV · egovernments/egov-mdms-data
DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/example/src/index.js
frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/Module.js
frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/Home.js
data/pb/ACCESSCONTROL-ACTIONS-TEST/actions-test.json
frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/index.js
frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/Home.js
svgindex.js
actions-test.json
roleactions.json