Pular para o conteúdo principal

Tutorial: Demonstração de todos os widgets da interface do usuário

Neste tutorial, você cria um operador de UDF em Python para o Lakeflow Designer que utiliza cada widget de IU disponível no esquema user-defined-operator-v0.1.0. Utilize-o como padrão ao criar seus próprios operadores. Para uma visão geral mais abrangente, consulte Operadores definidos pelo usuário no Lakeflow Designer.

Visão geral

Este operador é uma UDF de demonstração que aceita parâmetros usando todos os tipos de widgets de interface do usuário disponíveis. Ele concatena todos os valores de entrada em strings descritivas, facilitando a visualização de como cada widget passa dados para sua função.

Os tipos de widgets disponíveis são:

Widget

Descrição

Tipo de dados

expression

Seletor de coluna/expressão da porta de entrada

expressão

input

Entrada de texto em linha única

string

textarea

Área de texto com várias linhas

string

checkbox

caixa de seleção

Booleana

toggle

Interruptor de alternância

Booleana

number

Entrada de número com mínimo/máximo

Número

slider

Controle deslizante numérico com intervalo

Número

select

dropdown de seleção única (valores estáticos)

string

select

dropdown de seleção única (a partir de colunas de entrada)

string

multi-select

Seleção múltipla (valores estáticos)

strings[]

multi-select

Seleção múltipla (a partir de colunas de entrada)

strings[]

Widget

Descrição

Tipo de dados

expression

Seletor de coluna/expressão da porta de entrada

expressão

input

Entrada de texto em linha única

string

textarea

Área de texto com várias linhas

string

checkbox

caixa de seleção

Booleana

toggle

Interruptor de alternância

Booleana

number

Entrada de número com mínimo/máximo

Número

slider

Controle deslizante numérico com intervalo

Número

select

dropdown de seleção única (valores estáticos)

string

select

dropdown de seleção única (a partir de colunas de entrada)

string

multi-select

Seleção múltipla (valores estáticos)

strings[]

multi-select

Seleção múltipla (a partir de colunas de entrada)

strings[]

Passo 1: Escreva e teste a função Python

Primeiro, defina a função em Python que aceita todos os diferentes tipos de parâmetros. Essa função simplesmente concatena todas as entradas em strings descritivas para fins de demonstração.

Python
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)

Teste a função com o seguinte código:

Python
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)

o passo 2: Criar a configuração YAML

A configuração YAML define como o operador aparece no LakeFlow Designer. Este exemplo demonstra todos os tipos de widgets disponíveis:

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
# ============================================
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

Destaques do esquema

Chave de configuração

Widget

Tipo de dados

Propósito

expression_widget_value

expression

expressão

Selecione uma coluna ou expressão dos dados de entrada.

input_widget_value

input

string

Entrada de texto em uma única linha.

textarea_widget_value

textarea

string

Entrada de texto em várias linhas.

checkbox_widget_value

checkbox

Booleana

Caixa de seleção Boolean .

toggle_widget_value

toggle

Booleana

Interruptor de alternância Boolean .

number_widget_value

number

Número

Entrada numérica com validação de mínimo/máximo.

slider_widget_value

slider

Número

Controle deslizante numérico com incrementos de 0,05.

select_static_widget_value

select

string

Menu suspenso com opções predefinidas.

select_columns_widget_value

select

string

Lista suspensa preenchida a partir de colunas de entrada.

multiselect_static_widget_value

multi-select

strings[]

Seleção múltipla com opções predefinidas.

multiselect_columns_widget_value

multi-select

strings[]

Seleção múltipla preenchida a partir de colunas de entrada.

Chave de configuração

Widget

Tipo de dados

Propósito

expression_widget_value

expression

expressão

Selecione uma coluna ou expressão dos dados de entrada.

input_widget_value

input

string

Entrada de texto em uma única linha.

textarea_widget_value

textarea

string

Entrada de texto em várias linhas.

checkbox_widget_value

checkbox

Booleana

Caixa de seleção Boolean .

toggle_widget_value

toggle

Booleana

Interruptor de alternância Boolean .

number_widget_value

number

Número

Entrada numérica com validação de mínimo/máximo.

slider_widget_value

slider

Número

Controle deslizante numérico com incrementos de 0,05.

select_static_widget_value

select

string

Menu suspenso com opções predefinidas.

select_columns_widget_value

select

string

Lista suspensa preenchida a partir de colunas de entrada.

multiselect_static_widget_value

multi-select

strings[]

Seleção múltipla com opções predefinidas.

multiselect_columns_widget_value

multi-select

strings[]

Seleção múltipla preenchida a partir de colunas de entrada.

Opções de tipos de origem

Para widgets select e multi-select , você deve especificar um optionsSource:

Opções estáticas : Lista fixa de valores

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

Colunas de entrada : lista dinâmica de colunas da porta de entrada:

YAML
optionsSource:
type: inputColumns
port: in

Consulte a referência YAML do operador definido pelo usuário para obter um guia completo de todas as propriedades, tipos de dados, widgets e opções disponíveis.

o passo 3: Criar a função Unity Catalog

Combine a configuração YAML e a função Python em uma única instrução CREATE FUNCTION . Observe que os valores string[] (seleção múltipla) são passados como ARRAY<STRING> para a UDF.

O exemplo cria a função em main.example_output. Primeiro, crie o esquema se ele não existir:

SQL
CREATE SCHEMA IF NOT EXISTS main.example_output
SQL
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
)
$$

o passo 4: Teste a função

Teste a função UC diretamente com SQL:

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;

o passo 5: registrar a operadora

Adicione o operador ao seu arquivo .user_defined_operators.yaml :

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

o passo 6: Configurar permissões

Conceda acesso aos usuários que precisam usar esta operadora:

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

Utilize o operador no Lakeflow Designer

Após ser registrado, o operador é exibido no Lakeflow Designer com um painel de configuração abrangente que apresenta:

  • Um seletor de expressões para seleção de colunas.
  • Entradas de texto (linha única e várias linhas)
  • Controles Boolean (caixa de seleção e alternância)
  • Entradas numéricas (campo numérico e controle deslizante)
  • menu suspenso com opções estáticas e dinâmicas
  • Controles de seleção múltipla para escolher vários valores.

Este operador serve como uma referência útil para entender como cada tipo de widget renderiza e passa dados para sua função.

Para o tipo de dados e as opções de cada widget, consulte widgets de UI.