Citizen Landing Screen
Overview
This page provides details about how the Banner image and Citizen Services Card are rendered.
Steps
UI Implementation
The link to banner images and the labels and links of citizen services on the citizen services card are defined in the below MDMS file.
Banner Image
For mobile and desktop we have different banner images link. We can change the images link on the below object
Citizen Services Card/Information/Updates Props
Here we have two objects citizenServicesCard
and informationAndUpdatesCard
. Both of them have sideOption
object which is a link to View All page.
props
object contains the objects that we want to show on these two cards.
Change the label of the cards and add the navigation URL for each prop. Click on the card redirects users to the respective screen.
WhatsApp Banner Image / Link To WhatsApp Bot
Similar to Banner image, for WhatsApp Banner Image, we have two objects for mobile and desktop view. On click of the image it will redirect to WhatsApp bot. The redirection URL is defined in the navigation URL param.
Multiple options can be selected.
Citizen Home Screen Configuration
Details about how the module cards are rendered in the Citizen Home screen and how to add a new Card.
UI Implementation
All the modules that are enabled are defined in this file
Now initData.modules will be containing an array of modules containing the following details about each module. Example object is shown here as PT module:
This array is further passed down to the CitizenHome component present in the file
This component will render a CitizenHomeCard component for every module that is present in the passed-down array of modules according to some conditions that are explained below.
How cards are rendered along with links and icons:
As you can see in the home screen of Citizen, every module card has some links for it. Details of those links is stored in MDMS so that it becomes configurable. In the UI those details are fetched and accordingly module cards are rendered with the information fetched from the MDMS.
url โ every link in the citizen side has this property set to โdigit-ui-cardโ. It is used to filter all the links that belong to Citizen side
parentModule โ describes to which module this link belongs
navigationURL โ describes the destination url
In the UI this above mentioned data is fetched using this hook which calls this API egov-mdms-service/v1/_search
.
After some processing in the UI this linkData will be an array in which every key will be module name and its value would be an object containing the links array and iconName and module Header, it will look like this:
Using this data every card along with itโs icon, header and links will be rendered in Citizen Home.
Icon Configuration / Naming Convention
Add New Card
Now that we are aware of how the module cards are rendered with their respective data , letโs discuss how to add a new module Card.
To add a new module card , we need to add the name of the module in the list of enabled modules. The details of this module will be fetched using this same hook as explained above:
const { isLoading, data: initData } = Digit.Hooks.useInitStore(stateCode, enabledModules);
Sample actions-test and roleactions object
Sample actions-test object
Sample roleactions Object
Multiple options can be selected.
Last updated