Create a New Screen in Digit-ui

Owned by JaganKumar
Last updated: Dec 16, 2022
2 min read

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 and , 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

the hook for the same is mentioned in

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

Check the following folder which contains other configs like filter, table, search, and mobile responsiveness,

Hook for the same is defined at

 

 

 

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