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 |
|---|---|---|
| Seletor de coluna/expressão da porta de entrada | expressão |
| Entrada de texto em linha única | string |
| Área de texto com várias linhas | string |
| caixa de seleção | Booleana |
| Interruptor de alternância | Booleana |
| Entrada de número com mínimo/máximo | Número |
| Controle deslizante numérico com intervalo | Número |
| dropdown de seleção única (valores estáticos) | string |
| dropdown de seleção única (a partir de colunas de entrada) | string |
| Seleção múltipla (valores estáticos) | strings[] |
| 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.
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:
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:
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 |
|---|---|---|---|
|
| expressão | Selecione uma coluna ou expressão dos dados de entrada. |
|
| string | Entrada de texto em uma única linha. |
|
| string | Entrada de texto em várias linhas. |
|
| Booleana | Caixa de seleção Boolean . |
|
| Booleana | Interruptor de alternância Boolean . |
|
| Número | Entrada numérica com validação de mínimo/máximo. |
|
| Número | Controle deslizante numérico com incrementos de 0,05. |
|
| string | Menu suspenso com opções predefinidas. |
|
| string | Lista suspensa preenchida a partir de colunas de entrada. |
|
| strings[] | Seleção múltipla com opções predefinidas. |
|
| 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
optionsSource:
type: static
values:
- value1
- value2
- value3
Colunas de entrada : lista dinâmica de colunas da porta de entrada:
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:
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
)
$$
o passo 4: Teste a função
Teste a função UC diretamente com 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 :
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:
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.