Function Component
Getting Started
Self Hosted

Function Component

A Function component is a component that runs a function, but doesn't appear visible in a published Space. It can then be used to populate other components.

Ways to Use the Function Component

Filling in a Form Without a Table or Detail View

A favorite use-case for the Function Component is to use it to pull data down from a source and then use it to populate a form that can be used to update that data source or another target data source. This avoids needing to bind to a table row or a detail view's data.

  1. Add the Function Component from the component selector menu
  1. Add a new URL parameter to your Internal instance from which we can source input parameters for the Function component
  1. Click the Function component in the Space editor, and set a data source and function from the righthand component editor and bind the input to the new URL param
  1. Add a Form to the Space, select a data provider/function, and bind the inputs to the output of the Function component
  1. Bind any additional fields that you require to the output of the Function Component
  1. Publish and use the URL parameter (in the URL bar "?{key}={value}") to populate the Function Component with inputs, which will then populate your form

When you submit the form, it will do so powered by an invisible function, making it easier for your end users to update records without having to do any fancy footwork.

Bonus: By using URL parameters, you can "embed" these functions in other data sources (DB, report services) by including the parameterized URL for the space as a link in a client/product/object record that would then allow an end-user to simply click the link and be brought to a Space in which they seamlessly update a record automatically populated with real data.

D.R.Y. (Do Not Repeat Yourself) Implementation of a Space

The simplest use-case for the function component is as a way to populate multiple components in a given Space without needing to make multiple database queries.

  1. Add the Function Component from the component selector menu
  1. Click the Function component in the Space editor, and set a data source and function from the righthand component editor
  1. Add components to your Space and bind them to the output of the Function component using the "Binding" selector in the "Source" section of the righthand component configuration editor
  1. Then, using the same flow, add additional components which make use of the same Function component's output

Other Common Use-cases

The flexibility inherent in having a Function Component that isn't visible to the end user allows for a large amount of possible use-cases, but below are some which are more common than others.

  • Use a Function Component that returns a single value to power a Detail view without needing a table in the Space
  • Use a Function Component to Pre-fill a Table filter to dynamically create filters for initial loads of Spaces


Display Message

This effect allows you to define the text of messages for success and failure of submission of the data from the component.

  • On Successful Submit - Message to be displayed in a green-colored JavaScript alert message that will show in the UI on successful completion of the transaction between Internal and the target data source.
  • On Failed Submit - Message to be displayed in a red-colored JavaScript alert message that will show when the transaction fails.

It's also important to note that not including a message will fall back to the "system message" for that component. In the case of a success, this usually produces a JavaScript alert that says "Success" and not much else. In the case of failure, this can be a custom error message added to the meta data transformer in the function editor.

Additionally, only one message is allowed to be configured per function success and one for failure.

Refresh Component

Usually, if your import changes some data that is‍ displayed in the Space, you'll want to refresh the data. On Submit: Refresh Component options allow you to refresh the data of any component in the Space. Simply select the component to refresh from the dropdown. When the submission from your button is successfully complete, the selected component will refresh and display any changes to its data.

Auto Update by Key

This is the default state for "Effects" for this component. When the component submits its data successfully, components that are bound to that function will automatically be updated by key (e.g. Sending an email-address update to a user's table should result in the updating of associated row table data associated with that key.)