# Grid Form Layout

The Grid layout is commonly used to make forms, even for canvas fields gathering a lot of different components with fixed positions.

![The new form based on the Grid layout](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FmYZCeAH4N2Su3QlPsT47%2Fimage.png?alt=media\&token=4848e20b-60fe-4709-b589-d0ae5a6bc5af)

### What We Are Going to Do

{% tabs %}
{% tab title="Project Structure" %}

* [ ] View\[`gridForm`]
  * [ ] Container\[`cntMain`]
    * [ ] Box\[`gridBox`]
      * [ ] Grid\[`gridForm`]
        * [ ] Container\[`gridHeader`]
          * [ ] Text\[`formName`]
          * [ ] Text\[`subTitle`]
        * [ ] Spacer\[`spacerHeader`]
        * [ ] Options\[`fldGender`]
        * [ ] Text Input\[`inpFirstName`]
        * [ ] Text Input\[`inpSurename`]
        * [ ] Text Input\[`inpEmail`]
        * [ ] Text Input\[`inpOccupation`]
        * [ ] Text Input\[`rngSatisfactionOutput`]
        * [ ] Options\[`optField`]
        * [ ] Range\[`rngSatisfaction`]
        * [ ] Text Area\[`txtMessage`]
        * [ ] Spacer\[`spacerFooter`]
        * [ ] Button\[`btnSendMessage`]
          {% endtab %}

{% tab title="View\[gridForm]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FakdeBFWcN3Tyfu8yRfdk%2Fimage.png?alt=media\&token=9aeccc19-c2c9-4689-84bd-ce620208cc74)
{% endtab %}
{% endtabs %}

### 1. Prepare a superior Grid

The list of components can look complicated, but it is easily more than you think. Let's prepare a basic structure with Grid.

1. Create a new **View** and name it `gridForm`.
2. Place a **Container**, name it `cntMain`, and set up properties as follows:
   1. *Horizontal Alignment* -> `Center`; *Vertical Alignment* -> `Middle`; Item Flex -> Stretch
3. Into `cntMain` put a **Box** called it `gridBox`. Its properties are the following:
   1. *Vertical Alignment* -> `Middle`; *Background* -> `#FDFEE2`; *Shadow* -> `Medium`; *Padding* -> `Wide`; *Width* -> `70%`;
   2. Optionally set up *Height* -> `500px` what is handy for working with a Grid at the beginning. You can delete this property at the end of this tutorial.
4. Place a **Grid** into `gridBox` and name it gridForm. Set up its *Item Flex* -> `Stretch` and keep original *Columns* -> `12`.

{% tabs %}
{% tab title="Current View\[gridView]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FYuYAbwTqGR9dPvJiVeo3%2Fimage.png?alt=media\&token=3e6b1cf9-3af0-4b00-8e02-d0522383c41d)
{% endtab %}

{% tab title="Current Components\[gridView]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FtIEpFCPpgMqrX6DwtOYH%2Fimage.png?alt=media\&token=555cbb64-8fb6-48b1-8738-c51d9d715a52)
{% endtab %}
{% endtabs %}

### 2. Create a Form Header

Playing with design is essential. Building applications is not just about functionality but even also about feeling.

1. Place a **Container** and name it `gridHeader`.
   1. Set up its properties as follows: *Horizontal Alignment* -> `Center`; *Vertical Alignment* -> `Middle`.
   2. *Screen Base Position* -> *X* -> `3`; *Y* -> `3`; *Width* -> `6`; *Height* -> `8`
2. Put **two** **Text** components into the `gridHeader` and name them `formName`; `subTitle`
   1. `forName` properties: *Value* -> "`Adapptio Grid Form`"; *Text Style* -> `Bold`; *Font Size* -> `XXXLarge`
   2. `subTitle` properties: *Value* -> "`Easy, Intuitive and Fast Composition of A Forms`"; *Font Size* -> `Medium`

{% tabs %}
{% tab title="Current View\[gridView]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FAgm3DBjBTOHV8yotsBEk%2Fimage.png?alt=media\&token=caba44b8-aee5-4450-9c7e-481ff8f6ff0e)
{% endtab %}

{% tab title="Current Components\[gridView]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FkxfvotYIAzGmLmiOrDMo%2Fimage.png?alt=media\&token=133d4f8f-9918-4940-a15c-b7ed48637921)
{% endtab %}
{% endtabs %}

### 3. Placing a Form Components

Place **all forms components** into the `gridForm` following step by step.

1. **Spacer** -> *ID* -> `spacerHeader`; *Foreground* -> `TEXT`; *Height* -> `1px`; *Spacing* -> `Narrow`;
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `11`; *Width* -> `10`; *Height* -> `1`
2. **Options** -> *ID* -> `fldGender`; Add two *Items* -> `Male` `Female`; *Placeholder* -> "`Gender`";
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `14`; *Width* -> `2`; *Height* -> `6`
3. **Text Input** -> *ID* -> `inpFirstName`; *Label Value* -> "`First Name`"
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `20`; *Width* -> `3`; *Height* -> `6`
4. **Text Input** -> *ID* -> `inpSurename`; *Label Value* -> "`Surename`"
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `27`; *Width* -> `3`; *Height* -> `6`
5. **Text Input** -> *ID* -> `inp`Email; *Label Value* -> "`Email Address`"
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `34`; *Width* -> `3`; *Height* -> `6`
6. **Text Input** -> *ID* -> `inpOccupation`; *Label Value* -> "`Occupation`"
   1. *Screen Base Position* -> *X* -> `1`; *Y* -> `41`; *Width* -> `3`; *Height* -> `6`
7. **Text Input** -> *ID* -> `inpSatisfactionOutput`; *Value* -> *//\*adding logic in upcoming paragraph*
   1. *Screen Base Position* -> *X* -> `8`; *Y* -> `14`; *Width* -> `3`; *Height* -> `4`
8. **Options** -> *ID* -> `optField`; Add two *Items* -> `I will stay faithful to the Adapptio` `I'm not interested in the product`; *Type* -> `Radio Group`
   1. *Screen Base Position* -> *X* -> `4`; *Y* -> `13`; *Width* -> `4`; *Height* -> `12`
9. **Range** -> *ID* -> `rngSatisfaction`; *Label Value* -> "`Product Satisfaction`"
   1. *Screen Base Position* -> *X* -> `8`; *Y* -> `19`; *Width* -> `3`; *Height* -> `6`
10. **Text Area** -> *ID* -> `txtMessage`; *Placeholder* -> "`Let us know how happy you are with Adapptio`"; *Label Value* -> "`Text Message`"
    1. *Screen Base Position* -> *X* -> `5`; *Y* -> `26`; *Width* -> `6`; *Height* -> `21`
11. **Spacer** -> *ID* -> `spacerFooter`; *Foreground* -> `TEXT`; *Height* -> `1px`; *Spacing* -> `Narrow`;
    1. *Screen Base Position* -> *X* -> `1`; *Y* -> `49`; *Width* -> `10`; *Height* -> `1`
12. **Button** -> *ID* -> `btnSendMessage`; *Value* -> "`Send Message`"
    1. *Screen Base Position* -> *X* -> `9`; *Y* -> `51`; *Width* -> `2`; *Height* -> `4`

### 4. Adding Logic to Range Text Field

Making the `rngSatisfactionOutput` life is realized by referencing values from the existing **Range** component.

1. Set up `rngSatisfactionOutput` *Value* -> ƒx(`"From " + rngSatisfaction.value.from + "% to " + rngSatisfaction.value.to + "%"`)

{% tabs %}
{% tab title="Code Editor\[rngSatisfactionOutput]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FGt3zgOia79XD8QZaVo0G%2Fimage.png?alt=media\&token=353dc612-ea64-46e7-a6f6-2b3b76c4e21b)
{% endtab %}

{% tab title="Data Explorer\[rngSatisfaction]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FoHFzOcCoiKnkrx1neuxq%2Fimage.png?alt=media\&token=0ed94e7c-e30c-43c4-8c6e-93de87493126)
{% endtab %}

{% tab title="rngSatisfactionOutput(ƒx)" %}

```
"From " + rngSatisfaction.value.from + "% to " + rngSatisfaction.value.to + "%"
```

{% endtab %}
{% endtabs %}

### The Conclusion

Creating forms using a grid layout is fast and effective, especially when you are familiar with form components and their properties. Try to make your form with referencing values.