You can create custom functions out of your company’s existing API endpoints or graphQL mutations. This can be used to extend Internal’s functionality and allow it to work with any other system with available APIs. You must first connect an HTTP data source, if you haven’t already.

To create a custom function (HTTP), first navigate to Company Settings (left navigation) → Data Sources (tab). Click on the HTTP data source you connected (that contains your API endpoints or graphQL mutations).

In the “Functions” section, click “Add New”. (Later, you can use “View” to browse and edit the functions in your Function Library.)

‍

First, give your function a name. This is the name shown in Spaces configuration when you choose an action for your button, form, or pop-up form to perform. Ex: “Update User”

‍

You'll fill in the details behind the HTTP function below. In order to handle variables that must be passed, Internal allows Javascript template literals within the path, URL parameters, and headers (purple-shaded inputs). The body of your request accepts Javascript. See the screenshot above for an example.

Your Javascript expressions will become dynamic parameters, whose values are populated when you configure a Space component using this function. For example, if the user_id was a dynamic parameter used in this function, you could map that to the user_id column in a table component. As you add expressions, you'll see the dynamic parameter populate at the bottom - this will allow you to define the type of data it is (plain text, integer, boolean, etc).

Note: there are some edge cases in how we convert to template literal, please see the dynamic parameters documentation for details.

‍

Path: Specify your API endpoint/graphQL URL. Ex: Input “users” if your endpoint is located at http://www.example.com/users. If the URL has a variable portion, you can use JS template literal in the path, like ${user_id}.

Note that you can provide URL parameters within the path, if you choose to do so. Any parameters provided within the URL Parameters inputs will override parameters provided in the path, if there are conflicts.

‍

Method: Select the method for your HTTP request (GET, HEAD, POST, PUT, PATCH, DELETE)

URL Parameters: Add parameters to be passed along within the URL. Ex: For the request URL http://www.appdomain.com/users?page=5 , you would enter “page” for the key and “5” for the value. These fields accept JS template literals for variable content.

Headers: You can add additional key-value pairs to be passed along in the request header when this function is used. Just like URL parameters, you can use JS template literals in both the Key and Value inputs.

If you also defined key-value pairs when you connected the HTTP data source header, any pairs defined here would be passed along in addition to those defined in the data source. If there are conflicting values for the same key, the value defined for the function will win (over the value from the data source).

Note: All users with the “Admin” role will be able to see headers, including the value.

Body: This is the content (payload) to be sent through the HTTP request. The body accepts Javascript.

‍

None: Will not send a body with this request (typically used for GET and HEAD)

JSON: Enter in your JSON body (must be in proper JSON syntax).

GraphQL: Enter in your graphQL query in the first box. In the second box, you can add your query variables, formatted as JSON objects.

Raw: Enter in plaintext for the body. If left empty, the request will send a body with an empty string.

Once you’re done setting up your function, hit Save. It will be added to your Function Library, and you’ll be able to use these functions in Spaces by attaching them to components like buttons, forms, and pop-up forms.

‍

Reducer: Reducers let you modify (reduce) the result that is returned by this function (usually to put it into a format that is easier to work with). The identifier data is used for the return value and you can use Javascript expressions to modify this result. You can use a JSON viewer component bound to this function in order to view the results.

‍Ex: If data (returned value) is an array of items, you can specify data.map(item => ({name: `${item.first} ${item.last}`}))

See the screenshots below for another example of reducers, as well as the reduced vs. untransformed output.

GraphQL Notes: Query variables apply to mutations (that change data). A GraphQL query can be used to create an internal function that solely reads data. In order to display what is returned by a read function, you need to use the JSON viewer component.