【Bubble】パスワードの表示/非表示設定の実装方法

みなさんこんにちは！EPICs合同会社の大熊です！

今回は新規登録などの時パスワードを入力するケースが多いと思いますが、その際にパスワードを表示させたり非表示にさせたりと切り替えが出来る方法をお伝えしていきます！

動画解説バージョンはこちら！

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

EPICs株式会社の特徴

実装イメージ

通常時はパスワードが非表示になっている

目のアイコンを押すとパスワードが表示される

今回はこのようなパスワードの表示/非表示設定の実装を解説していきます！

＜無料＞資料ダウンロード

【ノーコード開発】お役立ち資料３点セット

「ノーコード開発会社の選び方」「EPICs株式会社ノーコード開発の実績集」
「受託開発サービス概要」が同梱されたお役立ち資料セット

インプットが設置出来たらContent formatを[Password]に設定します。

SettingsのGeneralに移動し、[Expose the option to add an ID attribute to HTML elements][Expose the option to add an ID attribute to HTML elements]にチェックをします

こちらの設定を行うことで各エレメントにID Attributeを設定することができるようになります。

再びDesignページに戻りパスワードinputを選択します。
パスワードinputを選択したら最下部にあるID Attributeを入力しましょう！
(ID Attributeは使いやすいものやわかりやすいものであれば何でも構いません！)

Visual elementsからReveralを設置します。(Reveralの位置はどこでも基本的に大丈夫です。)
そしてinputの右側にお好みのアイコンを設置しましょう。

アイコンのconditionalに[Reveal (～) Toggle visible is “”yes”]にてアイコンを変更するよう設定します。

Element ActionsからRevealのToggle a Revealを選択します。
ElementにReveal を設定し、idにinputに設定したID Attributeのpwd1を設定します。

これで設定は完了です。
最後にプレビューで実装の確認をしましょう。

この記事で少しでも開発力を高めることに寄与できていたら幸いです！

Bubbleをはじめノーコード開発に関する相談があればいつでもお待ちしてます！

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！