Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Button Loading

Button Loading UIパターンを使用すると、すぐに実行されないアクションを呼び出し、視覚的なヒントを示し、再び使用可能になるまでボタンのクリックを無効にすることができます。

Button Loading UIパターンの使用方法

  1. Service StudioのツールボックスでButton Loadingを検索します。

    Button Loadingウィジェットが表示されます。

  2. ツールボックスから、Button Loadingウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    この例では、メインコンテンツ領域にある既存のフォームにウィジェットをドラッグしています。

    デフォルトで、Button LoadingウィジェットにはButtonウィジェットが含まれています。ボタンのテキストを「Create New User」に変更します。

  3. Button Loadingウィジェットの状態を制御する新しいローカル変数(Boolean型)を作成します。この例では、「CreatingNewUser」という名前を付け、デフォルト値を[False]に設定します。

  4. また、この例ではShowLoadingAndLabelプロパティを[False]に設定し、ボタンのロジックの実行中にスピナーが表示されないようにします。

  5. Buttonウィジェットをダブルクリックして、必要なロジックを追加します。この例では、ButtonOnClickアクションで新しいユーザーを作成します。さらに、Button LoadingウィジェットにAssignロジックを追加します。最初のAssignでは、CreatingNewUserを[False]に設定します。これにより、スピナーが表示されなくなります。2つ目のAssignでは、CreatingNewUserを[True]に設定します(これら2つのAssignの間にロジックを追加します)。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

Result

プロパティ

プロパティ 説明
IsLoading(Boolean型): 必須 Trueの場合、ボタンに読み込み中のスピナーが表示されます。Falseの場合、ボタンに読み込み中のスピナーが表示されません。
ShowLoadingAndLabel(Boolean型): オプション Trueの場合、ラベルの横に読み込み中のスピナーが表示されます。Falseの場合、ラベルの下に読み込み中のスピナーが表示されます。これがデフォルトです。
ExtendedClass(Text型): オプション Button Loading UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるButton Loading UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるButton Loading UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?