WOLFRAM

Wolfram言語 ＆ システムドキュメントセンター
高度なWebフォームの生成

高度なWebフォームの生成

概観の規則Autosubmitting
複数ページのフォームRepeatingElementとCompoundElement
動的なフォーム
FormFunctionとFormObjectは簡単なWebフォームを生成するための簡潔なインターフェースを提供するが，ここではより高度なWebフォームを生成するのに必要な方法やオプションについて説明する．
概観の規則
FormFunctionとFormObjectはオプションAppearanceRulesを取る．これはタイトル，および要素が各フィールドでどのように表示されるか等のフォームのさまざまな部分を指定するために使うことができる．

TitleとDescription

AppearanceRulesで"Title"および"Description"を使うと，フォームにタイトルやサブタイトルを加えることができる．
Wolfram Language code: CloudDeploy[FormFunction["city" -> "City", #city&, AppearanceRules -> <|"Title" -> "What's your city", "Description" -> "This form allows you to input your city"|>]]

SubmitLabelとNextLabel

"SubmitLabel"を使うと，フォームの下部にあるボタンに表示されるテキストを変更することができる．
Wolfram Language code: CloudDeploy[FormFunction["city" -> "City", #city&, AppearanceRules -> <|"SubmitLabel" -> "Go!"|>]]
同様に"NextLabel"を使うと，複数ページに渡るフォームの最後以外のフィールドすべてのテキストをカスタマイズすることができる．

テキスト以外の値

AppearanceRulesのフィールドのほとんどは文字列である必要はない．
Wolfram Language code: CloudDeploy[FormFunction["animal" -> "Animal", #animal&, AppearanceRules -> <|"SubmitLabel" -> [image], "Title" -> Import["ExampleData/turtle.jpg"], "Description" -> Style["What is this animal?", Blue] |>]]

RequiredFieldIndicator

"RequiredFieldIndicator"は必須フィールドのラベルに関数を適用する．
Wolfram Language code: CloudDeploy[FormFunction[{"required" -> "Number", "optional" -> "Number" -> 0}, Identity, AppearanceRules -> <|"RequiredFieldIndicator" -> Function[Style[#, Red]] |>]]

ItemLayout

"ItemLayout"は，要素をどのように格子に表示するかを決めるために使うことができる．空の行や列は自動的に省略される．項目のレイアウトはレスポンシブである．つまりレイアウトがブラウザウィンドウの幅に応じて変化する．特に，項目のレイアウトは携帯端末のWebブラウザでは異なって見える場合がある．
デフォルトの"Horizontal"は2×2の格子である．
Wolfram Language code: CloudDeploy[FormFunction[{"x" -> <|"Help" -> "type here"|>, "y" -> "Integer"}, Identity, AppearanceRules -> <|"ItemLayout" -> "Horizontal" |>]["x" -> "text"]]
"Inline"は同じ行に置かれるすべての要素である．
Wolfram Language code: CloudDeploy[FormFunction[{"x" -> <|"Help" -> "type here"|>, "y" -> "Integer"}, Identity, AppearanceRules -> <|"ItemLayout" -> "Inline" |>]["x" -> "text"]]
"Vertical"は同一列に置かれるすべての要素である．
Wolfram Language code: CloudDeploy[FormFunction[{"x" -> <|"Help" -> "type here"|>, "y" -> "Integer"}, Identity, AppearanceRules -> <|"ItemLayout" -> "Vertical" |>]["x" -> "text"]]
複数ページのフォーム
フォームは数ページに渡ることができる．第1引数の追加リストで複数ページのフォームを指定する．
Wolfram Language code: CloudDeploy[FormFunction[{{"first" -> "Integer"}, {"second" -> "Integer"}}, Identity]]
最初のページ以外のすべてのページは純関数として指定することができる．そうすることにより，前のページに依存する新しいページができる．
Wolfram Language code: CloudDeploy[FormFunction[{{"label" -> "String"}, {{"second", #label } -> "Integer"}&}, Identity]]
このテクニックを使うと，新しいフィールドをプログラムで作成することができる．
Wolfram Language code: CloudDeploy[FormFunction[{{"number" -> "Integer"}, Table["x" <> ToString[i] -> "String", {i, #number}]&}, Identity]]
別のページのフィールドが同じキーを持つことがある．この場合，最新の値が古いものを上書きする．
動的なフォーム
1つのフィールドが他のフィールドに依存するフォームや，両方のフィールドが同一ページに現れるフォームを定義すると便利なことがある．これはWolfram言語のテンプレート言語でTemplateSlot等のシンボルを使って行うことができる．
Wolfram Language code: CloudDeploy[FormFunction[{"state" -> "USState", "county" -> TemplateSlot["state"][EntityProperty["AdministrativeDivision", "Subdivisions"]]}, Identity]]
他のフィールドに依存するフィールドは，それらを表示する十分な情報がない限り自動的に隠されている．フィールドに依存する他のフィールドを持つフィールドは，記入されたら自動的に送信される．
Autosubmitting
フィールドをAutoSubmittingでラップすると，それが記入されたときにフォーム全体を自動的に送信させることができる．
Wolfram Language code: CloudDeploy[FormFunction[{"x" -> AutoSubmitting["Integer"], "y" -> "Integer"}, Identity]]
最初のフィールドをタイプした後で2つ目のフィールドを選ぶとフォーム全体が送信され，2つ目のフィールドの下にエラーメッセージが表示される．
RepeatingElementとCompoundElement
フォームにさまざまな数のフィールドがあると便利なことがある．RepeatingElementを使うと，フィールドを繰り返すことができる．
Wolfram Language code: CloudDeploy[FormFunction["field" -> RepeatingElement["String", {2, {1, 5}}]]]
RepeatingElementの第2引数を使うと，サブフィールドをその指標に依存させることができる．
Wolfram Language code: CloudDeploy[FormFunction["number of occupants" -> RepeatingElement[<|"Interpreter" -> "Integer", "Label" :> "room " <> ToString[i]|>, {{i, 2}, {1, 5}}]]]
CompoundElementとRepeatingElementを使って，フィールドの表を作ることができる．
Wolfram Language code: CloudDeploy[FormFunction["names" -> RepeatingElement[CompoundElement[<|"first" -> "String", "last" -> "String"|>]]]]
AppearanceRulesのオプション"AddLabel"と"DeleteLabel"を使うと，RepeatingElementのボタンのラベルをカスタマイズすることができる．
Wolfram Language code: CloudDeploy[FormFunction["field" -> RepeatingElement["String"], AppearanceRules -> <|"AddLabel" -> "Add", "DeleteLabel" -> "Delete"|>]]