DIGIT Works
PlatformDomainsAcademyDesign SystemFeedback
Works v1.1
Works v1.1
  • Introducing Works
    • What's New
  • Design Approach
    • Approach
    • Solution Design
  • Specifications
    • Functional Specifications
      • Project
      • Estimates
      • Organisation
      • Attendance Management
      • Measurements
      • Muster Roll
      • Expenditure / Billing
      • Contracts
    • Release Notes
      • MDMS & Configuration Updates
      • Test cases
      • Data Migration
      • Service Build Updates
  • Reference Implementations
    • MUKTASoft v2.1
    • MUKTASoft v2.2
      • Specifications
        • Roadmap
        • User Persona
        • Functional Requirements
          • Product Requirements Document v2.0
          • Product Requirements Document v2.1
            • Employee Mobile Application
            • Aadhaar Integration
            • Estimate Templates
            • SOR Rate Analysis
          • User Stories
            • Time Extension
              • CBO: Create Time Extension
              • Time Extension Workflow
              • EMP: Create Time Extension
              • Search and View Time Extension
              • CBO: My Requests
              • CBO: Edit Time Extension
            • JIT-FS Integration
              • Fund Allocation Register
              • Create Payment Instruction
              • PIS: Payment Instruction Status
              • PAG: Payment Advice Status
              • PD: Update payment details
              • FD: Update Failed Payments
              • Create Revised Payment Instruction
              • Revised PI: Update payment details
              • Revised PI: Updated Failed Payments
              • Search Payment Instruction
              • View Payment Instruction
            • Work Order
              • Create Work Order
              • Work Order Workflow
              • Work Order Inbox Page
              • Create/ Submit Work Order
              • Edit/Submit Work Order
              • Verify & Forward
              • Send Back
              • Send Back To Originator
              • Reject Work Order
              • Approve
              • Search Work Order
              • Work Order PDF
            • Dashboard v1.0
              • Commons
              • KPIs: Actions Items
              • KPIs: SLA Breached
              • KPIs: Leaderboard
              • KPIs: Activities by Status
              • KPIs: Payments
              • KPIs: Expenditure
            • Schedule of rates
              • Create SOR
              • Search SOR
              • View SOR
              • Modify SOR
              • Add/ Modify Rate
            • Detailed Estimate
              • Create Detailed Estimate
              • Change in workflow
              • Change in edit estimate
              • Search and View Detailed Estimate
            • Detailed MB
              • Create MB
              • MB Inbox
              • MB Workflow
              • Search MB
              • View MB
              • Edit MB
            • Employee Mobile Application
              • Employee Login
              • Home Page
              • Work Orders
              • Create/ Edit MB
              • Measurement Books
              • View Measurement Book
            • Aadhar Integration
              • Wage Seeker's Registration
              • Wage Seeker Modification
            • Improvements
              • Moving Skills to SOR Master
              • Re-payment of failed payment
              • Revising estimate calculation logic
              • Material purchase payment to CBO
            • Estimate Template
              • Create Template
              • Search Template
              • View Template
              • Modify Template
              • Change in estimate to add template
            • Rate Analysis
              • Add/ Edit Rate Analysis
              • View Rate Analysis
              • Revising Rate
              • Analysis Statements
              • Utilization Statements
              • Download of analysis statements
            • Data Protection & Privacy
              • Display Privacy Notice In Login
              • Display Bank Account Details On Wage Bill
              • Display Muster Roll Details
              • View Payment Instruction - Mask Account Number & IFSC
              • View /Edit Wage Seeker Details
              • View/Edit Organisation Details
              • Display Engaged Wage Seeker Details
              • Display Organisation Profile & Bank Details
              • Track Attendance Changes
              • View Muster Rolls
              • Search Wage Seeker
              • Remove PII & Sensitive Data From Additional Fields
      • Deployment
        • Release Notes
          • Service Build Updates
          • Data Migration
          • Test Cases
        • Deployment Guide
        • SMS Adapter Services
          • Notification Consumer
          • Notification Consumer Service
          • Contact Notification Service
          • Estimate Notification
          • Expense Notification Service
          • Muster Roll Notification Service
          • Measurement Notification Service
          • Organisation Notification Service
          • Individual Notification Service
        • MUKTASoft Services
          • IFMS Adapter
          • Expense Calculator
          • Works PDF
          • MUKTA Services
          • Bank Account Search
          • Individual Search
          • Organisation Search
          • Bill Scheduler
          • Statements
          • Rate Analysis
        • Configuration
          • Master Data Templates
            • Project Type
            • Target Demography
            • Unit Of Measurement (Units)
            • Overheads
            • Skill Category & Skills
            • Community-Based Organisation Roles
            • Scheme
            • Expense Heads
            • Standard Deductions
            • Organisation Type
            • Organisation Sub Type
            • Organisation Functional Category
            • Organisation Class/Rank
            • HRMS Sections/Departments
            • HRMS Designation
            • HRMS Employment Type
            • User Role
            • Organization
            • Wage Seeker
            • Tenants
            • Ward Boundary
            • Locality Boundary
            • Payment Advice Format
            • Users Data
            • Schedule of rates
            • Rate Analysis
          • Notifications & SMS Templates
          • Localisation
          • Dashboard Reindexing
          • Platform Service Configuration
          • UI Configuration
            • Common Configurations
              • Role Configuration
              • MDMS Configuration
              • APK Generation
            • Modules
              • Project
              • Estimate
              • Workorder
                • Time Extension
              • Muster Roll
              • Bill
              • Organization
              • Wage Seeker
              • Wage Seeker (CBO Application)
              • Attendance (CBO Application)
              • Muster Roll (CBO Application)
              • Mukta Dashboard
              • Measurement
              • SORs and Rates
              • IFMS Adapter UI
              • Rate Analysis
              • Revision Of Rates
              • Estimate Template
              • Measurement Book (Mobile Application)
        • Customisation
          • Works UI
            • UI Tech Flow Diagrams
          • UI Screens Customisation
            • Document Upload Container
            • CSS Customisation
            • Inbox/Search Screen
      • Implementation
        • Pilot Roll Out Plan
        • Pilot Go Live Definition
        • Pilot Sucess Metrics
        • Success Metrics
        • Adoption Metrics
        • Adoption Template
        • Implementation Plan & Checklist
        • Issue Management - Standard Operating Procedures
        • Training Resources
          • User Manual
            • Mobile Application User Manual
              • CBO - Getting Started
                • My Works
                • Track Attendance
                • Muster Rolls
                • My Bills
                • My Requests
              • Employee - Getting Started
                • Work Orders
                • Measurement Books
            • Web Application User Manual
              • Getting Started
              • Project
              • Estimate
              • Work Order
              • Time Extension
              • Measurement Book
              • Muster Roll
              • Billing
              • Payments
              • Rates Revision
              • Registries
                • Wage Seekers
                • Organizations
                • Schedule Of Rates
                  • SOR Definition
                  • Rates
                  • Rate Analysis
                • Estimate Template
            • Kibana Dashboard User Manual
          • Training Videos
        • UAT Planning
          • UAT Test Case Scenarios
          • UAT Schedule Plan
          • Issue Reporting Template
          • UAT Credentials
  • Platform
    • Architecture
      • High Level Design
      • Low Level Design
        • Registries
          • Individual
          • Bank Account
          • Organization
        • Services
          • Project
          • Detailed Estimates
          • Contracts
          • Attendance
          • Muster Roll
          • Expense
          • Schedule of Rates (archive)
          • Detailed Measurement Book
  • Setup
    • Install Works
      • Install Using GitHub Actions In AWS
      • System Data Setup
    • Configure Works
      • Service Configuration
        • Project
        • Estimate
        • Contract
        • Attendance
        • Muster Roll
        • Expense
        • Bank accounts
        • Organisation
        • Individual
        • Estimate Template
  • General
    • Source Code
    • Roadmap
    • Discussion Board
    • Issues
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
  • Common Components Used
  • Hooks Used
  • Sample MDMS Data For Inbox
  • Sample MDMS Data For Search
  • Configure Screens - Steps
  • Limitations

Was this helpful?

  1. Reference Implementations
  2. MUKTASoft v2.2
  3. Deployment
  4. Customisation
  5. UI Screens Customisation

Inbox/Search Screen

Approach to render Inbox and Search screen content based on config passed via MDMS data.

Overview

This page provides the approach details for -

  • rendering the Inbox screen or Search screen based on the config

  • calling the API dynamically based on API details passed via config

Common Components Used

InboxSearchComposer

This is a container component for inbox and search screens. It consists of 4 children components which can be rendered conditionally.

Prop Name
Description

configs

Config fetched from MDMS data

InboxSearchLinks

This component is used to render titles and links in the inbox.

Prop Name
Description

headerText

Config fetched from MDMS data

links

Links to navigate to other screens

customClass

Class to update styling

logoIcon

Icon name and class to render in component

SearchComponent

This component is used to render search or filter forms with ‘clear’ and ‘search’ buttons.

Prop Name
Description

uiConfig

Config to render search/filter form

header

Title of form

screenType

Type of parent screen, can be either ‘inbox’ or ‘search’

fullConfig

Entire config of screen which also includes API details

Results table

This component is used to render a table with searched results.

Prop Name
Description

config

Config to render table

data

Search results need to be populated in table

isLoading

Flag to pass to handle loading state

isFetching

Flag to pass to handle loading state

fullConfig

Entire config of screen which also includes API details

RenderFormFields

This component is used to render form fields passed in the 'fields' parameter in the config

Prop Name
Description

fields

Config to render all form fields

control, formData, errors, register, setValue, getValues, setError, clearErrors

Props to handle all form actions like collectibe data, setting errors, clearing errors etc.

apiDetails

Includes all API details required to fetch data

Hooks Used

To fetch inbox details, ‘useCustomAPIHook’ is used which takes all the API details like URL, query params, body, config etc. from config (defined in MDMS).

Sample MDMS Data For Inbox

Sample MDMS Data For Search

Configure Screens - Steps

  1. Create config based on the sections that need to be displayed on the screen. The basic structure for Inbox and Search screens is as below.

  2. Based on the flag given for each section its visibility is controlled. If the ‘show’ flag is true, then the section is visible, else it is hidden.

  3. Add API details in the top section, this API will be called via useCustomAPIHook and return the data. This consists of the below details.

  4. Add search form config which can be used in both inbox/search screen. It consists of UIconfig containing label info, styling info, default form values, and fields which need to be rendered in the form. Refer below

  5. Add Links config consists of link info, logo to be shown and title. Refer below

  6. Add Filter form config which is similar to the search form. Refer below

  7. Add Table (Search result) config consists of labels, column data and related jsonpaths to access the data passed. Refer below

  8. To add any customisations on query params, request body, table columns or to add any custom validations in forms, related code can be added in the UICustomisations file as below

  9. Once the above config is defined, created an index file/ Component in the pages folder. Fetch the config from MDMS and pass it to the inboxSearchComposer component as below

Limitations

  • This approach is followed only in Inbox and Search screens currently.

  • Only one API can be called dynamically based on given configurations.

PreviousCSS CustomisationNextImplementation

Was this helpful?

Base Inbox config
Base Search config
Api details section
search
Links
Filter
Results Table
Ui customisations for Search project screen
Sample code for project search page
https://github.com/egovernments/works-mdms-data/blob/DEV/data/pb/commonUiConfig/projectInboxConfig.jsongithub.com
Logoworks-mdms-data/SearchProjectConfig.json at DEV · egovernments/works-mdms-dataGitHub
LogoDIGIT-Works/useCustomAPIHook.js at develop · egovernments/DIGIT-WorksGitHub