diff --git a/docs/docs/how-to/pass-values-in-rest-api.md b/docs/docs/how-to/pass-values-in-rest-api.md new file mode 100644 index 0000000000..bdc8b47f46 --- /dev/null +++ b/docs/docs/how-to/pass-values-in-rest-api.md @@ -0,0 +1,55 @@ +--- +id: pass-values-in-rest-api +title: Pass Values in a REST API Query +--- + +This guide gives you an overview of how you can pass values in a REST API Query using raw JSON and key-value pairs. + +
+ +## Raw JSON + +In the following JSON code, the `${}` syntax is used for JavaScript string interpolation within template literals (also called template strings). This allows dynamic values from JavaScript variables or expressions to be injected directly into the string. + +```javascript +{{ + `{ + "contents": [{ + "parts": [{ + "text": "Generate the following content for this image in markdown format: + content type: ${components.typeOfContentInput.value}, + additional info: ${components.additionalInfoInput.value}" + }, + { + "inline_data": { + "mime_type":"image/jpeg", + "data": "${components.imageUploader.file[0].base64Data}" + } + },], + },], + }` + }} +``` + +
+ Passing Values Using Raw JSON +
+ +
+ +
+ +## Entering Key Value Pairs + +In this example, simple key-value pairs are entered in the provided input fields. Here, the values can simply be passed using double curly braces as is typically done in ToolJet. Take note of the status key. A string is combined with another value that is referred using double curly braces. + +
+ Passing Values Using The Key Value Inputs +
+ +
+ +To see REST API queries in action, check out the following tutorials: + +1. **[Gemini AI Content Generator](https://blog.tooljet.com/build-an-ai-content-generator-using-gemini-api-and-tooljet-in-10-minutes/)** +2. **[Open AI Audio Transcriber](https://blog.tooljet.com/building-an-audio-transcriber-and-analyzer-using-tooljet-and-openai/)** \ No newline at end of file diff --git a/docs/sidebars.js b/docs/sidebars.js index 375ab7cdc4..1489e12a27 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -218,6 +218,7 @@ const sidebars = { 'how-to/use-url-params-on-load', 'how-to/pass-query-params-in-custom-components', 'how-to/use-custom-parameters', + 'how-to/pass-values-in-rest-api', 'how-to/build-dynamic-forms', 'how-to/setup-rsyslog', 'how-to/conditionally-display-components', diff --git a/docs/static/img/how-to/pass-values-in-rest-api/key-value-pairs-example.png b/docs/static/img/how-to/pass-values-in-rest-api/key-value-pairs-example.png new file mode 100644 index 0000000000..acab34ed12 Binary files /dev/null and b/docs/static/img/how-to/pass-values-in-rest-api/key-value-pairs-example.png differ diff --git a/docs/static/img/how-to/pass-values-in-rest-api/raw-json-example.png b/docs/static/img/how-to/pass-values-in-rest-api/raw-json-example.png new file mode 100644 index 0000000000..48f898a4cb Binary files /dev/null and b/docs/static/img/how-to/pass-values-in-rest-api/raw-json-example.png differ diff --git a/docs/versioned_docs/version-2.50.0-LTS/how-to/pass-values-in-rest-api.md b/docs/versioned_docs/version-2.50.0-LTS/how-to/pass-values-in-rest-api.md new file mode 100644 index 0000000000..bdc8b47f46 --- /dev/null +++ b/docs/versioned_docs/version-2.50.0-LTS/how-to/pass-values-in-rest-api.md @@ -0,0 +1,55 @@ +--- +id: pass-values-in-rest-api +title: Pass Values in a REST API Query +--- + +This guide gives you an overview of how you can pass values in a REST API Query using raw JSON and key-value pairs. + +
+ +## Raw JSON + +In the following JSON code, the `${}` syntax is used for JavaScript string interpolation within template literals (also called template strings). This allows dynamic values from JavaScript variables or expressions to be injected directly into the string. + +```javascript +{{ + `{ + "contents": [{ + "parts": [{ + "text": "Generate the following content for this image in markdown format: + content type: ${components.typeOfContentInput.value}, + additional info: ${components.additionalInfoInput.value}" + }, + { + "inline_data": { + "mime_type":"image/jpeg", + "data": "${components.imageUploader.file[0].base64Data}" + } + },], + },], + }` + }} +``` + +
+ Passing Values Using Raw JSON +
+ +
+ +
+ +## Entering Key Value Pairs + +In this example, simple key-value pairs are entered in the provided input fields. Here, the values can simply be passed using double curly braces as is typically done in ToolJet. Take note of the status key. A string is combined with another value that is referred using double curly braces. + +
+ Passing Values Using The Key Value Inputs +
+ +
+ +To see REST API queries in action, check out the following tutorials: + +1. **[Gemini AI Content Generator](https://blog.tooljet.com/build-an-ai-content-generator-using-gemini-api-and-tooljet-in-10-minutes/)** +2. **[Open AI Audio Transcriber](https://blog.tooljet.com/building-an-audio-transcriber-and-analyzer-using-tooljet-and-openai/)** \ No newline at end of file diff --git a/docs/versioned_sidebars/version-2.50.0-LTS-sidebars.json b/docs/versioned_sidebars/version-2.50.0-LTS-sidebars.json index 158c3ddd2e..9732efdf66 100644 --- a/docs/versioned_sidebars/version-2.50.0-LTS-sidebars.json +++ b/docs/versioned_sidebars/version-2.50.0-LTS-sidebars.json @@ -208,6 +208,7 @@ "how-to/use-url-params-on-load", "how-to/pass-query-params-in-custom-components", "how-to/use-custom-parameters", + "how-to/pass-values-in-rest-api", "how-to/build-dynamic-forms", "how-to/setup-rsyslog", "how-to/conditionally-display-components",