/
Create a New Screen in Digit-ui

Create a New Screen in Digit-ui

Creating a Simple Screen in DIgit UI Is made simple and it can be classified into 3 types of screens

  1. Create

  2. View

  3. Inbox

Go through these Prerequisite and UI Guidelines, before start creating any new Screen.

Create Screen:
While Creating any new screen we will use a Formcomposer and send the config as mentioned in the

sample file

Refer file
https://github.com/jagankumar-egov/DIGIT-OSS/blob/Ui-Dev-Certification/frontend/micro-ui/web/micro-ui-internals/packages/modules/br/src/pages/employee/Sample.js

To check the different types of config refer fieldSelector function.

https://github.com/jagankumar-egov/DIGIT-OSS/blob/Ui-Dev-Certification/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/FormComposer.js

 

View Screen:

For using any view screen the hook has to be created for making API call and form the config for the View Part

Check the screen integrated with ApplicationDetailsTemplate
https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/commonPt/src/pages/pageComponents/ViewProperty.js
the hook for the same is mentioned in
https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/pt/useGenericViewProperty.js

the service where the config mentioned is detailed in

https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/services/molecules/PT/Search.js

Inbox screen:
For creating any inbox screen we have this InboxComposer to which the following configurations has to be added.

Main file
https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/pages/citizen/EdcrInbox/index.js
Check the following folder which contains other configs like filter, table, search, and mobile responsiveness,
https://github.com/egovernments/DIGIT-OSS/tree/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/pages/citizen/EdcrInbox

Hook for the same is defined at
https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/obps/useEDCRInbox.js

 

 

 

Localization Naming Convention:

  • Always use only localization codes, don't hard code direct messages in the code.

  • if any hardcoded messages then they won’t be translated into the user-selected language

  • Use the t() function to translate the code to the Localised message.

  • The Localisation code should not contain space and lowercase.


    Localisation Search call based on Module wise

    curl --location --request POST 'https://dev.digit.org/localization/messages/v1/_search?locale=en_IN&tenantId=pb&module=rainmaker-bnd' \ --header 'Content-Type: application/json' \ --data-raw '{ "RequestInfo": { "apiId" : "emp", "ver" : "1.0", "ts" : "10-03-2017 00:00:00", "action" : "create", "did" : "1", "key" : "abcdkey", "msgId" : "20170310130900", "requesterId" : "rajesh", "authToken" : "06afae01-c9d8-49b3-8f75-f10ba5a4ee62", "userInfo" : { "id" : 1 } }, "tenantId" : "pb" }'

 

 



Related content

Citizen Home screen card
Citizen Home screen card
Read with this
DIGIT UI: Implementation - Development Guidelines & FAQs
DIGIT UI: Implementation - Development Guidelines & FAQs
More like this
Citizen Landing page Config
Citizen Landing page Config
Read with this
Android web view and How to generate APK
Android web view and How to generate APK
Read with this
Customisation in Digit-ui
Customisation in Digit-ui
More like this