Tutoriel : Démo de tous les widgets d'interface utilisateur

Dans ce tutoriel, vous créez un opérateur Python UDF pour Lakeflow Designer qui exerce chaque widget d'interface utilisateur disponible dans le schéma user-defined-operator-v0.1.0. Utilisez-le comme template lors de la création de vos propres opérateurs. Pour un aperçu plus large, consultez Opérateurs définis par l'utilisateur dans Lakeflow Designer.

Présentation

Cet opérateur est une UDF de démonstration qui accepte les paramètres à l'aide de tous les types de widgets d'interface utilisateur disponibles. Il concatène toutes les valeurs d'entrée en une chaîne descriptive, ce qui facilite la compréhension de la manière dont chaque widget transmet des données à votre fonction.

Les types de widget disponibles sont :

Widget	Description	Type de données
`expression`	Sélecteur de colonne/expression depuis le port d'entrée	expression
`input`	Saisie de texte sur une seule ligne	chaîne
`textarea`	Zone de texte multiligne	chaîne
`checkbox`	Bascule de case à cocher	Booléen
`toggle`	Interrupteur	Booléen
`number`	Entrée numérique avec min/max	Nombre
`slider`	Curseur numérique avec plage	Nombre
`select`	Liste déroulante à sélection unique (valeurs statiques)	chaîne
`select`	Liste déroulante à sélection unique (à partir des colonnes de saisie)	chaîne
`multi-select`	Sélection multiple (valeurs statiques)	chaînes[]
`multi-select`	Sélection multiple (à partir des colonnes d’entrée)	chaînes[]

Widget	Description	Type de données
`expression`	Sélecteur de colonne/expression depuis le port d'entrée	expression
`input`	Saisie de texte sur une seule ligne	chaîne
`textarea`	Zone de texte multiligne	chaîne
`checkbox`	Bascule de case à cocher	Booléen
`toggle`	Interrupteur	Booléen
`number`	Entrée numérique avec min/max	Nombre
`slider`	Curseur numérique avec plage	Nombre
`select`	Liste déroulante à sélection unique (valeurs statiques)	chaîne
`select`	Liste déroulante à sélection unique (à partir des colonnes de saisie)	chaîne
`multi-select`	Sélection multiple (valeurs statiques)	chaînes[]
`multi-select`	Sélection multiple (à partir des colonnes d’entrée)	chaînes[]

Étape 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 en une chaîne de caractères descriptive à des fins de démonstration.

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)

Testez la fonction avec le code suivant :

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)

Étape 2 : Créer la configuration YAML

La configuration YAML définit la manière dont l'opérateur apparaît dans Lakeflow Designer. Cet exemple illustre tous les types de widgets disponibles :

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

Points forts du schéma

Clé de configuration	Widget	Type de données	Objectif
`expression_widget_value`	`expression`	expression	Sélectionnez une colonne ou une expression à partir des données d'entrée.
`input_widget_value`	`input`	chaîne	Saisie de texte sur une seule ligne.
`textarea_widget_value`	`textarea`	chaîne	Saisie de texte multiligne.
`checkbox_widget_value`	`checkbox`	Booléen	Case à cocher booléenne.
`toggle_widget_value`	`toggle`	Booléen	Interrupteur à bascule booléen.
`number_widget_value`	`number`	Nombre	Entrée numérique avec validation min/max.
`slider_widget_value`	`slider`	Nombre	Curseur numérique avec incréments par pas.
`select_static_widget_value`	`select`	chaîne	Menu déroulant avec des options codées en dur.
`select_columns_widget_value`	`select`	chaîne	Liste déroulante remplie à partir des colonnes d'entrée.
`multiselect_static_widget_value`	`multi-select`	chaînes[]	Sélection multiple avec options codées en dur.
`multiselect_columns_widget_value`	`multi-select`	chaînes[]	Sélection multiple renseignée à partir des colonnes d'entrée.

Clé de configuration	Widget	Type de données	Objectif
`expression_widget_value`	`expression`	expression	Sélectionnez une colonne ou une expression à partir des données d'entrée.
`input_widget_value`	`input`	chaîne	Saisie de texte sur une seule ligne.
`textarea_widget_value`	`textarea`	chaîne	Saisie de texte multiligne.
`checkbox_widget_value`	`checkbox`	Booléen	Case à cocher booléenne.
`toggle_widget_value`	`toggle`	Booléen	Interrupteur à bascule booléen.
`number_widget_value`	`number`	Nombre	Entrée numérique avec validation min/max.
`slider_widget_value`	`slider`	Nombre	Curseur numérique avec incréments par pas.
`select_static_widget_value`	`select`	chaîne	Menu déroulant avec des options codées en dur.
`select_columns_widget_value`	`select`	chaîne	Liste déroulante remplie à partir des colonnes d'entrée.
`multiselect_static_widget_value`	`multi-select`	chaînes[]	Sélection multiple avec options codées en dur.
`multiselect_columns_widget_value`	`multi-select`	chaînes[]	Sélection multiple renseignée à partir des colonnes d'entrée.

Options de types de source

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

Options statiques : liste fixe de valeurs :

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

Colonnes d'entrée : Liste dynamique des colonnes du port d'entrée :

YAML
optionsSource:
  type: inputColumns
  port: in

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

Étape 3 : créez la fonction Unity Catalog

Combiner la configuration YAML et la fonction Python en une seule instruction CREATE FUNCTION. Veuillez noter que les valeurs string[] (multisélection) sont transmises en tant que ARRAY<STRING> à l’UDF.

L'exemple crée la fonction dans main.example_output. Créez d'abord le schéma s'il n'existe pas :

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

Étape 4 : Testez la fonction

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

Étape 5 : Enregistrez l'opérateur

Ajoutez l'opérateur à votre fichier .user_defined_operators.yaml :

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

Étape 6 : Configurez les autorisations

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

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

Utilisez l'opérateur dans Lakeflow Designer

Après son enregistrement, l'opérateur apparaît dans Lakeflow Designer avec un volet de configuration complet comprenant :

Un sélecteur d'expression pour la sélection de colonnes
Saisies de texte (une seule ligne et plusieurs lignes)
Commandes booléennes (case à cocher et bascule)
Entrées numériques (champ numérique et curseur)
Menus déroulants avec options statiques et dynamiques
Contrôles de sélection multiple pour le choix de plusieurs valeurs

Cet opérateur constitue une référence utile pour comprendre comment chaque type de widget rend et transmet les données à votre fonction.

Pour connaître le type de données et les options de chaque widget, consultez les widgets d'interface utilisateur.

Présentation​

Étape 1 : Écrire et tester la fonction Python​

Étape 2 : Créer la configuration YAML​

Points forts du schéma​

Options de types de source​

Étape 3 : créez la fonction Unity Catalog​

Étape 4 : Testez la fonction​

Étape 5 : Enregistrez l'opérateur​

Étape 6 : Configurez les autorisations​

Utilisez l'opérateur dans Lakeflow Designer​