Cloud - controlling FormFunction[ ] width and number of inputs in a row

Question

Is it possible to control the width of FormFunction? Related, is it possible to have more than 4 inputs in a row in FormFunction? Two code examples. Example 1 produced a row of 4 inputs.

cd[E4] = CloudDeploy[
FormFunction[
FormObject[
"DTS" -> CompoundElement[<|
   "Year" -> Range[2010, 2018],
   "Month" -> Range[1, 12],
   "Day" -> Range[1, 30],
   "Hour" -> Range[12]
   |>],
ImageFormattingWidth -> Infinity,
AppearanceRules -> <|"ItemLayout" -> "Vertical"|>,
FormLayoutFunction -> 
 Function[Grid[{{#["Year"], #["Month"], #["Day"], #["Hour"]}}]]
],
({#["Year"], #["Month"], #["Day"], #["Hour"]}) &
]
]

Example 2 produces a column of 5 inputs. Why is it a column not a row?

cd[E5] = CloudDeploy[
FormFunction[
FormObject[
"DTS" -> CompoundElement[<|
   "Year" -> Range[2010, 2018],
   "Month" -> Range[1, 12],
   "Day" -> Range[1, 30],
   "Hour" -> Range[12],
   "Minute" -> Range[60]
   |>],
ImageFormattingWidth -> Infinity,
AppearanceRules -> <|"ItemLayout" -> "Vertical"|>,
FormLayoutFunction -> 
 Function[
  Grid[{{#["Year"], #["Month"], #["Day"], #["Hour"], #[
      "Minute"]}}]]
],
({#["Year"], #["Month"], #["Day"], #["Hour"], #["Minute"], #[
   "Second"]}) &
]
]

It seems FormFunction is regulating the width and number of inputs per row. This does not seem to be the case for FormObject however,

CloudDeploy[
FormObject[
<|
"Year" -> Range[2010, 2018],
"Month" -> Range[1, 12],
"Day" -> Range[1, 30],
"Hour" -> Range[12],
"Minute" -> Range[60],
"Second" -> Range[60],
"more" -> Range[10],
"even more" -> Range[10],
"how many more" -> Range[10]
|>,
FormLayoutFunction -> 
Function[
Grid[{{#["Year"], Spacer[5], #["Month"], Spacer[5], #["Day"], 
   Spacer[5], #["Hour"], Spacer[5], #["Minute"], 
   Spacer[5], #["Second"], Spacer[5], #["more"], 
   Spacer[5], #["even more"], Spacer[5], #["how many more"]}}]]

] ]

the problem with FormObject is I don't see a good way of collecting and operating on the variable values. FormFunction has a very convenient way of getting at input values and operating on them directly. I don't see how to do the same things with FormObject, for example collecting the variable values and applying a CloudPut.

Answer 1

Sure thing, I wanted to generalize it some so here we go...

Create some input controls. inputs = <| Table[FromCharacterCode[96 + i, "UTF8"] -> Range[5], {i, 15}]|>;

Now CloudDeploy the FormObject directly:

cd[FO] = CloudDeploy[
FormObject[
inputs,
ImageFormattingWidth -> Infinity,
AppearanceRules -> <|"ItemLayout" -> "Vertical"|>,
FormLayoutFunction -> 
Function[
 Grid[{{#1["a"], #1["b"], #1["c"], #1["d"], #1["e"], #1["f"], #1[
     "g"], #1["h"], #1["i"], #1["j"], #1["k"], #1["l"], #1[
     "m"], #1["n"], #1["o"]}}]]
]
]

Results in a very tight grouping of controls starting at the very left edge of the page. It's easy enough to add a little formatting and/or HTML to make this very useful.

CloudDeploy the Formfuntion with FormLayoutFunction -> Grid...

cd[GRID] = CloudDeploy[
FormFunction[
FormObject[
inputs,
ImageFormattingWidth -> Infinity,
AppearanceRules -> <|"ItemLayout" -> "Vertical"|>,
FormLayoutFunction -> 
 Function[
  Grid[{{#1["a"], #1["b"], #1["c"], #1["d"], #1["e"], #1["f"], #1[
      "g"], #1["h"], #1["i"], #1["j"], #1["k"], #1["l"], #1[
      "m"], #1["n"], #1["o"]}}]]
],
{#1["a"], #1["b"], #1["c"], #1["d"], #1["e"], #1["f"], #1["g"], #1[
  "h"], #1["i"], #1["j"], #1["k"], #1["l"], #1["m"], #1["n"], #1[
  "o"]} &
]
]

Results in a set of controls running on to the right outside the FormFuntion formatted area making it usable but not very presentable.

Now CloudDeploy with FormLayoutFunction -> Row...

cd[ROW] = CloudDeploy[
FormFunction[
FormObject[
inputs,
ImageFormattingWidth -> Infinity,
AppearanceRules -> <|"ItemLayout" -> "Vertical"|>,
FormLayoutFunction -> 
 Function[
  Row[{#1["a"], #1["b"], #1["c"], #1["d"], #1["e"], #1["f"], #1[
     "g"], #1["h"], #1["i"], #1["j"], #1["k"], #1["l"], #1[
     "m"], #1["n"], #1["o"]}]]
],
{#1["a"], #1["b"], #1["c"], #1["d"], #1["e"], #1["f"], #1["g"], #1[
  "h"], #1["i"], #1["j"], #1["k"], #1["l"], #1["m"], #1["n"], #1[
  "o"]} &
]
]

Results in a wrap around inside the FormFunction formated area so usable and presentable but the tightness of the CloudDeploy[ FormObject... ] inside a larger formatted area for CloudDeploy[ FormFunction... ] would be just right --- says baby bear.