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

What We Are Going to Do

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]

View[gridForm]

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.

Current View[gridView]

Current Components[gridView]

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

Current View[gridView]

Current Components[gridView]

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 -> inpEmail; 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 + "%")

Code Editor[rngSatisfactionOutput]

Data Explorer[rngSatisfaction]

rngSatisfactionOutput(ƒx)

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.