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.
What We Are Going to Do
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.
Create a new View and name it
gridForm
.Place a Container, name it
cntMain
, and set up properties as follows:Horizontal Alignment ->
Center
; Vertical Alignment ->Middle
; Item Flex -> Stretch
Into
cntMain
put a Box called itgridBox
. Its properties are the following:Vertical Alignment ->
Middle
; Background ->#FDFEE2
; Shadow ->Medium
; Padding ->Wide
; Width ->70%
;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.
Place a Grid into
gridBox
and name it gridForm. Set up its Item Flex ->Stretch
and keep original Columns ->12
.
2. Create a Form Header
Playing with design is essential. Building applications is not just about functionality but even also about feeling.
Place a Container and name it
gridHeader
.Set up its properties as follows: Horizontal Alignment ->
Center
; Vertical Alignment ->Middle
.Screen Base Position -> X ->
3
; Y ->3
; Width ->6
; Height ->8
Put two Text components into the
gridHeader
and name themformName
;subTitle
forName
properties: Value -> "Adapptio Grid Form
"; Text Style ->Bold
; Font Size ->XXXLarge
subTitle
properties: Value -> "Easy, Intuitive and Fast Composition of A Forms
"; Font Size ->Medium
3. Placing a Form Components
Place all forms components into the gridForm
following step by step.
Spacer -> ID ->
spacerHeader
; Foreground ->TEXT
; Height ->1px
; Spacing ->Narrow
;Screen Base Position -> X ->
1
; Y ->11
; Width ->10
; Height ->1
Options -> ID ->
fldGender
; Add two Items ->Male
Female
; Placeholder -> "Gender
";Screen Base Position -> X ->
1
; Y ->14
; Width ->2
; Height ->6
Text Input -> ID ->
inpFirstName
; Label Value -> "First Name
"Screen Base Position -> X ->
1
; Y ->20
; Width ->3
; Height ->6
Text Input -> ID ->
inpSurename
; Label Value -> "Surename
"Screen Base Position -> X ->
1
; Y ->27
; Width ->3
; Height ->6
Text Input -> ID ->
inp
Email; Label Value -> "Email Address
"Screen Base Position -> X ->
1
; Y ->34
; Width ->3
; Height ->6
Text Input -> ID ->
inpOccupation
; Label Value -> "Occupation
"Screen Base Position -> X ->
1
; Y ->41
; Width ->3
; Height ->6
Text Input -> ID ->
inpSatisfactionOutput
; Value -> //*adding logic in upcoming paragraphScreen Base Position -> X ->
8
; Y ->14
; Width ->3
; Height ->4
Options -> ID ->
optField
; Add two Items ->I will stay faithful to the Adapptio
I'm not interested in the product
; Type ->Radio Group
Screen Base Position -> X ->
4
; Y ->13
; Width ->4
; Height ->12
Range -> ID ->
rngSatisfaction
; Label Value -> "Product Satisfaction
"Screen Base Position -> X ->
8
; Y ->19
; Width ->3
; Height ->6
Text Area -> ID ->
txtMessage
; Placeholder -> "Let us know how happy you are with Adapptio
"; Label Value -> "Text Message
"Screen Base Position -> X ->
5
; Y ->26
; Width ->6
; Height ->21
Spacer -> ID ->
spacerFooter
; Foreground ->TEXT
; Height ->1px
; Spacing ->Narrow
;Screen Base Position -> X ->
1
; Y ->49
; Width ->10
; Height ->1
Button -> ID ->
btnSendMessage
; Value -> "Send Message
"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.
Set up
rngSatisfactionOutput
Value -> ƒx("From " + rngSatisfaction.value.from + "% to " + rngSatisfaction.value.to + "%"
)
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.
Last updated