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
Create
View
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.
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
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 wisecurl --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" }'