Bubble：ドラッグ＆ドロップで並び替え
↓サンプルはこちら↓
https://plug-in-95854.bubbleapps.io/version-test/drag_drop_1?debug_mode=true
プラグインをインストール
データ
下記の様にデータを準備する
デザイン
①下図の通りにエレメントを設置する
※Drop Area、Drag/drop Groupは、上図と同じ順に配置する。
Input、Groupは、どこに配置してもOK。
※Drop Areaはの高さは、4px以上に設定しておく。
②各エレメントのAppearanceを下図の通り設定する
③各DropAreaのConditionalを下図の通り設定する
④Input、GroupのThis element is visible on page loadeの
チェックを外す。
ワークフロー
DropArea 前 にドロップされた時
DropArea 次 にドロップされた時
※下図の様に、最終行の次のthingは存在しないが、
「次の従業員のオーダーナンバー」は、
最終行のオーダーナンバー＋1となる。
参考記事
Bubble：プラグイン記事リンク
Bubble：EnterキーでSubmitしない方法
下図の様に設定すると、EnterキーではSubmitしなくなるが、
エレメントが半透明に表示される。要研究。
Bubble：スライドショーのプラグイン
Wonderful Image Slider
特徴
- ナビゲーションドットが画像に重なるように表示される
- 要素を全て埋めるように画像を表示できる（縦横の引き延ばし無し）
使い方
①Visual Elements内のWonderful Image Slider V2を設置
②Image Listに表示させたいデータを設定
③その他の設定
等々・・・
Slick Slideshow
特徴
- ナビゲーションドットが画像の下に表示される
- 要素を全て埋めるように画像を表示すると、縦横の引き延ばしが生じる
使い方
①Visual Elements内のSlidershowを設置
②表示させたいデータを設定
③その他の設定
等々・・・
Bubble：Inputのバリデーションチェックについて
前提
Inputは、Content Formatにて何を設定するかにより、様々なバリデーションチェックが働く。条件を満たさないデータを登録しようとしても、Inputの枠が赤く表示されてデータを登録することができない。
ただし、チェックがなされるには、下記２点を満たしている必要がある。
①登録するFieldに紐づけられている
②This input shuld not be emptyにチェックしている
②を満たしていない状態で実装すると、条件を満たさないデータが入力された場合、当該Fieldが空の状態で登録されるので注意が必要。
ただし、Sign the user upの場合は、EmailとPasswordがデフォルトで必須になっており、Inputと紐づけしない状態で実装しようとすると、「アドレス／パスワードを入力してください。」というメッセージが表示される。また、Inputと紐づけした上でThis input shuld not be emptyが未チェックの状態でも同メッセージが表示される。
Content Format毎のバリデーション
●Text: 文字、または数字の列（最大値の設定が可能）
●Email: メールアドレス（@が含まれるかどうか）
●Password: 文字列（パスワードポリシーに合致しているかどうか）
●Integer: 整数（最大値と最小値の設定が可能）
●Decimal: 小数（最大値と最小値の設定が可能）
●Address: 住所（googlemapによって、住所が有効かどうか自動判定されます）
●US Phone: 次のようなアメリカ式の番号表示かどうか (xxx) yyy-zzzz.
●Percentage: パーセント（最大値と最小値の設定が可能）
●Currency: 通貨（最大値と最小値の設定が可能）
●Date: 日付。mm/dd/yyyy
●Date_2: 日付。dd.mm.yyyy.
（日付の入力には、Date/TimePickerが便利）
●Text (numbers only): 文字列（数字のみ／最大値の設定が可能）
