1. Home
  2. Extending KBC
  3. Components
  4. UI Options
  5. Configuration Schema

Sync Action UI Elements Examples

Some UI elements are using sync actions to get some values dynamically from the component code. This section provides a list of the elements currently supported.

Each element specifies the action attribute which relates to the name of the sync action registered in the Developer Portal.

Note: Support for these elements is also abstracted in the official Python Component library.

Dynamically Loaded Dropdowns

Drop-down lists (values and labels) can be loaded by the component sync action.

The sync action code has to return the following stdout:

[
 { label: 'Joe', value: 'joe' },
 { label: 'Doe', value: 'doe },
 { label: 'Jane', value: 'jane' }
]

The label value is optional.

When used in Python, you can use the SelectElement class as return value.

Dynamically loaded multi select

{
    "test_columns": {
      "type": "array",
      "propertyOrder": 10,
      "description": "Element loaded by an arbitrary sync action.",
      "items": {
        "enum": [],
        "type": "string"
      },
      "format": "select",
      "options": {
        "async": {
          "label": "Re-load test columns",
          "action": "testColumns"
        }
      },
      "uniqueItems": true
    }
}

The above code will create the following element which triggers an action named testColumns:

Screenshot

Dynamically loaded single select

{
  "test_columns_single": {
    "propertyOrder": 40,
    "type": "string",
    "description": "Element loaded by an arbitrary sync action. (single)",
    "enum": [],
    "format": "select",
    "options": {
      "async": {
        "label": "Re-load test columns",
        "action": "testColumns"
      }
    }
  }
}

The above code will create the following element which triggers the testColumns action:

Screenshot

Generic Validation Button

This button can be used to return feedback from the component. The output supports MarkDown notation.

Example use-cases are query testing, testing connection, report validation, etc.

The sync action code has to return the following stdout (JSON string):

{
  "message": "###This is display text. \n\n And can contain **Mark Down** notation. ",
  "type": "info", //possible values: success, info, warning, danger
  "status": "success" // this is required and will never be other value than "success"
}

When used in Python, you can use the ValidationResult class as return value.

Example

{
  "validation_button": {
    "type": "button",
    "format": "sync-action",
    "propertyOrder": 10,
    "options": {
      "async": {
        "label": "Validate",
        "action": "validate_report"
      }
    }
  }
}

The above code will create the following element which triggers the validate_report action:

screenshot

Test Connection

This button can be used for simple connection tests.

The sync action code has to return the following stdout (JSON string) or error (exit code >0):

{
  "status": "success" // this is required and will never be other value than "success"
}

The name of this sync action has to be always testConnection.

When used in Python, the method does not need to return anything, or it can just throw an exception.

Example

{
    "test_connection": {
      "type": "button",
      "format": "sync-action",
      "propertyOrder": 30,
      "options": {
        "async": {
          "label": "TEST CONNECTION",
          "action": "validate_connection"
        }
      }
    }
}

The above code will create the following element which triggers the testConnection action:

multiselect