進捗バーによる進捗

ジョー・ラニエリ
2016 年 8 月 19 日
分読み

この投稿では、ワークフローの進行状況をユーザーに表示するのに最適なツールである、利用可能な進行状況バーウィジェットの 1 つを紹介します。

アプリで複数のステップから成るプロセス (注文フォームの記入やアンケートの実施など) を実行する場合、完了までの進捗状況を視覚的に示すことで、優れたユーザーエクスペリエンスを実現できます。ここで、進行状況バーウィジェットが役立ちます。このウィジェットにより、開発者は複数の異なるスタイルを使用してエンドユーザーの進行状況を視覚的に表示し、進行状況メッセージがエンドユーザーに確実に伝わるようにすることができます。

プログレスバーウィジェットは、 Mendix 「プログレスバー」を検索すると、いくつかのプログレスバーウィジェットが表示されますが、このブログの主な焦点は Bootstrap プログレスバー Flock of Birds によって作成されたウィジェット:

Bootstrap プログレスバーウィジェットの本質は、完了のパーセンテージを示す 0 から 100 までの数字を含む適切なプログレスバーを表示することです。プログレスバーの数字の後にテキストを表示することもできます (たとえば、「75」または「75% 完了」と表示できます)。

まず最初に、ウィジェットを正しいものにリンクする必要があります。 進捗属性 (NAIST) と ブートストラップスタイル:

progress 属性は、完了した進行状況を表示する整数で、0 から 100 の範囲の数値に設定する必要があります。bootstrap スタイルは、info、danger、success のいずれかの値の場合、進行状況バーの外観を変更するために使用できます。bootstrap スタイルは、マイクロフローを介して progress 属性にリンクできるため、たとえば、「danger Bootstrap Style」では進行状況バーに 0% の進行状況が表示され、「success Bootstrap Style」では進行状況バーに 100% の進行状況が表示されます。

また、パーセンテージ値の後の進行状況バーの表示内容、アプリ内のウィジェットの幅、カラースイッチの値、バー自体の外観など、いくつかの表示設定を調整することもできます。