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" }'