Tutoriel : Démonstration de tous les widgets d’interface utilisateur

Important

Cette fonctionnalité est disponible en préversion publique.

Ce tutoriel de référence génère un opérateur UDF Python pour Lakeflow Designer qui exerce chaque widget d’interface utilisateur disponible dans le schéma user-defined-operator-v0.1.0. Utilisez-le comme modèle lors de la création de vos propres opérateurs. Pour une vue d’ensemble plus large, consultez les opérateurs définis par l’utilisateur dans Lakeflow Designer.

Vue d’ensemble

Cet opérateur est une fonction UDF de démonstration qui accepte les paramètres à l’aide de chaque type de widget d’interface utilisateur disponible. Il concatène toutes les valeurs d’entrée dans une chaîne descriptive, ce qui facilite la façon dont chaque widget transmet des données à votre fonction.

Les types de widgets disponibles sont les suivants :

Widget Description Type de données
expression Sélecteur de colonnes/expression à partir du port d’entrée expression
input Entrée de texte à une seule ligne string
textarea Zone de texte à plusieurs lignes string
checkbox Activer/désactiver la case à cocher Boolean
toggle Interrupteur à bascule Boolean
number Entrée de nombre avec min/max number
slider Curseur numérique avec plage number
select Liste déroulante à sélection unique (valeurs statiques) string
select Liste déroulante à sélection unique (à partir des colonnes d’entrée) string
multi-select Sélection multiple (valeurs statiques) chaîne de caractères[]
multi-select Sélection multiple (dans les colonnes d’entrée) chaîne de caractères[]

Step 1 : Écrire et tester la fonction Python

Tout d’abord, définissez la fonction Python qui accepte tous les différents types de paramètres. Cette fonction concatène simplement toutes les entrées dans une chaîne descriptive à des fins de démonstration.

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)

Testez la fonction avec le code suivant :

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)

Étape 2 : Créer la configuration YAML

La configuration YAML définit la façon dont l’opérateur apparaît dans Lakeflow Designer. Cet exemple illustre chaque type de widget disponible :

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

Points clés du schéma

Clé de configuration Widget Type de données Purpose
expr_value expression expression Choisissez une colonne ou une expression à partir de données d’entrée.
text_input input string Entrée de texte à ligne unique.
text_area textarea string Entrée de texte à plusieurs lignes.
checkbox_flag checkbox Boolean Case à cocher booléenne.
toggle_flag toggle Boolean Commutateur bascule booléen.
number_value number number Entrée numérique avec validation minimale/maximale.
slider_value slider number Curseur numérique avec incréments d’étape.
select_static select string Liste déroulante avec options codées en dur.
select_column select string Liste déroulante alimentée à partir des colonnes d’entrée.
multi_select_static multi-select chaîne de caractères[] Sélection multiple avec options codées en dur.
multi_select_columns multi-select chaîne de caractères[] Sélection multiple alimentée à partir des colonnes d’entrée.

Types de sources d’options

Pour select et multi-select les widgets, vous devez spécifier un optionsSource:

Options statiques : liste fixe des valeurs :

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

Colonnes d’entrée : liste dynamique à partir des colonnes de port d’entrée :

optionsSource:
  type: inputColumns
  port: in

Consultez la référence YAML de l’opérateur défini par l’utilisateur pour obtenir un guide complet sur toutes les propriétés, types de données, widgets et options disponibles.

Étape 3 : Créer la fonction Catalogue Unity

Combinez la configuration YAML et la fonction Python en une seule instruction CREATE FUNCTION. Notez que les valeurs string[] (sélection multiple) sont transmises à l’UDF sous forme de ARRAY<STRING>.

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

Étape 4 : Tester la fonction

Testez la fonction UC directement avec 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;

Étape 5 : Inscrire l’opérateur

Ajoutez l’opérateur au fichier .user_defined_operators.yaml :

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

Étape 6 : Configurer les autorisations

Accordez l’accès aux utilisateurs qui doivent utiliser cet opérateur :

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

Utilisation de l’opérateur dans Lakeflow Designer

Une fois inscrit, l’opérateur s’affiche dans Lakeflow Designer avec un panneau de configuration complet avec :

  • Sélecteur d’expressions pour la sélection de colonnes
  • Entrées de texte (ligne unique et multiligne)
  • Contrôles booléens (case à cocher et bascule)
  • Entrées numériques (champ numérique et curseur)
  • Listes déroulantes avec des options statiques et dynamiques
  • Contrôles à sélection multiple pour choisir plusieurs valeurs

Cet opérateur sert de référence utile pour comprendre comment chaque type de widget affiche et transmet des données à votre fonction.

Résumé de référence du widget

Widget Type de données Options de l’interface utilisateur
expression expression port (obligatoire), 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 (obligatoire), placeholder
multi-select string[] optionsSource (obligatoire), placeholder
  • Last updated on