チュートリアル: すべての UI ウィジェットのデモ

備考

プレビュー

このリファレンスチュートリアルは、 user-defined-operator-v0.1.0スキーマで使用可能なすべての UI ウィジェットを実行するLakeflow Designer 用のPython UDFオペレーターを構築します。独自のオペレーターを作成する際のテンプレートとして使用してください。より詳しい概要については、 Lakeflow Designer のユーザー定義演算子」を参照してください。

概要

この演算子は、利用可能なすべての UI ウィジェットタイプを使用してパラメーターを受け入れるデモ UDF です。すべての入力値を説明的な文字列に連結し、各ウィジェットが関数にデータを渡す方法を簡単に確認できるようにします。

利用可能なウィジェットの種類は次のとおりです。

ウィジェット	説明	データ型
`expression`	入力ポートからの列/式ピッカー	式
`input`	1行テキスト入力	string
`textarea`	複数行テキストエリア	string
`checkbox`	チェックボックスの切り替え	Boolean
`toggle`	スイッチトグル	Boolean
`number`	最小値/最大値を含む数値入力	数字
`slider`	範囲指定の数値スライダー	数字
`select`	単一選択ドロップダウン（静的値）	string
`select`	単一選択ドロップダウン（入力列から）	string
`multi-select`	複数選択（静的値）	文字列[]
`multi-select`	複数選択（入力列から）	文字列[]

ステップ 1: Python関数を作成してテストする

まず、さまざまなタイプをすべて受け入れるPython関数を定義します。この関数は、デモンストレーションの目的で、すべての入力を単純に説明的な文字列に連結します。

Python
def concat_all_widgets(
    # expression widget - column value from input
    expr_value: str,
    # input widget - single line text
    text_input: str,
    # textarea widget - multi line text
    text_area: str,
    # checkbox widget - boolean
    checkbox_flag: bool,
    # toggle widget - boolean
    toggle_flag: bool,
    # number widget - numeric input
    number_value: float,
    # slider widget - numeric slider
    slider_value: float,
    # select widget with static options
    select_static: str,
    # select widget with inputColumns options
    select_column: str,
    # multi-select widget with static options (array of strings)
    multi_select_static: list,
    # multi-select widget with inputColumns options (array of strings)
    multi_select_columns: list
) -> str:
    """
    Concatenates all input parameters into a descriptive string.
    This demonstrates all UI widget types available in user-defined operators.
    """
    lines = [
        f"1: Expression (Column Picker) -> {expr_value}",
        f"2: Text Input (Single Line) -> {text_input}",
        f"3: Text Area (Multi-Line) -> {text_area}",
        f"4: Checkbox Option -> {checkbox_flag}",
        f"5: Toggle Switch -> {toggle_flag}",
        f"6: Number Input -> {number_value}",
        f"7: Slider Value -> {slider_value}",
        f"8: Select (Static Options) -> {select_static}",
        f"9: Select (From Input Columns) -> {select_column}",
        f"10: Multi-Select (Static Options) -> [{', '.join(multi_select_static or [])}]",
        f"11: Multi-Select (From Input Columns) -> [{', '.join(multi_select_columns or [])}]"
    ]
    return "\n".join(lines)

次のコードで関数をテストします。

Python
result = concat_all_widgets(
    expr_value="column_value_123",
    text_input="Hello World",
    text_area="Line 1\nLine 2\nLine 3",
    checkbox_flag=True,
    toggle_flag=False,
    number_value=42.5,
    slider_value=75.0,
    select_static="option_b",
    select_column="amount",
    multi_select_static=["tag1", "tag3"],
    multi_select_columns=["col1", "col3"]
)
print(result)

ステップ 2: YAML 構成を作成する

YAML 構成は、 Lakeflow Designer でオペレーターがどのように表示されるかを定義します。この例では、利用可能なすべてのウィジェットタイプを示します。

YAML
schema: user-defined-operator-v0.1.0
type: uc-udf
name: All Widgets Demo
id: demo.all_widgets
version: '1.0.0'
description: >
  A demonstration UDF that showcases all available UI widgets.
config:
  type: object
  properties:
    # ============================================
    # EXPRESSION WIDGET
    # ============================================
    expr_value:
      type: string
      format: expression
      title: 1. Expression (Column Picker)
      examples:
        - 'Select a column or enter an expression'
      x-ui:
        widget: expression
        port: in

    # ============================================
    # INPUT WIDGET (single-line text)
    # ============================================
    text_input:
      type: string
      title: 2. Text Input (Single Line)
      default: default text
      examples:
        - 'Enter a single line of text'
      x-ui:
        widget: input

    # ============================================
    # TEXTAREA WIDGET (multi-line text)
    # ============================================
    text_area:
      type: string
      title: 3. Text Area (Multi-Line)
      default: Sample text
      examples:
        - 'Enter multiple lines of text here...'
      x-ui:
        widget: textarea
        rows: 3

    # ============================================
    # CHECKBOX WIDGET (boolean)
    # ============================================
    checkbox_flag:
      type: boolean
      title: 4. Checkbox Option
      default: true
      x-ui:
        widget: checkbox

    # ============================================
    # TOGGLE WIDGET (boolean switch)
    # ============================================
    toggle_flag:
      type: boolean
      title: 5. Toggle Switch
      default: false
      x-ui:
        widget: toggle

    # ============================================
    # NUMBER WIDGET (numeric input with min/max)
    # ============================================
    number_value:
      type: number
      title: 6. Number Input
      default: 50
      minimum: 0
      maximum: 100
      examples:
        - 'Enter a number (0-100)'
      x-ui:
        widget: number

    # ============================================
    # SLIDER WIDGET (numeric slider)
    # ============================================
    slider_value:
      type: number
      title: 7. Slider Value
      default: 50
      minimum: 0
      maximum: 100
      x-ui:
        widget: slider
        step: 5

    # ============================================
    # SELECT WIDGET with STATIC options
    # ============================================
    select_static:
      type: string
      title: 8. Select (Static Options)
      default: option_a
      examples:
        - 'Choose an option'
      x-ui:
        widget: select
        optionsSource:
          type: static
          values:
            - option_a
            - option_b
            - option_c

    # ============================================
    # SELECT WIDGET with INPUT COLUMNS options
    # ============================================
    select_column:
      type: string
      title: 9. Select (From Input Columns)
      examples:
        - 'Select a column from input'
      x-ui:
        widget: select
        optionsSource:
          type: inputColumns
          port: in

    # ============================================
    # MULTI-SELECT WIDGET with STATIC options
    # ============================================
    multi_select_static:
      type: array
      items:
        type: string
      title: 10. Multi-Select (Static Options)
      default:
        - tag1
        - tag2
      examples:
        - 'Select one or more tags'
      x-ui:
        widget: multi-select
        optionsSource:
          type: static
          values:
            - tag1
            - tag2
            - tag3
            - tag4
            - tag5

    # ============================================
    # MULTI-SELECT WIDGET with INPUT COLUMNS options
    # ============================================
    multi_select_columns:
      type: array
      items:
        type: string
      title: 11. Multi-Select (From Input Columns)
      examples:
        - 'Select one or more columns'
      x-ui:
        widget: multi-select
        optionsSource:
          type: inputColumns
          port: in

  required:
    - expr_value
  additionalProperties: false
ports:
  input:
    - name: in
      title: Input Data
  output:
    - name: out
      title: Output

スキーマのハイライト

設定キー	ウィジェット	データ型	目的
`expr_value`	`expression`	式	入力データから列または式を選択します。
`text_input`	`input`	string	単一行のテキスト入力。
`text_area`	`textarea`	string	複数行のテキスト入力。
`checkbox_flag`	`checkbox`	Boolean	Booleanチェックボックス。
`toggle_flag`	`toggle`	Boolean	Booleanトグルスイッチ。
`number_value`	`number`	数字	最小値/最大値の検証を伴う数値入力。
`slider_value`	`slider`	数字	ステップ増分付きの数値スライダー。
`select_static`	`select`	string	ハードコードされたオプションを含むドロップダウン。
`select_column`	`select`	string	入力列から入力されたドロップダウン。
`multi_select_static`	`multi-select`	文字列[]	ハードコードされたオプションによる複数選択。
`multi_select_columns`	`multi-select`	文字列[]	入力列から入力された複数選択。

オプションのソースタイプ

selectおよびmulti-selectウィジェットの場合は、 optionsSourceを指定する必要があります。

静的オプション - 固定された値のリスト:

YAML
optionsSource:
  type: static
  values:
    - value1
    - value2
    - value3

入力列 - 入力ポート列からの動的リスト:

YAML
optionsSource:
  type: inputColumns
  port: in

利用可能なすべてのプロパティ、データ型、ウィジェット、およびオプションの包括的なガイドについては、ユーザー定義演算子 YAML リファレンスを参照してください。

ステップ 3: Unity Catalog関数を作成する

YAML 構成と Python 関数を 1 つのCREATE FUNCTIONステートメントに結合します。string[] (複数選択) の値はARRAY<STRING>として UDF に渡されることに注意してください。

SQL
CREATE OR REPLACE FUNCTION main.my_schema.all_widgets_demo(
    expr_value STRING,
    text_input STRING,
    text_area STRING,
    checkbox_flag BOOLEAN,
    toggle_flag BOOLEAN,
    number_value DOUBLE,
    slider_value DOUBLE,
    select_static STRING,
    select_column STRING,
    multi_select_static ARRAY<STRING>,
    multi_select_columns ARRAY<STRING>
)
RETURNS STRING
LANGUAGE PYTHON
AS $$
  """
  schema: user-defined-operator-v0.1.0
  type: uc-udf
  name: All Widgets Demo
  id: demo.all_widgets
  version: "1.0.0"
  description: >
    A demonstration UDF that showcases all available UI widgets.
  config:
    type: object
    properties:
      expr_value:
        type: string
        format: expression
        title: 1. Expression (Column Picker)
        examples:
          - "Select a column or enter an expression"
        x-ui:
          widget: expression
          port: in
      text_input:
        type: string
        title: 2. Text Input (Single Line)
        default: "default text"
        examples:
          - "Enter a single line of text"
        x-ui:
          widget: input
      text_area:
        type: string
        title: 3. Text Area (Multi-Line)
        default: Sample text
        examples:
          - "Enter multiple lines of text here..."
        x-ui:
          widget: textarea
          rows: 3
      checkbox_flag:
        type: boolean
        title: 4. Checkbox Option
        default: true
        x-ui:
          widget: checkbox
      toggle_flag:
        type: boolean
        title: 5. Toggle Switch
        default: false
        x-ui:
          widget: toggle
      number_value:
        type: number
        title: 6. Number Input
        default: 50
        minimum: 0
        maximum: 100
        examples:
          - "Enter a number (0-100)"
        x-ui:
          widget: number
      slider_value:
        type: number
        title: 7. Slider Value
        default: 50
        minimum: 0
        maximum: 100
        x-ui:
          widget: slider
          step: 5
      select_static:
        type: string
        title: 8. Select (Static Options)
        default: option_a
        examples:
          - "Choose an option"
        x-ui:
          widget: select
          optionsSource:
            type: static
            values:
              - option_a
              - option_b
              - option_c
      select_column:
        type: string
        title: 9. Select (From Input Columns)
        examples:
          - "Select a column from input"
        x-ui:
          widget: select
          optionsSource:
            type: inputColumns
            port: in
      multi_select_static:
        type: array
        items:
          type: string
        title: 10. Multi-Select (Static Options)
        default:
          - tag1
          - tag2
        examples:
          - "Select one or more tags"
        x-ui:
          widget: multi-select
          optionsSource:
            type: static
            values:
              - tag1
              - tag2
              - tag3
              - tag4
              - tag5
      multi_select_columns:
        type: array
        items:
          type: string
        title: 11. Multi-Select (From Input Columns)
        examples:
          - "Select one or more columns"
        x-ui:
          widget: multi-select
          optionsSource:
            type: inputColumns
            port: in
    required:
      - expr_value
    additionalProperties: false
  ports:
    input:
      - name: in
        title: Input Data
    output:
      - name: out
        title: Output
  """

  def concat_all_widgets(
      expr_value: str,
      text_input: str,
      text_area: str,
      checkbox_flag: bool,
      toggle_flag: bool,
      number_value: float,
      slider_value: float,
      select_static: str,
      select_column: str,
      multi_select_static: list,
      multi_select_columns: list
  ) -> str:
      lines = [
          f"1: Expression (Column Picker) -> {expr_value}",
          f"2: Text Input (Single Line) -> {text_input}",
          f"3: Text Area (Multi-Line) -> {text_area}",
          f"4: Checkbox Option -> {checkbox_flag}",
          f"5: Toggle Switch -> {toggle_flag}",
          f"6: Number Input -> {number_value}",
          f"7: Slider Value -> {slider_value}",
          f"8: Select (Static Options) -> {select_static}",
          f"9: Select (From Input Columns) -> {select_column}",
          f"10: Multi-Select (Static Options) -> [{', '.join(multi_select_static or [])}]",
          f"11: Multi-Select (From Input Columns) -> [{', '.join(multi_select_columns or [])}]"
      ]
      return "\n".join(lines)

  return concat_all_widgets(
      expr_value,
      text_input,
      text_area,
      checkbox_flag,
      toggle_flag,
      number_value,
      slider_value,
      select_static,
      select_column,
      multi_select_static,
      multi_select_columns
  )
$$

ステップ 4: 機能をテストする

SQL を使用して UC 関数を直接テストします。

SQL
SELECT main.my_schema.all_widgets_demo(
    'my_column_value',             -- expr_value (expression)
    'Hello World',                 -- text_input (input)
    'Multi\nLine\nText',           -- text_area (textarea)
    TRUE,                          -- checkbox_flag (checkbox)
    FALSE,                         -- toggle_flag (toggle)
    42.5,                          -- number_value (number)
    75.0,                          -- slider_value (slider)
    'option_b',                    -- select_static (select with static)
    'amount',                      -- select_column (select with inputColumns)
    array('tag1', 'tag3'),         -- multi_select_static (multi-select with static)
    array('col1', 'col2', 'col3')  -- multi_select_columns (multi-select with inputColumns)
) AS result;

ステップ 5: オペレーターを登録する

.user_defined_operators.yamlファイルに演算子を追加します:

YAML
operators:
  - catalog: main
    schema: my_schema
    functionName: all_widgets_demo

ステップ 6: 権限を設定する

この演算子を使用する必要があるユーザーにアクセス権を付与します。

SQL
GRANT USE SCHEMA ON SCHEMA main.my_schema TO `<user>`;
GRANT EXECUTE ON FUNCTION main.my_schema.all_widgets_demo TO `<user>`;

Lakeflow Designer での演算子の使用

登録後、オペレーターはLakeflow Designer に表示され、次の機能を備えた包括的な構成パネルが表示されます。

列選択のための式ピッカー
テキスト入力（単一行および複数行）
Booleanコントロール（チェックボックスとトグル）
数値入力（数値フィールドとスライダー）
静的オプションと動的オプションの両方を備えたドロップダウン
複数の値を選択するための複数選択コントロール

この演算子は、各ウィジェットタイプがどのようにレンダリングされ、どのようにデータが関数に渡されるかを理解するための便利な参考資料となります。

ウィジェットリファレンスの概要

ウィジェット	データ型	UIオプション
`expression`	`expression`	`port` （必須）、 `placeholder`
`input`	`string`	`placeholder`
`textarea`	`string`	`rows`, `placeholder`
`checkbox`	`boolean`	`placeholder`
`toggle`	`boolean`	`placeholder`
`number`	`number`	`min`、`max`、 `placeholder`
`slider`	`number`	`min`、`max`、`step`、 `placeholder`
`select`	`string`	`optionsSource` （必須）、 `placeholder`
`multi-select`	`string[]`	`optionsSource` （必須）、 `placeholder`

概要​

ステップ 1: Python関数を作成してテストする​

ステップ 2: YAML 構成を作成する​

スキーマのハイライト​

オプションのソースタイプ​

ステップ 3: Unity Catalog関数を作成する​

ステップ 4: 機能をテストする​

ステップ 5: オペレーターを登録する​

ステップ 6: 権限を設定する​

Lakeflow Designer での演算子の使用​

ウィジェットリファレンスの概要​

概要