Outsystems-Accordionで検索エリアを開閉する

今回はOutsystemsの開発ツールを使ってアプリケーションの見た目を変えていきます。



◆Accordionを使って検索ボックスの部分を開閉できるようにしてみよう
よくあるUIですね。赤字の部分を開閉できるようにてみましょう。



1.ServiceStudio(Outsystemsの開発ツール)内で部品「Accordion」を探す
 右上の検索ボックスで検索します。



2.検索エリアの部分にドラッグ&ドロップします。



3.検索エリアの部分をドラッグし、上のAccordionの中にドロップします。



4.完成系はこうなります。緑のPublishボタンを押してブラウザで確認してみます。



5.ブラウザで開いてみます。



無事に開閉できましたね。今回は検索項目が1つですが今後検索項目が増えた時開閉できたほうが下の映画情報一覧が見やすくなりますね。

以上になります。見ていただいた通り、Outsystemsでは基本的にドラッグ&ドロップで実装していきます。
また部品も豊富で早いのでお客様と打ち合わせしながら作っていくこともしばしばあり結果的に早いフィードバックを貰うことができます。