UI Component Functions

Defines the properties of functions declared by the UI Component. Contains identical fields to Model Functions excluding the following fields:

  • Query. Query functions are not supported by the UI Component.

  • Plugin. UI Components cannot be defined by server plugins.

Implementing Component Functions

Functions defined by the UI Component follow the same principle as Model Functions, and can also be called from the code in the UI Component Source property.

Define a Function

From the Component Functions group, define a function with the following parameters:

Field

Value

Name

exampleFunction

Description

Example Function

Input Format

  • Minimal Record Count: 1

  • Maximal Record Count: 1

  • Fields:

    • Name: input

    • Type: String

    • Description: input

Output Format

  • Minimal Record Count: 1

  • Maximal Record Count: 1

  • Fields:

    • Name: output

    • Type: String

    • Description: output

Type

Expression

Expression

"The input value was:" + {input}

This function takes as input a data table with a single row and a single field named “input”, and returns as output a data table with a single row and field named “output”.

Call Function from Component Code

One way to call the function in the component code is by calling the callFunction(functionName, payload [, context]) function from the React functional component, for example:

const Component: React.FC<CustomWrappedComponentProps> = ({ component, componentModel, someVariable = "", myVariable }) => {
  ...
  const functionOutput = componentModel.callFunction("exampleFunction", [{input: "This is the input value"}])
  ...
};

The arguments in the above are as follows:

  • "exampleFunction" - Indicate the function exampleFunction defined earlier.

  • [{input: "This is the input value"}] - data table with single row and field named “input” with value "This is the input value"

  • context - Context is left blank, since the function is in the component context.

The output of the function functionOutput will be a data table [{output: "The input value was: This is the input value"}]

The function could also be used in a React function definition in the Model class like so:

class Model extends AbstractWebComponent implements WebComponentModel {
...
  callExampleFunction() {
    this.callFunction("exampleFunction", [{input: "This is the input value"}])
  }
...
}

Then callExampleFunction() can be used elsewhere as a function defined in the Model class

Was this page helpful?