アイコンを使用する
アイコンとは、エンドユーザーが画面上の機能または情報を見分けやすくするための小さなピクトグラムまたはシンボルです。OutSystemsでは、アプリケーションのインターフェイスに使用できるビルドインアイコンが多数用意されています。
モバイルアプリでアイコンを使用するには、以下の手順を実行します。
- Iconウィジェットをウィジェットツールボックスからドラッグし、画面にドロップします。
- 使用するアイコンを選択し、［OK］をクリックします。
- アイコンのサイズを選択します。
Webアプリでアイコンを使用するには、以下の手順を実行します。
- ［Interface］タブで、［Rich Widgets］に移動してIconブロックを画面にドラッグします。
- Nameプロパティのドロップダウンリストを展開し、表示するアイコンを選択します。
モバイルアプリの例
場所の検索やレビューができるモバイルアプリケーションGoOutで、各場所の住所と電話番号の横にアイコンを表示し、エンドユーザーが各情報のカテゴリを容易に見分けられるようにします。
各場所の情報にアイコンを追加するには、以下の手順を実行します。
- PlaceInfoブロックを開きます。
- 場所の住所を表示している式の左にIconウィジェットをドラッグします。
- ホームアイコンを選択します。
- 電話番号を表示している式の左に別のIconウィジェットをドラッグします。
Webアプリの例
GoOutアプリケーションのWeb版であるGoOutWebアプリケーションで、場所の電話番号とWebサイトの横にアイコンを表示し、エンドユーザーが情報を容易に見分けられるようにします。
場所詳細にアイコンを追加するには、以下の手順を実行します。
- PlaceInfoMapブロックを開きます。
- ［Interface］タブで、［Rich Widgets］に移動して電話番号を表示している式の左にIconブロックをドラッグします。
- Nameプロパティのリストから電話アイコンを選択します。
- Webサイトを表示している式の左に別のIconブロックをドラッグします。
- Nameプロパティのドロップダウンリストを展開し、
external_linkアイコンを選択します。
