装飾スライダーの構成

入力フォーム画面で数値入力用の色付きスライダーオプションを作成します。装飾スライダーには、視覚的な表現を支援するために特定の色とラベルに関連付けることができるセクションが含まれています。これらのラベルは翻訳可能です。

始める前に

必要なロール：admin

このタスクでは、数値入力のスライダーオプションを追加する前に、入力フォーム画面の基礎がすでに構成されていることを前提としています。詳細については、「入力フォーム画面を構成する」を参照してください。

このタスクについて

スライダーのレンダリングタイプの作成は、他のレンダリングタイプ(整数、線、パーセンテージ)よりも複雑です。構成には、複数の入力属性の作成が含まれます。必要な属性は [最小] です。Max、および StepSize です。数値スライダーで使用できる入力属性の完全なリストについては、「 数値の表示タイプと互換性のある入力属性」を参照してください。

Decoration という入力属性を追加して、スライダーをカラフルでセグメント化された外観にする必要があります。装飾スライダーには 2 〜 8 個のセクションがあり、開始値と終了値を定義します。開始値は前のエントリの終了値と一致する必要があります。さらに、各セクションの色を選択する必要があります。4 つのセクションが定義された JSON サンプルスクリプトが用意されています。このスクリプトは編集可能です。

装飾スライダータイプを構成するときに、翻訳された値を追加して、ユーザーが選択した言語でスライダーを表示できるようにするオプションがあります。詳細については、「装飾スライダーの変換値の構成」を参照してください。

手順

1. 移動先 すべて > システムモバイル > モバイルアプリビルダー.
   モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
2. 作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。
   モバイルアプリビルダー カテゴリのホーム画面が表示されます。
3. [画面] カテゴリを選択し、入力を構成する入力フォーム画面を選択します。
4. フォームの [入力] セクションまで下にスクロールし、変更する入力を選択するか、[ 新規] を選択して入力を作成します。
   [入力] フォームが表示されます。入力の構成の詳細については、「 入力フォーム画面の入力を構成する」を参照してください。
5. [設定] 領域内の [入力タイプ ] フィールドで、[ 数値] を選択します。
6. [入力属性] 領域で [新規 ] を選択します。
7. [名前] フィールドから [RenderType] を選択し、[値] フィールドから [スライダー] を選択して、[保存] を選択します。
8. 最小、最大、およびステップサイズの入力属性を作成して保存し、それらの値を定義します。
   構成の詳細については、「数値入力のスライダーオプションの構成」を参照してください。

   注:

   RenderType、Min、Max、および StepSize は、スライダーの必須入力属性です。その他の入力属性はオプションです。入力属性の完全なリストについては、トピック 入力可能な入力フォーム画面の属性内の「数値入力」セクションを参照してください。
9. [入力属性] 領域で [新規 ] を選択します。
10. [名前] フィールドから [装飾] を選択します。
    JSON スクリプトがデフォルトのスクリプトとともに表示され、必要に応じて編集できます。

      "Range": [ 
    
        { 
          "Label": "Critically Low", 
          "StartValue": 0, 
          "EndValue": 10, 
          "Color": "#000000" 
        }, 
        { 
          "Label": "Low", 
          "StartValue": 10, 
          "EndValue": 50, 
          "Color": "Slider-2" 
        }, 
        { 
          "Label": "Medium", 
          "StartValue": 50, 
          "EndValue": 75, 
          "Color": "Slider-1" 
        }, 
        { 
          "Label": "High", 
          "StartValue": 75, 
          "EndValue": 100, 
          "Color": "Slider-0" 
        } 
      ] 
    } 

    このサンプルスクリプトは、スライダー内に含まれる 4 つのセクションをリストします。装飾スライダーには、2 〜 8 つのセクションを含めることができます。各セグメントの値は次のとおりです。

    • ラベル:各セクションに付けられた名前。この例では、[非常に低い (Critically Low)]、[低 (Low)]、[中 (Medium)]、および [高 (High)] です。名前は編集可能です。
      注:

      ラベル値内に含まれる名前は翻訳できます。これを行うには、二重中かっこを ラベル 値に追加する必要があります。たとえば、 Medium は {{Medium}} になります。詳細については、「装飾スライダーの変換値の構成」を参照してください。
    • StartValue と EndValue:これらは任意の値にすることができます。通常、これらの値はセクションの数で割り切れます。1 つのセクションの StartValue は、前のセクションの EndValue に対応している必要があります。
    • 色:色の値は、現在のモバイルテーマの HEX コードまたは変数のラベルのいずれかです。JSON スクリプトには、次のデフォルトの色が用意されています。
      • #000000 は緑色に相対します。
      • スライダー-1 は黄色に対応します。
      • スライダー-2 はオレンジ色に対応します。
      • スライダー-3 は赤に対応します。
      変数の完全なリストについては、次に移動します: すべて > sys_ux_style.list をクリックし、「モバイルカラーのデフォルト」を検索します。
11. [Save (保存)] を選択します。

次のタスク

スライダーに表示される各テキスト値に翻訳されたテキストを追加できます。詳細については、「装飾スライダーの変換値の構成」を参照してください。