Form input layout

Knack Community
1

Hi all,

i started creating an app using knack a year or so ago using the new builder which is great until i get to the form layout grouping when creating a page view.

Why can we not layout form inputs in the same way we can details?

It works a bit like this… i’m a picture framer by the way.

I have the following objects

  • customer
  • Order
  • Order line details

Each customer links to many orders
Each Order links to one customer
Each Order line detail links to one order

I have a page to select a customer and click submit, this creates a new order and directs me to a page where i can add multiple lines to the order. The order line object holds all the information to make the bespoke product.

i have a details view at the top display customer information, calculations for the order total based on order lines etc. Below that the form to add the order line details then a table to show the order lines added to the order with links to view, edit or delete the order line detail linked to the the order.

When it comes to the form for adding the order line details there is information that is related to each other but not other bits so want to lay it out accordingly.

See picture for an example.

layout example
layout example1414×2000 55.9 KB

in forms Knack doesn’t seem to allow me to have 2 fields next to each other in row one, then 3 fields side by side in row 2 then 1 on row 3 like it would in a details view. Knack always want to have each column matching apart from the very top row that can be slightly different.

I’ve looked at making a multi part form but i don’t think i have enough details to warrant it, also while we are doing a consultation with a customer they are likely to change their mind so being able to fill everything in, confirm then hit submit will be far easier.

As i said this was a sticking point for me over a year ago and its still doesn’t seem to be addresses. Im sure im not the only person who has come across this issue so any suggestions would be greatly received.

Simon

2

ignore the fact they are search boxes in the image, it was the quickest thing i could find in canva

3

I would love to know more about this as well. I could write the HTML but I’m not sure how I would even integrate that with Knack. I have a form I’d like to build with multiple multi-column sections, each divided from each other.

field 1      field 2
field 3      big address field line 1
field 5      big address field line 2
             big address field line 3
------------------------------------ divider
Signature Field     
-----------------------------------  divider
Signature Field          checkbox

I’d love to know how to do this through the builder, or where I would put in the custom code to do it myself.

4

I believe that you can achieve the custom layout you are seeking. However, admittedly, it can be tricky.

You first need to create “row 1” in the form with the fields of your choice.
Then when you go to create “row 2” you want to drag the field to the bottom of “row 1” - you will see a line as you drag that will shift between one large line indicating a new complete row or a line that matches the width of “row 1” fields (if that makes sense).

Review the video here at around the 2 min mark and you will see the presenter “drag” a field to the very top to create a single new row (the same can be done below rows).

Hope this helps!

2 Likes
5

The form layout builder is the most counterintuitive I’ve used in a long time, if you move something, the fields go out of place and you have to juggle to get the field to stay where you intended to, I think the knack team can do something better

6

Not to mention if you use a checkbox its height is not in synch with text boxes and throws the even ow by row out of whack !

7

Ray, I see that you mention a Checkbox in a form. How did you add it

8

Checkbox are option of Yes/No field type as are radio button.