> For the complete documentation index, see [llms.txt](https://docs.digit.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/pre-defined-screens-in-digit-ui/create-screen-formcomposer.md).

# Create Screen (FormComposer)

## Overview

This page provides the steps to configure the FormComposer.

## Configuration Details

For complex configuration or screen details refer to documentation on[ Utility - preprocess](/platform/guides/developer-guide/ui-developer-guide/customisation/utility-pre-process-mdms-configuration.md)

### Other Variants (FormComposerV2)

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 the [DIGIT-WORKS repo](https://github.com/egovernments/DIGIT-Works).

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

{% embed url="<https://docs.google.com/presentation/d/e/2PACX-1vTWwARxuFdSZ3eotsrA8kiAqF8qaPCc4y13Iu8L0Q8NVDIyz08kOGIP9MR7c20KGB3kRS1f7VgaDqm1/pubembed?delayms=3000&loop=true&start=true>" %}

### Multiple Cards <a href="#multiple-cards" id="multiple-cards"></a>

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.

Access [Config Link](https://github.com/egovernments/DIGIT-Works/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/works/src/pages/employee/Checklist/configTest.js).

<figure><img src="/files/7SkzU8aRY3NgsWhttXiK" alt=""><figcaption></figcaption></figure>

### Cards With Navigation Menu <a href="#cards-with-navigation-menu" id="cards-with-navigation-menu"></a>

FormComposer provides the option to activate a navigation menu that appears on top of the card. Each link in the menu corresponds to a specific card. To enable this feature, provide an array configuration for the navigation menu as a prop to the FormComposer component. Then, map each card with a link from the navigation menu configuration array using a designated key named "navLink", associating it with a value in the Navigation Menu Config.

Access [Configuration link](https://github.com/egovernments/DIGIT-Works/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/modules/works/src/pages/employee/Checklist/configTest.js).

<figure><img src="/files/kIR5lHHTblsVXebnThHx" alt=""><figcaption></figcaption></figure>

### Multiple Cards With Navigation Menu On A Single Card <a href="#multiple-cards-with-navigation-menu-on-a-single-card" id="multiple-cards-with-navigation-menu-on-a-single-card"></a>

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

Multiple options can be selected.

<figure><img src="/files/g1bZsBMGn1ug0g2ABCWi" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/pre-defined-screens-in-digit-ui/create-screen-formcomposer.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.