Form Composer Component Enhancements

Owned by Nipun Arora
Jan 03, 2023
2 min read

There are 3 new use cases added to the FormComposer in addition to the default one where the whole form was rendered in a single card. Those 2 are the following:

  • Multiple Cards

  • Cards with Navigation Menu

  • Multiple Cards with Navigation Menu on a single Card

The following use cases are covered in DIGIT-WORKS repo https://github.com/egovernments/DIGIT-Works

URL to access : /works-ui/employee/works/sampleForm

Multiple Cards:

This can be done by setting the showMultipleCards prop to the FormComposer as true. In this case every object in the formConfig will be treated as a separate Card and will be rendered accordingly.

 

config Link → https://github.com/egovernments/DIGIT-Works/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/works/src/pages/employee/Checklist/configTest1.js

Cards with Navigation Menu:

A navigation menu can be enabled in the FormComposer which will be rendered on top of the card and it will render an appropriate card for every navigation link in the menu. This can be enabled by sending an array config for the Navigation Menu as a prop to the FormComposer and mapping each card with a link in the Navigation Menu config array using a key called navLink and setting this key to a value in Navigation Menu Config.

Multiple Cards with Navigation Menu on a single Card:

This use case is same as above. The only difference will be the navLink property in the config. If this property is present and valid for a Card config, then the corresponding card will be mapped to a Navigation Menu Link. On the other hand, if navLink is not present or invalid, then the corresponding card will be rendered as a separate Card.