Overview

This page provides the architecture and key features of the DIGIT UI. Click on the broader headings below to find the details.

• Frontend components

• UI Architecture

• Employee/Citizen App

Frontend Components

Broadly, the DIGIT UI frontend components are categorized as below:

1. Libraries

2. CSS Library

3. React Components

4. UI Modules

5. Templates

CSS Library

The CSS Library contains all the classes both in the module and compiled form.

This can be imported using import "@egovernments/digit-ui.css/Button"or full CSS import using import "@egovernments/digit-ui.css"

Component Libraries

The Component Library contains a set of all required components defined in it.

Libraries & Utils

The libraries and utils contain the following:

• Localization workflows

• API Handling Strategies - Centralize API caching and handling strategies within shared functions, accessible by all modules. This ensures consistency and efficiency across the application.

• Localisation

Modules

The module is a closed system for states, allowing access only to node_modules or CDNs. State-specific components can be provided during the module's initialization in the employee or citizen application.

Below is an illustration of how the module structure looks like:

Modules contain the following inbuilt

• Theme - this may change if we later decide to use any css-in-js library, like styled-components.

• Components

• Routes

• State management

• Business logic

• API integrations

Nomenclature

1. The first line contains the Architecture Component name or info

2. The second line contains an npm package and a template in brackets for creating the component.

Features

• Easy-to-use CLI

• Handles all modern JS features

• Bundles commonjs and es module formats

• create-react-app for example usage and local dev for React-based libraries

• Rollup for bundling

• Babel for transpiling

• Supports complicated peer-dependencies

• Supports CSS modules

Templates

The templates have the following folder structure: Components related to the template are inside the src folder. An example is provided to demonstrate the app created by the template.

Architecture

We have two main React Apps:

1. micro-ui-internals

   • This is meant for the eGov development team to build components and default modules.

   • It contains the following modules:

     • CSS Library

     • UI Components (presently react-components)

     • Utils Library: Contains Services, Localization handling and React Hooks.

     • UI Modules

       • Core - containing login, routing and global state.

       • PGR

       • FSM

       • PT

       • Payment

       • etc ...

2. micro-ui

   • This is meant for the state team to manage, make changes, and deploy

   • It allows the import of digit-ui-internals modules

   • Customizations

     • View

     • Services

   • Build and deploy scripts

     • Dockerfile & nginx.conf

     • build-config.yaml

Employee / Citizen App

The app imports the developed module.

import './index.css' import { initPGR } from '@egovernments/pgr-module'; import punjabLogo from './assets/logo.png' const theme = { "--primary-color": "#3f51b5", "--text-color": "#212121" } const PGRComponents = { "logo": punjabLogo } const initPunjabPGR = (onRouteChange) => initPGR({ state: "pb", element: "#appWrapper", components: PGRComponents, onRouteChange, theme }); export default initPunjabPGR;

In the next phase, we can merge the Employee and Citizen apps into one app with role-based permissions and content.

Related Links

Prerequisite reference study materials

Troubleshoot using the Browser Network Tab

After the backend development and deployment of DIGIT, as per the steps detailed in the Backend Developer Guide, it is time to start building the UI screens. For illustration purposes, we will build the citizen and employee screens for the Sample module.

This guide offers a systematic view of creating the application screens on DIGIT.

Developer code: Download the UI code from the link here Sample-Registration.

Key UI Fundamentals

DIGIT UI basics to browse through before initiating the frontend development.

UI Development Steps

Follow the cards below to build and deploy the DIGIT UI.

Scenario-based UI Development

Custom UI development depends on specific user requirements. We have listed common scenarios (listed below) - follow the steps outlined for each to set up DIGIT UI as per requirements.

• Create a new UI module/package

• Setup employee module

• Setup citizen module

• Customise UI

• Setup monitoring tools

• Generate APK for Employee and Citizen apps

Run Sample Module - Once the setup is complete, run the sample module provided in this guide. Test run the module and deploy it using CI/CD to your development environment.

Troubleshoot

Visit our FAQs section to troubleshoot -

• Troubleshoot browser network tab issues

• Debug Android app using Chrome browser

Description

A toggle UI component is a user interface element that allows users to switch between two states, typically "on" and "off" or "enabled" and "disabled".

Configuration

Config for Toggle Component (using FormComposerV2)

Topics covered:

Overview

This document details the essential modifications needed in the modules for smooth integration of components from the "components-core" package. It offers precise guidelines on utilizing FormComposerV2 and InboxSearchComposer, along with updates made in the configs.

In the components-core package, several enhancements have been implemented to improve code clarity and address issues related to pixel inconsistencies. Previously, there were challenges associated with pixel-based sizing, leading to inconsistencies across different devices and screen resolutions. To mitigate this, the codebase has been updated to utilize rems as the primary unit of measurement. This transition to rems offers several advantages over pixels, including improved scalability and responsiveness across various viewport sizes.

Adopting rems ensures the components' styling is more consistent and adaptable, providing a seamless user experience across different platforms and devices.

Furthermore, TextInput, TextArea, Radio, Button, Checkbox, Toggle, Dropdown, Multiselectdropdown, InfoCard, and Toast offer different variants. Adding variants for these components makes them more flexible, serving a wider range of purposes and meeting different design needs effectively.

These are some of the updates made in the components-core package.

Install

To install:

Add the dependency in the frontend/micro-ui/web/package.json

Apply

Syntax for importing any components:

Syntax for importing FormComposerV2:

Modify Project Module

In the micro-ui/web/micro-ui-internals/packages/modules/Project/src/pages/employee/CreateProject/CreateProjectForm.js:

In the micro-ui/web/micro-ui-internals/packages/modules/Project/package.json :

Add “@egovernments/digit-ui-components-core”:”0.0.1” in the dependencies.

And when you import any component the syntax for the import statement is:

In the micro-ui/web/micro-ui-internals/packages/modules/Project/src/pages/employee/ProjectWMSSearch:

Conclusion

Verify the components in the sample module:

These are some of the modifications that need to be done in the modules to use the components from the components-core package.

Description

The checkbox component allows users to select one or multiple options from a given set of choices.

Configuration

Config for Checkbox Component (using FormComposerV2)

By default, the checkbox appears before the label, but this order can be changed using the isLabelFirst option.

Description

Radio button components enable users to select a single option from a list of alternatives.

Configuration

Config for Radio Component (using FormComposerV2)

While using the radio component independently and to disable it set the prop as disabled={true}.

Description

Buttons are used for specific user actions. These clickable UI components allow the users to interact with the system.

Configuration

Usage of Button Component

Primary Variant

Secondary Variant

Tertiary Variant

Link Variant

Icons are sent as a string added before the label. To add it as a suffix, set the isSuffix parameter to true.

Description

The Input field enables users to interact with the application through content input and data. The component allows users to input responses or data based on specific requirements.

Configuration

Config for TextInput Component (using FormComposerV2)

Type: text

Below are the details for the type: text:

Example Usage of TextInput Component

Type: date

The date can be selected from the date chart. If editableDate is set to true, the date can be edited without using the date chart; otherwise, it cannot be edited.

Type: time

The time can be selected from the time chart. If editableTime is set to true, the time can be edited without using the time chart; otherwise, it cannot be edited.

Type: geolocation

Click on the geolocation icon to call and activate the onIconSelection function. Otherwise, the location details are captured by default.

Type: numeric

The numeric value by default increases and decreases by step value 1. But it can be configured using the step value sent as a prop in the config.

With Prefix and Suffix

Type: password

Type: search

Config for TextArea Component (using FormComposerV2)

There are two variants for the textarea - one has a resize option and the other is resizeSmart which auto-adjusts the height based on the input content.

Introduction

This page outlines methods to reduce UI/UX audit bugs post-development by enhancing a UI library. Key improvements include:

These enhancements aim to streamline development and ensure a consistent, user-friendly interface.

Integrate New Components

To resolve UI/UX audit issues, we will implement new components featuring enhanced functionality, modern design, and superior performance. These elements should adhere to current design trends and meet user expectations to improve the user experience. Below is the list of DIGIT Components

Standardise Design Principles

Standardising design principles ensures consistency across the UI library, reducing the likelihood of UI/UX audit bugs. This involves establishing design guidelines, naming conventions, and component usage patterns.

Enhance Stability

Enhancing the stability of the UI library is crucial for reducing UI/UX audit bugs. This includes optimizing code quality, implementing robust testing strategies, and monitoring performance to identify and address potential issues.

Convert px To em Units

Transitioning from px to em units improves scalability and accessibility, reducing UI/UX audit bugs related to inconsistent text sizes and layouts across different devices and screen resolutions.

Integrate With Storybook

Storybook provides a development environment for testing and documenting components, helping to identify and address UI/UX audit bugs early in the development process.

Implement Color & Text Size Constants

Implementing colour and text size constants ensures consistency in styling across the UI library, reducing UI/UX audit bugs related to colour contrast, readability, and visual hierarchy.

Add New Component Variants

Introducing newer component variants enhances flexibility and caters to diverse user requirements, reducing UI/UX audit bugs related to limited functionality or options.

Create Flutter Widgets

Creating Flutter widgets extends the UI library's reach to mobile platforms, reducing UI/UX audit bugs related to inconsistent user experiences across different devices and operating systems.

Refer to the below docs to learn more about react and flutter components -

Conclusion

Implementing the improvements discussed here ensures the UI library is better equipped to reduce UI/UX audit bugs after development. These enhancements promote consistency, scalability, accessibility, and cross-platform compatibility, resulting in a more polished and user-friendly experience for end-users.

Description

A dropdown UI component is a user interface element that allows users to select one option from a list of choices. When the dropdown is clicked, it expands to reveal the list of options, and the user can click an item to select it. This component is often used in forms and navigation menus to save space and organize options efficiently.

Configuration

Config for Dropdown Component (using FormComposerV2)

Simple Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With Icons",
disable: false,
populators: {
name: "dropdown-WIth Icons",
optionsKey: "name",
error: "",
required: true,
showIcon: true,
isSearchable:true,
options: [
{
code: "1",
name: "Option1",
icon: "Article",
},
{
code: "2",
name: "Option2",
icon: "Article",
},
{
code: "3",
name: "Option3",
icon: "Article",
},
],
}
}

To show the icons beside each option, set the showIcon prop to true. Send the icons as a string along with the required options. The dropdown is searchable but can be configured using the isSearchable prop.

To reset the option after selecting it, clear the option and click enter.

For more information: StoryBook for simple dropdown

Nested Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With Icons",
disable: false,
variant: "nesteddropdown",
populators: {
name: "nesteddropdown-With Icons",
optionsKey: "name",
error: "",
required: true,
showIcon:true,
isSearchable:true,
options: [
{
name: "Category A",
options: [
{ code: "Category A.Option A", name: "Option A", icon: "Article" },
{ code: "Category A.Option B", name: "Option B", icon: "Article" },
{ code: "Category A.Option C", name: "Option C", icon: "Article" },
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A", icon: "Article" },
{ code: "Category B.Option 2", name: "Option 2", icon: "Article" },
{ code: "Category B.Option 3", name: "Option 3", icon: "Article" },
],
code: "Category B",
},
],
},
}

For the type dropdown with the "nesteddropdown" variant, options can be configured as shown above. Icons are optional but can be included if needed. The search results are displayed as per the main category names.

For more information: Storybook for nesteddropdown varinat

Tree Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "Default",
disable: false,
variant: "treedropdown",
populators: {
name: "treedropdown-Default",
optionsKey: "name",
error: "",
required: true,
options: [
{
name: "Category A",
options: [
{
code: "Category A.Option A",
name: "Option A",
options: [
{ code: "Category A.Option A.Option 1", name: "Option 1" },
{ code: "Category A.Option A.Option 2", name: "Option 2" },
],
},
{
code: "Category A.Option B",
name: "Option B",
options: [
{ code: "Category A.Option B.Option 1", name: "Option 1" },
{ code: "Category A.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A" },
{
code: "Category B.Option B",
name: "Option B",
options: [
{ code: "Category B.Option B.Option 1", name: "Option 1" },
{ code: "Category B.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category B",
},
{
name: "Category C",
options: [{ code: "Category C.Option A", name: "Option A" }],
code: "Category C",
},
],
},
}

Here's a simplified version of your explanation:

For the type dropdown with the "treedropdown" variant, options can be configured as shown in the configuration above. Currently, the treedropdown does not support icons. Clicking on the parent option displays the child options. The final child options are enabled for selection.

This version maintains the necessary details while being clear and concise.

For more information: Storybook for treedropdown

NestedText Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With Icon",
disable: false,
variant: "nestedtextdropdown",
populators: {
name: "nestedtextdropdown-With Icon",
optionsKey: "name",
error: "",
required: true,
showIcon:true,
options: [
{
code: "Option1",
name: "Option1",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor ",
},
{
code: "Option2",
name: "Option2",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
{
code: "Option3",
name: "Option3",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
],
},
},

For the type dropdown with the variant nestedtextdropdown, use the above configuration details to define the options.

Use this variant when you need to describe each option.

For more information: StoryBook for nestedtext dropdown.

Profile Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "With CustomIcon",
disable: false,
variant: "profiledropdown",
populators: {
name: "profiledropdown-With CustomIcon",
optionsKey: "name",
error: "",
required: true,
options: [
{
code: "Option1",
name: "Option1",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",

},
{
code: "Option2",
name: "Option2",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",

},
{
code: "Option3",
name: "Option3",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",

},
],
},
}

For the type dropdown with the "profiledropdown" variant, use the configuration details above to define the options.

You can set any image as a profileIcon as shown in the configuration.

For more information: Storybook for profiledropdown

Profilenestedtext Dropdown

{
isMandatory: false,
type: "dropdown",
key: "genders",
label: "ProfileDropdown",
disable: false,
variant: "profilenestedtext",
populators: {
name: "profiledropdown-With NestedText",
optionsKey: "name",
error: "",
required: true,
options: [
{
code: "Option1",
name: "Option1",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
{
code: "Option2",
name: "Option2",
profileIcon:"

https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",

},
{
code: "Option3",
name: "Option3",
profileIcon:"
https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila-21.png
",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
],
},
}

For more information: Storybook for profilenestedtext dropdown

Config for MultiSelectDropdown Component (using FormComposerV2)

Simple MultiSelect Dropdown

{
isMandatory: false,
key: "multiselect",
type: "multiselectdropdown",
label: "With Icons",
disable: false,
populators: {
name: "multiselectdropdown-With Icons",
optionsKey: "name",
error: "Error!",
required: false,
isDropdownWithChip: true,
showIcon:true,
clearLabel:"Clear All"
options: [
{
code: "Option1",
name: "Option1",
icon: "Article",
},
{
code: "Option2",
name: "Option2",
icon: "Article",
},
{
code: "Option3",
name: "Option3",
icon: "Article",
},
],
},
}

For a multi-select dropdown, set options in the format given in the above configuration.

Ignore these If icons are not needed. Else, set the showIcon to true. Set the isDropdownWithChip parameter to true to show chips once the options are selected.

Configure the clearLabel param to ensure the chips are cleared from the label.

For more information: Storybook for multiselect dropdown

Nested MultiSelect Dropdown

{
isMandatory: false,
key: "multiselect",
type: "multiselectdropdown",
label: "With Icons",
disable: false,
variant: "nestedmultiselect",
populators: {
name: "nestedmultiselect-With Icons",
optionsKey: "name",
error: "Error!",
required: false,
isDropdownWithChip: true,
showIcon:true,
options: [
{
name: "Category A",
options: [
{ code: "Category A.Option A", name: "Option A", icon: "Article" },
{ code: "Category A.Option B", name: "Option B", icon: "Article" },
{ code: "Category A.Option C", name: "Option C", icon: "Article" },
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A", icon: "Article" },
{ code: "Category B.Option 2", name: "Option 2", icon: "Article" },
{ code: "Category B.Option 3", name: "Option 3", icon: "Article" },
],
code: "Category B",
},
],
},
}

Multiple options can be selected for each category.

For more information: Storybook for nested multiselect dropdown

Tree MultiSelect Dropdown

{
isMandatory: false,
key: "multiselect",
type: "multiselectdropdown",
label: "Default",
disable: false,
variant: "treemultiselect",
populators: {
name: "treemultiselect-Default",
optionsKey: "name",
error: "Error!",
required: false,
isDropdownWithChip: true,
options: [
{
name: "Category A",
options: [
{
code: "Category A.Option A",
name: "Option A",
options: [
{ code: "Category A.Option A.Option 1", name: "Option 1" },
{ code: "Category A.Option A.Option 2", name: "Option 2" },
],
},
{
code: "Category A.Option B",
name: "Option B",
options: [
{ code: "Category A.Option B.Option 1", name: "Option 1" },
{ code: "Category A.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category A",
},
{
name: "Category B",
options: [
{ code: "Category B.Option A", name: "Option A" },
{
code: "Category B.Option B",
name: "Option B",
options: [
{ code: "Category B.Option B.Option 1", name: "Option 1" },
{ code: "Category B.Option B.Option 2", name: "Option 2" },
],
},
],
code: "Category B",
},
{
name: "Category C",
options: [{ code: "Category C.Option A", name: "Option A" }],
code: "Category C",
},
],
},
}

In a tree multiselect dropdown, you can select both parent and child options. Choosing a child option does not automatically select the parent option. When only some child options are selected, the parent option will show in an intermediate state.

Selecting any parent option will automatically select all its child options.

For more information: Storybook for treemultiselect dropdown

NestedText MultiSelect Dropdown

{
isMandatory: false,
type: "multiselectdropdown",
key: "multiselect",
label: "With Icons",
disable: false,
variant: "nestedtextmultiselect",
populators: {
name: "nestedtextmultiselect-With Icon",
optionsKey: "name",
error: "Error!",
required: false,
showIcon:true,
isDropdownWithChip:true,
options: [
{
code: "Option1",
name: "Option1",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor ",
},
{
code: "Option2",
name: "Option2",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
{
code: "Option3",
name: "Option3",
icon: "Article",
description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor",
},
],
},
},

For more information: Storybook for Nestedtext Multiselect Dropdown

Description

The Toast component is used to provide users with temporary notifications. It does not require any user action.

Configuration

Usage of Toast Component (using FormComposerV2)

Success Toast

<Toast
label={"Success Toast Message"}
onClose={}
transitionTime={}
/>

Warning Toast

<Toast
label={"Warning Toast Message"}
warning={“warning”}
onClose={}
transitionTime={}
/>

Error Toast

<Toast
label={"Error Toast Message"}
error={true}
onClose={}
transitionTime={}
/>

The default transitionTime for any variant of toast is 5 seconds. However, this is configurable using the transitionTime prop (in milliseconds).

For more information: Storybook for Toast

Description

The InfoCard component has four variants: default, success, error and warning. The default labels for these variants are Info, Success, Error and Warning.

However, the label can be configured using the label prop. The configuration enables users to set the array of elements for display in the info card component.

By default, the elements are shown in the vertical direction. To show the elements in the horizontal direction set the inline prop to true.

Configuration

With Additional Elements:

<InfoCard
populators={{
name: "infocardwithelements",
}}
variant="default"
text={
"Application process will take a minute to complete. It might cost around Rs.500/- to Rs.1000/- to clean your septic tank and you can expect the service to get completed in 24 hrs from the time of payment."
}
label={"Info"}
additionalElements={[
<p key="1">Additional Element 1</p>,
<img
key="2"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 2"
/>,
<img
key="3"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 3"
/>,
<img
key="4"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 4"
/>,
<img
key="5"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 5"
/>,
<img
key="6"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 6"
/>,
<img
key="7"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIGMLufj86aep95KwMzr3U0QShg7oxdAG8gBPJ9ALIFQ&s"
alt="Additional Element 7"
/>,
<img
key="8"
src="https://digit.org/wp-content/uploads/2023/06/Digit-Logo-1.png"
alt="Additional Element 8"
/>,
]}
inline={true}
/>

For more information: Storybook for infocard

Overview

The Toggle Buttons component in DIGIT UI presents a list of interactive toggle buttons, providing users with the ability to select an option. Each button is equipped with callbacks for both mouse-down and hover effects, ensuring a responsive and engaging user interface.

Properties

The widget contains the following required parameters:

Below are some additional parameters:

Configuration

Usages

Add the following lines of code:

Overview

DIGIT UI components include various text input fields with optional features such as character count display, inner labels, and help text. These fields also come with built-in validation support for improved data integrity.

Input Field Type

• Text Input Field: A text input field for general alphanumeric data.

• Text Area Input Field: For multi-line text input.

• Search Input Field: Designed for search queries or search-related inputs.

• Password Input Field: A secure input field for password entry.

• Numeric Input Field: This field is suitable for numeric input.

• Date Input Field: An input field designed to capture dates.

• Time Input Field: Use this field to input time values.

• Location Input Field: Specifically for geographic location data, such as coordinates.

Properties

These are some common props which can be sent inside all the input fields:

TextAreaScroll

Configuration

Text Input Field

Usages

TextArea Input Field

Usages

Search Input Field

Usages

Password Input Field

Usages

Numeric Input Field

Usages

Date Input Field

Usages

Time Input Field

Usages

Location Input Field

Usages

Overview

This widget is a versatile and customizable checkbox component. It provides a checkbox with an associated label and allows users to toggle between checked and unchecked states. This widget supports various customisation options, including the ability to customise the checkbox icon colour, label, padding, and disabled state.

The widget provides a hover state, visually indicating when the user hovers over the checkbox. This is useful for enhancing the user experience.

Properties

This widget contains the following required parameters:

These are some option parameters:

Configuration

Usages

Add the following lines of code:

Introduction

DIGIT UI components is a collection of common Flutter widgets designed to simplify UI development. These components offer easy-to-use and customizable features to enhance UI design and streamline the development process.

Getting Started

Add this to your pubspec.yaml file:

Then run:

Import the package in your Dart code:

Component List

Overview

DIGIT UI components provide a variety of buttons with optional suffix and prefix icons, contributing to a cohesive and visually appealing UI.

Properties

Button Type

• Primary: Represents the primary action. It features a prominent colour, and its appearance can change on hover or click.

• Secondary: Offers a secondary action. It has a different colour scheme than the primary button.

• Tertiary: Provides a tertiary action with a distinct visual style.

• Link: Resembles a hyperlink, suitable for navigation or linking to other parts of the application. It typically includes an underline.

Hover and Disabled State

The DigitButton widget handles hover effects and a disabled state. When the button is hovered over, it can exhibit visual changes depending on its type. The disabled state prevents interaction and adjusts the button's appearance accordingly.

Icon Placement

The widget supports the placement of icons both before and after the label text. This allows for flexibility in button design.

Properties

It contains the following required Parameters:

These are some optional parameters:

Configuration

Primary Button

To use the primary button add the below lines of code:

With suffix Icon:

With prefix Icon:

Secondary Button

To use the secondary button add the following lines of code:

Prefix and Suffix icons can be added to the secondary button using the same code as given for the primary button.

Tertiary Button

To use the tertiary button add the below lines of code:

Link

To use a link, add the following lines of code:

Overview

DIGIT UI components offer various drop-down menus, including single-select, multi-select, and tree-select options.

Single Select Drop-down

The Single Select drop-down in Digit UI Components provides a drop-down menu for users to make a single selection. It supports various features such as item filtering and selection handling. This intuitive component supports options with additional features such as images, icons, and descriptions, complemented by hover and mouse-down effects.

Sub-Types

• Default drop-down

• Nested drop-down

• Tree drop-down

Properties

Below are some required parameters:

These are some additional customisation parameters:

DropdownItem

Inside the dropdown item, we can pass additional parameters to include the drop-down like description, image and icons.

There are the customisations available inside the drop-down item:

TreeNode

Inside the tree node we can pass a list of children associated with a node:

Configuration

Usages

Default drop-down

With description and profile image:

Nested drop-down

Tree drop-down

Multi Select Drop-down

The Multi-Select drop-down in DIGIT UI components offers a user-friendly interface for selecting multiple options simultaneously. This clean and intuitive component is equipped with built-in chips and provides responsive mouse-down and hover effects.

Sub-Types

• Default drop-down

• Nested drop-down

• Tree drop-down

Properties

Below are some required parameters:

These are some additional parameters:

Configuration

Usages

Default Drop-down

Nested Drop-down

Tree Drop-down

Overview

The Radio Buttons component in DIGIT UI empowers users to make a single selection from a list of options. This intuitive interface provides a smooth user experience with hover and mouse-down effects. It is designed to handle both horizontal and vertical layouts based on the screen width.

Properties

Below are some required parameters inside the radio list:

The following are additional parameters:

Configuration

Usages

Add the below lines of code to configure the radio button:

Overview

The Toast widget provides a customizable toast notification for Flutter applications. It is designed to display short-lived messages, alerts, or notifications to users in a visually appealing and informative manner.

The ToastType enumeration defines different types of toasts, including:

• success: Indicates a successful operation.

• error: Indicates an error or failure.

• warning: Indicates a warning or caution.

Properties

The Toast widget provides a static method for displaying toasts. This method includes the following parameters:

Configuration

Usage

Success Toast

Error Toast

Warning Toast

Overview

Once the local setup is completed, the next step is to run the application locally. This document provides the steps on how to run the digit-ui on a local machine.

Steps

Configure Environment File

Step 1: To run the application in the local environment, add the .env file in the example folder -

Step 2: Copy the following content and add it to the .env file. If the user is a citizen, configure the .env file as shown below:

Step 3: To run the application as an employee, update the value of the param to - REACT_APP_USER_TYPE=EMPLOYEE.

Step 4: To direct the front end to different environments, update the REACT_APP_GLOBAL variable and add the GlobalConfig environment file corresponding to that environment.

Update both REACT_APP_PROXY_API and REACT_APP_PROXY_ASSETS to the environment URL.

Initialise & Run Application

Before initializing the frontend app locally, ensure that you are in the specified directory.

Step 1: To initialise the Yarn execute the below command -

Step 2: Once the yarn initialization is successful execute the below command -

Step 3: Running this command will start the application.

Login As

There are two types of login -

1. Employee: If you log in as an employee, the below screen is displayed.

HomePage Employee: Once the employee is logged in, users are redirected to the employee home page.

1. HomePage Citizen: Once the citizens are logged in successfully, users are redirected to the citizen homepage.

HomePage Citizen

Troubleshoot

if you do not have a global config and AWS credentials are not present, then create a temporary local config under the path:

Include this between the head tags

Overview

This page offers details of the DIGIT UI configuration required to enable it in any environment. Browse through the configuration details listed below:

DevOps Configuration

Build Configuration

Step 1: Add entry in build-config.yaml file in the master branch of the forked repository. This will set up the job pipeline in Jenkins. Make sure to add the same config to the feature branch you are working on. Refer

Add the below content for digit-ui.

Step 2: Go to the Jenkins build page, select "Job Builder" and click on "Build now". This will pull the config from build_config.yaml and identify all modules that need to be built.

Step 3: Once the build is done, go to your Jenkins build page. The service will appear under the repository path in which it has been added, i.e. if the service is added under frontend, it will show up in the frontend section as below,

Helmchart Configuration

Step 2: Deploy-as-code/helm/charts/frontend/digit-ui

Environment Configuration

Step 1: Locate the following "deploy-as-code/helm/environments/works-dev.yaml" in the DevOps repository of your organization.

Step 2: Add the below code block within the environment YAML file used to deploy the Works platform -

Global Configuration

This section contains the configuration that applies globally to all UI modules. These need to be configured before the configuration of service-specific UI.

Steps to create a globalconfig.js file:

1. Create a config file (globalconfigs.js) with the below-mentioned config (refer to code below).

2. Configure all the images/logos required in the S3 and add links as footerBWLogoURL , footerLogoURL.

3. Mention the state tenant ID as stateTenantId.

4. If any User roles have to be made invalid add as invalidEmployeeRoles.

5. Then push this global config file into your S3 bucket as globalconfigs.js

AWS S3 Bucket Configuration

The S3 bucket has to be configured by the DevOps team, to store all the assets being used in the application like Logos, globalConfigs, etc.

Steps to create a new AWS Bucket -

1. Create a new AWS S3 Bucket

2. Update the Bucket Policy with the following content, to make the bucket public

1. Update the Cross-Origin Resource Sharing (CORS) configuration with the following content

1. To proxy the same bucket in any environment and make the necessary changes in the environment.yaml file located in the DevOps repository's configmaps under egov-config, follow the steps below:

   • Add the s3-assets-bucket: "pg-egov-assets"

1. After adding the proxy in the environment file, restart the s3-proxy build in the environment with config enabled.

Overview

This page provides the steps to configure the FormComposer.

Configuration Details

For complex configuration or screen details refer to documentation on

Other Variants (FormComposerV2)

There are 3 new use cases added to the FormComposer in addition to the default one where the whole form was rendered in a single card. Those 2 are the following:

• Multiple cards

• Cards with navigation menu

• Multiple cards with navigation menu on a single card

The following use cases are covered in the .

URL to access:/works-ui/employee/works/sampleForm

Multiple Cards

This can be done by setting the showMultipleCards prop to the FormComposer as true. In this case, every object in the formConfig will be treated as a separate Card and will be rendered accordingly.

Access .

Cards With Navigation Menu

FormComposer provides the option to activate a navigation menu that appears on top of the card. Each link in the menu corresponds to a specific card. To enable this feature, provide an array configuration for the navigation menu as a prop to the FormComposer component. Then, map each card with a link from the navigation menu configuration array using a designated key named "navLink", associating it with a value in the Navigation Menu Config.

Multiple Cards With Navigation Menu On A Single Card

This use case is the same as above. The only difference is the navLink property in the config. If this property is present and valid for a card config, the corresponding card will be mapped to a navigation menu link. On the other hand, if navLink is not present or invalid, the corresponding card will be rendered as a separate Card.

Multiple options can be selected.

Overview

This document provides the steps for creating new screens in the DIGIT-UI.

Steps

Creating a screen in DIGIT UI involve simple steps and is classified into 4 different screen -

Create Screen

To create any new screen of the Create type, use the FormcomposerV2 and transmit the configuration as specified in the file.

To check the different types of configurations, refer to the function.

View Screen

To use any view screen, create the hook for initiating API calls and structure the configurations for the View section.

• Refer to the integrated screen with ApplicationDetailsTemplate - .

• The hook details for the same is mentioned in .js

• The service configuration details are available in

Inbox Screen

To create any inbox screen, use the InboxComposer and add the following configurations:

Search Screen

Follow the instructions to set up the job pipeline. Ignore the steps not applicable to the frontend.

All content on this website by is licensed under a .

Introduction

This page lists the technical resources and knowledge required to develop a user interface on DIGIT.

Technical Pre-requisites

• Prior knowledge of React JS

• Prior knowledge of HTML / CSS

• Prior knowledge of Redux/Hooks

• Prior knowledge of SCSS/React StoryBook

• Prior knowledge of Git

• Prior knowledge of Queries and Mutations

• Knowledge of the DIGIT UI framework

Check the page to access help documents on the tools required for UI development.

Overview

This widget is a versatile and customizable information card designed inside a digit ui widget. It provides a visually appealing way to display information, with options for different types of information.

The Info Card supports different types of information, each with its distinct visual style:

• Info: Default information card with a blue background and an information icon.

• Success: This represents a successful operation, featuring a green background and a check-circle icon.

• Error: Indicates an error or unsuccessful operation with a red background and an error icon.

• Warning: Represents a warning or caution, featuring a yellow background and a warning icon.

Developers can include additional widgets beneath the description for extra information or interactive elements. The inline property controls whether these widgets are displayed horizontally or vertically.

Properties

Info cards contain the following required parameters:

There are some additional customisation parameters:

Configuration

Usages

Info Card

Success Card

Error Card

Warning Card

Overview

There are two common components for workflow related actions and timeline management.

• WorkflowActions -

• WorkflowTimeline -

Both of these components are available on each View Screen. The WorkflowTimeline component is responsible for presenting the workflow history at the bottom of the View Screen. Similarly, the WorkflowActions component renders an action bar at the bottom of the view screens, showcasing pertinent actions based on the logged-in user's role and workflow configuration.

Workflow Timeline

This component is directly integrated with the component that renders all the relevant data in view screens. WorkflowTimeline component is called in this component like this:

It expects a few props:

• BusinessService -> Name of the businessService from workflow configuration

• applicationNo -> Idgen generated application number

• tenantId

• timelineStatusPrefix -> prefix used in localisation of every checkpoint in timeline

• statusAttribute -> here we can pass the attribute(either status/state) that is the key in the workflow process instance response, whichever we want to show in the checkpoint.

This component internally calls the workflow APIs to fetch the process instance of the application and renders the history accordingly. It also makes a check for the current state of the application. If the current state is not terminated state then it will show an extra checkpoint at the top with statusAttribute as status to show pending states checkpoint. If the current state is terminated state then it will not show pending states.

Refer to the below snapshots, notice they both have 4 checkpoints. Approved refers to terminate state.

Workflow Actions

This component is rendered on every View component separately to render the action bar with relevant actions.

Sample code Snapshot:

It expects a few props:

• BusinessService -> Name of the businessService from workflow configuration

• forcedActionPrefix -> for localization

• applicationNo -> Idgen generated application number

• tenantId

• applicationDetails -> same data returned from hook used on view screen

• Url -> update API url to hit

• setStateChanged -> when update is successful this is called. Hence search apis will be called again and workflow history and workflow actions will be updated without screen refresh

• moduleCode

• editApplicationNumber -> Used in case of edit/modify action

This component internally calls the update apis and shows a relevant toast on success/failure or a response screen in case of edit action.

Overview

This page outlines the steps to set up the UI development environment locally.

Steps

Before setting up: Install the tools listed below before development. Make sure the specific versions are installed. In case no version in listed, install the latest version.

1. Install Visual Studio Code. VS Code Extensions to be installed from the marketplace:

2. Install NodeJS 14.20.0

3. version 1.22.19

4. Install Python version 2.7

5. Clone the repository locally from your organization's umbrella. This contains the frontend code under the frontend folder.

To learn how to install yarn on Linux, follow .

Overview

The is an event-based service designed to:

• Fetch pre-aggregated data of municipal services and workflows.

• Perform complex search operations.

• Return applications and workflow data in a paginated manner.

• Provide the total count of entries matching the search criteria.

This page outlines the following:

• Rendering the Inbox or Search screen based on configurations.

• Dynamically calling APIs using details provided in configurations.

Common Components Used

InboxSearchComposer

InboxSearchComposer is a container component for the inbox and search screens. It consists of four child components, which can be rendered conditionally.

InboxSearchLinks

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

SearchComponent

The SearchComponent is used to render search or filter forms. It includes 'clear' and 'search' buttons for user interaction.

Results table

The Results table component is used to render a table with searched results.

RenderFormFields

The RenderFormFields component is used to render form fields specified in the 'fields' parameter of the configuration.

Hooks Used

To fetch inbox details, the useCustomAPIHook is utilized. This hook takes all necessary API details such as URL, query parameters, body, and config from the configuration (defined in MDMS).

Sample MDMS Data For Inbox

Sample MDMS Data For Search

Configure Screens - Steps

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

1. 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.

2. Add API details in the top section, this API will be called via useCustomAPIHook and return the data. This consists of the below details.
3. 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
4. Add Links config consists of link info, logo to be shown and title. Refer below
5. Add Filter form config which is similar to the search form. Refer below
6. Add Table (Search result) config consists of labels, column data and related jsonpaths to access the data passed. Refer below
7. 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
8. 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.

Usage

To use the latest Inbox search composer it has to be imported from the React components or Utilities

React components

package

Utilities:

package

Overview

We can develop custom React hooks like useCustomAPIMutationHook to fine-tune the application API interactions. The custom hooks allow us to control how data is fetched and managed, aligning it perfectly with our requirements.

Configuration

This custom hook, useCustomAPIMutationHook, simplifies API calls for mutation operations in React applications using react-query. It allows parameter and body customization for requests to a specified URL, seamlessly managing loading indicators and states. This hook streamlines API interaction and state management within components.

Create useCustomAPIMutationHook under the following path:

Override Hook

To override the useCustomAPIMutationHook, create a new custom hook with the desired enhancements. When considering overriding useCustomAPIMutationHook, identify specific modifications required, such as adding additional parameters or altering data processing logic. Create a new custom hook, preserving the original functionality while incorporating these modifications to suit specific application needs.

We need to replace the usage of the original hook throughout the codebase with the new custom hook. This ensures that wherever the original hook is used, the modified functionality of the custom hook is applied instead.

There is a hook called useCustomMDMSV2, which is used to get data from a Multi-Domain Master Service (MDMS) API. This hook makes it easier to request data, handle load, and prepare the received data for React applications.

useCustomMDMSV2

Create the hook under the following path:

Overview

Before starting with the Module code, ensure your local development environment is set up. You can refer to the local development setup guide link given below for detailed instructions.

Steps

Follow the steps given below to create the project structure.

1. Once you have cloned the repository from Digit-Frontend, do the following.

2. Go to micro-ui-internals → packages → modules.

3. Create a new folder with module's name , For example (Sample).

4. Create a folder called src and add the components , configs, hooks and pages inside that.

5. The project structure should be as in the image below:

1. After creating the new Sample module, we need to create a package.json file for the module, specifying the module name, version, scripts, and required dependencies.