Rearrange datafields

[MichaelBL]

Hi there,

I am building an app for a client and we have come to a point, where they want to rearrange some of the datafields on some of the screens.

Now I was thinking, this should be and easy matter, but boy was I wrong.

As it turns out, trying do accomplish this is absolutely nerve-racking and I have more or less come to the conclusion that it can't be done. 

All I am trying to do, is move and set the fields in my app, where ever I want them to be in the app, but there is just no way to do it. I tried doing it with configuring the X and Y axis directly, but is just not a good way to do this and it doesn't really work anyway.

I know a lot of others seem to have the same problem, but can't seem to find anyone that has found an actual solution to this.

Any ideas anyone?

Best regards,

Michael
 

[iAm_ManCat]

There is also another method that I use, and I don't usually see random re-arrangement with it.

I set the number of columns to a large number

I set the widths of the items to :

(Parent.Width-30)/X

X can then be used to define the 'column width'

So if I want three columns, I set those three cards to (Parent.Width-30)/3

..or if I want 1x 2/3width card and 2x 1/3width cards set them to:
(Parent.Width-30)/3*2

(Parent.Width-30)/3*1

(Parent.Width-30)/3*1

The key here is to have the Parent.Width-30, as the reason the form keeps arranging itself is when one of the items touches the edge it tries to edge-fit them and the whole thing goes nuts. With this method, as long your cards are less than the total form width it allows you to drag-and-drop fairly easily.

Additionally, lets say you set number of columns to 4, and then try create the example above of 3 columns, then you'd do the same step that @WarrenBelz suggested of adding a blank empty custom DataCard, except instead of setting it to 1px height I usually just set it to hidden to allow it to be unhidden and dragged around later if needs be.

There's also an additional 'hack' that I've been working with recently which is a bit fiddly to set up but essentially allows you to place things wherever you want, but does add a bit to the amount of configuring of each item - I'll have a blog going up about this sometime soon.

Cheers,

Sancho

[timl]

Wow, what an excellent tip! Thanks Sancho 🙂

[WarrenBelz]

Thanks @iAm_ManCat ,

Some interesting concepts there.

I guess I was a bit focused also on the fact that I have very uneven width cards in my forms, so the formulas would drive me mad. Also I shade every second line, so the total widths has to equal the form width (although the -x width also has possibilities). It is great to share these little things that challenge us.

[iAm_ManCat · Accepted solution]

Happy to help!

@WarrenBelz I'm glad you mentioned the alternate colouring, as that won't be an issue

What I'm doing is taking the total width and subtracting 30, then dividing that into sections, so as long as your sections add up to your total divisor then the gap on the end is always 30.

And if you want your cards to be edge-to-edge against the edge of the canvas, then just make your Gallery.X size 30 larger - this won't affect the drag-and-dropping and will make the edge seamless by making the gallery go 30 over the edge of the screen (assuming you are talking about edge-matching).

And if you want to get super granular about the widths, you could divide it by 50 or any number theoretically, like maybe use 100 so that you could think of it like percentages:
you divide that (Parent.Width-30) by 100

you have one column that you want at '33%' width, so you times it by 33

then you have another column that's 12 wide, so you times it by 12

then you have another that's 47 wide so you times by 47

then you have a final card that's 8 wide

=100 width used of the 100 you divided by

So your total 'width used' from the number you divided by is now equal and will equal (parent.width-30), so the columns always end up the same width in total - I have all my forms match their right-hand edges so that it's flush.

Hope that helps!

[Anonymous]

This is still an issue. Can confirm that this still occurs on 3 column forms. The datacards clearly fit in a row but the designer still decides to absolutely break the entire arrangement of the app including other rows. I move it somewhere and it completely ignores what I'm doing and drops it 3 rows up.
Form is set to 12 Columns, Snap to Column is off, and Width Fit for each card is off.

The way I cope with this without changing any widths is to let the designer mess it up when I drop it where it should be and then slowly move it down past each datacard one at a time until it gets to the place it needs to be.

I then open a new browser tab with the form the way it's supposed to be and fix the mess. Sometimes it takes a few tries but I find it easier to deal with. Most of the apps I have have different column widths that change throughout the form.

[WarrenBelz]

Hi @Anonymous ,

Please read this blog of mine - I use it on all my forms and it does the job.