HTTP (REST, GraphQL, SOAP)
/
HTTP Functions

HTTP Functions

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.

Note: You must first create an HTTP data source to create custom HTTP functions.


Creating a custom function

Click on Company Settings → Data Sources. Click on the HTTP data source you connected; this should contain your API endpoint(s) or graphQL mutation(s). 

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


First, name your function (such as "Update User", "Send Message"). This function name is shown when you select an action for your component to perform.

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.

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

Your Javascript expressions will become dynamic parameters, whose values are populated when you configure a Space component using this function. 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).

Example: If user_id was a dynamic parameter used in this function, you could map that to the userid column in a table component. Then a user would select a table row when using this function, the userid in that row would be passed as the user_id parameter.


Path: Specify your API endpoint/graphQL URL.

Example: 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: 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.

Example: 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). 

Important 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.

Note: 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.