# 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](/files/XGOswkLKyOJczjiUQRhJ)

### 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]" %}
![](/files/i6t3y2VbZ1KRPw9Ha7h6)
{% 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]" %}
![](/files/pJsr3UDVj4Ja8UuPUlAL)
{% endtab %}

{% tab title="Current Components\[gridView]" %}
![](/files/KC0EL1txjrvJO2aWvvnR)
{% 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]" %}
![](/files/T0GH1wzcSxdLB1svHz5f)
{% endtab %}

{% tab title="Current Components\[gridView]" %}
![](/files/FWeIF1LxIVpLICRs3Q9s)
{% 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]" %}
![](/files/l0FLrgfQqzMpeMBGXfGC)
{% endtab %}

{% tab title="Data Explorer\[rngSatisfaction]" %}
![](/files/7IKVKkrOl0KvecLbg9YL)
{% 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.


---

# Agent Instructions: 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:

```
GET https://docs.adapptio.com/working-with-adapptio/how-to/layouts/grid-form-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.