Tutorial: Demostración de todos los widgets de interfaz de usuario

En este tutorial, creas un operador UDF de Python para Lakeflow Designer que utiliza todos los widgets de la interfaz de usuario disponibles en el esquema user-defined-operator-v0.1.0. Úselo como plantilla al crear sus propios operadores. Para obtener información general más amplia, consulte Operadores definidos por el usuario en Lakeflow Designer.

Información general

Este operador es una UDF de demostración que acepta parámetros mediante cada tipo de widget de interfaz de usuario disponible. Concatena todos los valores de entrada en una cadena descriptiva, lo que facilita la visualización de cómo cada widget pasa datos a la función.

Los tipos de widget disponibles son:

Widget	Description	Tipo de datos
`expression`	Selector de columnas y expresiones del puerto de entrada	expression
`input`	Entrada de texto de una sola línea	string
`textarea`	Área de texto de varias líneas	string
`checkbox`	Conmutador de casilla de verificación	Boolean
`toggle`	Modificador para alternar	Boolean
`number`	Entrada de número con min/max	number
`slider`	Control deslizante numérico con rango	number
`select`	Lista desplegable de selección única (valores estáticos)	string
`select`	Lista desplegable de selección simple (a partir de columnas de entrada)	string
`multi-select`	Selección múltiple (valores estáticos)	string[]
`multi-select`	Selección múltiple (en columnas de entrada)	string[]

Step 1: Escribir y probar la función Python

En primer lugar, defina la función Python que acepta todos los tipos de parámetros diferentes. Esta función simplemente concatena todas las entradas en una cadena descriptiva con fines de demostración.

def concat_all_widgets(
    expression_widget_value: str,
    input_widget_value: str,
    textarea_widget_value: str,
    checkbox_widget_value: bool,
    toggle_widget_value: bool,
    number_widget_value: float,
    slider_widget_value: float,
    select_static_widget_value: str,
    select_columns_widget_value: str,
    multiselect_static_widget_value: list,
    multiselect_columns_widget_value: 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) -> {expression_widget_value}",
        f"2: Text Input (Single Line) -> {input_widget_value}",
        f"3: Text Area (Multi-Line) -> {textarea_widget_value}",
        f"4: Checkbox Option -> {checkbox_widget_value}",
        f"5: Toggle Switch -> {toggle_widget_value}",
        f"6: Number Input -> {number_widget_value}",
        f"7: Slider Value -> {slider_widget_value}",
        f"8: Select (Static Options) -> {select_static_widget_value}",
        f"9: Select (From Input Columns) -> {select_columns_widget_value}",
        f"10: Multi-Select (Static Options) -> [{', '.join(multiselect_static_widget_value or [])}]",
        f"11: Multi-Select (From Input Columns) -> [{', '.join(multiselect_columns_widget_value or [])}]"
    ]
    return "\n".join(lines)

Pruebe la función con el código siguiente:

result = concat_all_widgets(
    expression_widget_value="column_value_123",
    input_widget_value="Hello World",
    textarea_widget_value="Line 1\nLine 2\nLine 3",
    checkbox_widget_value=True,
    toggle_widget_value=False,
    number_widget_value=42.5,
    slider_widget_value=75.0,
    select_static_widget_value="option_b",
    select_columns_widget_value="amount",
    multiselect_static_widget_value=["tag1", "tag3"],
    multiselect_columns_widget_value=["col1", "col3"]
)
print(result)

Paso 2: Creación de la configuración de YAML

La configuración de YAML define cómo aparece el operador en Lakeflow Designer. En este ejemplo se muestran todos los tipos de widget disponibles:

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
    # ============================================
    expression_widget_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)
    # ============================================
    input_widget_value:
      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)
    # ============================================
    textarea_widget_value:
      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_widget_value:
      type: boolean
      title: 4. Checkbox Option
      default: true
      x-ui:
        widget: checkbox

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

    # ============================================
    # NUMBER WIDGET (numeric input with min/max)
    # ============================================
    number_widget_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_widget_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_widget_value:
      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_columns_widget_value:
      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
    # ============================================
    multiselect_static_widget_value:
      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
    # ============================================
    multiselect_columns_widget_value:
      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:
    - expression_widget_value
  additionalProperties: false
ports:
  input:
    - name: in
      title: Input Data
  output:
    - name: out
      title: Output

Aspectos destacados del esquema

Clave de configuración	Widget	Tipo de datos	propósito
`expression_widget_value`	`expression`	expression	Elija una columna o expresión de los datos de entrada.
`input_widget_value`	`input`	string	Entrada de texto de una sola línea.
`textarea_widget_value`	`textarea`	string	Entrada de texto de varias líneas.
`checkbox_widget_value`	`checkbox`	Boolean	Casilla de verificación booleana.
`toggle_widget_value`	`toggle`	Boolean	Modificador de alternancia booleano.
`number_widget_value`	`number`	number	Entrada numérica con validación mínima/máxima.
`slider_widget_value`	`slider`	number	Deslizador numérico con incrementos por pasos.
`select_static_widget_value`	`select`	string	Lista desplegable con opciones codificadas de forma fija.
`select_columns_widget_value`	`select`	string	Lista desplegable generada a partir de las columnas de entrada.
`multiselect_static_widget_value`	`multi-select`	string[]	Selección múltiple con opciones codificadas de forma fija.
`multiselect_columns_widget_value`	`multi-select`	string[]	Selección múltiple generada a partir de las columnas de entrada.

Tipos de origen de opciones

Para los widgets select y multi-select, debe especificar un optionsSource:

Opciones estáticas: lista fija de valores:

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

Columnas de entrada: lista dinámica de columnas de puerto de entrada:

optionsSource:
  type: inputColumns
  port: in

Consulte la referencia de YAML del operador definido por el usuario para obtener una guía completa de todas las propiedades, tipos de datos, widgets y opciones disponibles.

Paso 3: Crear la función catálogo de Unity

Combine la configuración de YAML y la función Python en una sola instrucción CREATE FUNCTION. Tenga en cuenta que los valores de string[] (selección múltiple) se pasan como ARRAY<STRING> a la UDF.

El ejemplo crea la función en main.example_output. Crea el esquema primero si no existe:

CREATE SCHEMA IF NOT EXISTS main.example_output

CREATE OR REPLACE FUNCTION main.example_output.all_widgets_demo(
    expression_widget_value STRING,
    input_widget_value STRING,
    textarea_widget_value STRING,
    checkbox_widget_value BOOLEAN,
    toggle_widget_value BOOLEAN,
    number_widget_value DOUBLE,
    slider_widget_value DOUBLE,
    select_static_widget_value STRING,
    select_columns_widget_value STRING,
    multiselect_static_widget_value ARRAY<STRING>,
    multiselect_columns_widget_value 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:
      expression_widget_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_value:
        type: string
        title: 2. Text Input (Single Line)
        default: "default text"
        examples:
          - "Enter a single line of text"
        x-ui:
          widget: input
      textarea_widget_value:
        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_value:
        type: boolean
        title: 4. Checkbox Option
        default: true
        x-ui:
          widget: checkbox
      toggle_widget_value:
        type: boolean
        title: 5. Toggle Switch
        default: false
        x-ui:
          widget: toggle
      number_widget_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_value:
        type: number
        title: 7. Slider Value
        default: 50
        minimum: 0
        maximum: 100
        x-ui:
          widget: slider
          step: 5
      select_static_widget_value:
        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_columns_widget_value:
        type: string
        title: 9. Select (From Input Columns)
        examples:
          - "Select a column from input"
        x-ui:
          widget: select
          optionsSource:
            type: inputColumns
            port: in
      multiselect_static_widget_value:
        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
      multiselect_columns_widget_value:
        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:
      - expression_widget_value
    additionalProperties: false
  ports:
    input:
      - name: in
        title: Input Data
    output:
      - name: out
        title: Output
  """

  def concat_all_widgets(
      expression_widget_value: str,
      input_widget_value: str,
      textarea_widget_value: str,
      checkbox_widget_value: bool,
      toggle_widget_value: bool,
      number_widget_value: float,
      slider_widget_value: float,
      select_static_widget_value: str,
      select_columns_widget_value: str,
      multiselect_static_widget_value: list,
      multiselect_columns_widget_value: list
  ) -> str:
      lines = [
          f"1: Expression (Column Picker) -> {expression_widget_value}",
          f"2: Text Input (Single Line) -> {input_widget_value}",
          f"3: Text Area (Multi-Line) -> {textarea_widget_value}",
          f"4: Checkbox Option -> {checkbox_widget_value}",
          f"5: Toggle Switch -> {toggle_widget_value}",
          f"6: Number Input -> {number_widget_value}",
          f"7: Slider Value -> {slider_widget_value}",
          f"8: Select (Static Options) -> {select_static_widget_value}",
          f"9: Select (From Input Columns) -> {select_columns_widget_value}",
          f"10: Multi-Select (Static Options) -> [{', '.join(multiselect_static_widget_value or [])}]",
          f"11: Multi-Select (From Input Columns) -> [{', '.join(multiselect_columns_widget_value or [])}]"
      ]
      return "\n".join(lines)

  return concat_all_widgets(
      expression_widget_value,
      input_widget_value,
      textarea_widget_value,
      checkbox_widget_value,
      toggle_widget_value,
      number_widget_value,
      slider_widget_value,
      select_static_widget_value,
      select_columns_widget_value,
      multiselect_static_widget_value,
      multiselect_columns_widget_value
  )
$$

Paso 4: Probar la función

Pruebe la función UC directamente con SQL:

SELECT main.example_output.all_widgets_demo(
    expression_widget_value => 'my_column_value',
    input_widget_value => 'Hello World',
    textarea_widget_value => 'Multi\nLine\nText',
    checkbox_widget_value => TRUE,
    toggle_widget_value => FALSE,
    number_widget_value => 42.5,
    slider_widget_value => 75.0,
    select_static_widget_value => 'option_b',
    select_columns_widget_value => 'amount',
    multiselect_static_widget_value => array('tag1', 'tag3'),
    multiselect_columns_widget_value => array('col1', 'col2', 'col3')
) AS result;

Paso 5: Registrar el operador

Añada el operador a su archivo .user_defined_operators.yaml:

operators:
  - catalog: main
    schema: example_output
    functionName: all_widgets_demo

Paso 6: Configuración de permisos

Conceda acceso a los usuarios que necesitan usar este operador:

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

Use el operador en Lakeflow Designer

Una vez registrado, el operador aparece en Lakeflow Designer con un panel de configuración completo con:

Selector de expresiones para la selección de columnas
Entradas de texto (línea única y varias líneas)
Controles booleanos (casilla de verificación e interruptor)
Entradas numéricas (campo de número y control deslizante)
Listas desplegables con opciones estáticas y dinámicas
Controles de selección múltiple para elegir varios valores

Este operador sirve como referencia útil para comprender cómo cada tipo de widget representa y pasa datos a la función.

Para el tipo de datos y las opciones de cada widget, consulte Widgets de interfaz de usuario.

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2026-09-11