App with "Form" connected to SharePoint list...can't get the layout right

[mgudites]

I'm trying to build an app that we're going to use for invoicing. What I need is a 5x8 form (5 columns, 8 rows) that pushes data to a SharePoint list. I feel like I must be missing something easy here and I need some suggestions. The SharePoint connectivity part is already working, it's the layout of the form that's off.

1. With "Snap To" columns enabled, it'll only let me pick 4 or 6 columns for the layout. All I really need is 5 but that's fine, I can work with 6.

2. When I pick 6 columns, this is what it does (see pic). I'm by no means a PowerApps expert at this point but that looks like 3 columns to me. 

3. What's with all the white space / why is it so difficult to move fields around and just make this thing conform to the way I want it to look?!?

All I'm ultimately looking for is to have a tightly spaced grid where users can enter this data, and it goes back to my SharePoint list. Why is this all so clunky / what am I missing? Is the built in "Form" feature not the ideal way to be doing this?

Here is an mockup of what I'm trying to get this to look like.

[RandyHayes]

@mgudites 

If you are dealing with a single record - then the Form is the best component to use!!

Layout in the form is pretty generic.  There is not a lot of flexibility without a lot of work.

However, the good news is that you can use the Form (and all of its powerful features and functionality) but then use your own interface for it.

Take a look over this video on forms.  It is a very lengthy training video with just about everything you ever wanted to know about forms.

Part 2 - Styling and Part 3 - Super Forms will be the most informative parts of the video as they discuss styling the form with the standard layout and super forms goes on to show how to separate the interface from the form without losing the functionality of the form.

Now...that all said - your mockup does not look like a Form (single record of information), it looks more like multiple records of information - in which case, a form is NOT what you want anyway!

I hope this is helpful for you.

[mgudites]

---

@RandyHayes wrote:

@mgudites 

If you are dealing with a single record - then the Form is the best component to use!!

Layout in the form is pretty generic.  There is not a lot of flexibility without a lot of work.

However, the good news is that you can use the Form (and all of its powerful features and functionality) but then use your own interface for it.

Take a look over this video on forms.  It is a very lengthy training video with just about everything you ever wanted to know about forms.

Part 2 - Styling and Part 3 - Super Forms will be the most informative parts of the video as they discuss styling the form with the standard layout and super forms goes on to show how to separate the interface from the form without losing the functionality of the form.

Now...that all said - your mockup does not look like a Form (single record of information), it looks more like multiple records of information - in which case, a form is NOT what you want anyway!

I hope this is helpful for you.

---

Thanks, I'll check out the videos. FWIW, it IS a single record of information -- my SharePoint list has 40 fields, each corresponding to one of the cells in my mockup. Each form submission = one new SharePoint list item.

Regardless though..........why does selecting "6" columns not allow me to use "6" columns?!

[RandyHayes]

@mgudites 

The column numbers determines a "grid" of sorts to the form.  It does not mean that you would have 6 columns.

If you have it set to six columns for example and you have a datacard that would span 4 columns next to a datacard that spans 2 columns, then they would both be in the same row.

If the second datacard spans 3 columns instead of 2, then the second datacard would end up on a new row below the first.

In general, for the most flexibility in your form layout you want to have the columns set to 12 (the max) and the snap turned off.  

Setting it to 12 means that there are 12 "grids" in the form to align to.

[mgudites]

---

@RandyHayes wrote:

@mgudites 

The column numbers determines a "grid" of sorts to the form.  It does not mean that you would have 6 columns.

---

Wow that is not remotely intuitive. OK well, I will play around with it -- thanks!

[RandyHayes]

@mgudites 

Not all is intuitive...some is just "learn as you go"! 

The best way to kind of understand how the columns relates as a table is to look at the grid system in things like CSS Bootstrap.   Sort of, kind of!  It's not exactly one-to-one with the form, but in general, when you select a columns value, it, in a sense, uses one of the styles for rendering that will fit that width in a table.  Kind of hard to explain if you're not familiar with all of that, but as time goes, it makes more sense.

Hopefully the change I suggested helps resolve the problem for you though.

[russ-parks]

Personally I would ditch the form and use text inputs. Style the whole thing as you like it, then use a patch "OnSubmit' button to put the records in whatever table you need them in. 

If you would rather use the form, you can still do the same thing. Setup the form and link it to the table, then create nice and pretty text box inputs, sliders, switches etc. and link them individually to the form. 

From there, make the form invisible...all good 🙂