hclleapforum

Open full view…

Populating form fields with API get call data

rwalsh3711
Fri, 11 Sep 2020 21:03:43 GMT

Hello, I'm working on utilizing leap as a front end to some automated solutions we currently have utilizing Ansible Tower. One of the projects I'm working on would require gathering output from a query to a device API and populating the form with it. As an example, I'm trying to get a multi-line field to auto-populate with the json data from an API get call. In the form field, I have the following code in the "onShow" Event: --- async function fetchText() { let response = await fetch('https://jsonplaceholder.typicode.com/todos/1') let data = await response.text() return data } output = fetchText(); item.setValue(output) --- Unfortunately, the preview only shows "[object Promise]". Does anyone have any suggestions? This is merely the first step of what I'm looking to accomplish and I don't seem to be making much progress. It doesn't help that this is my first run at using JavaScript. :)

christopher_dawes
Fri, 13 Nov 2020 19:51:48 GMT

Sorry for the late reply, I am sure you have figured this out by now. The issue is that you are triggering an async request, and the rest of the code continues, so when you set the value of the field the async request has not returned. I was able to get around this by doing this: var fld = item; async function fetchText() { let response = await fetch('https://jsonplaceholder.typicode.com/todos/1') let data = await response.text() fld.setValue(JSON.stringify(data)); } In this case the fetchText actually sets the returned content into the field. The other approach would be to setup an event listener for when the fetch call completes. I would instead opt to use the ServiceByURL feature, which will enable you to map the outputs directly to your form fields.

rwalsh3711
Fri, 19 Feb 2021 21:45:33 GMT

Hi Christopher and thank you for your reply! I'm finally getting time to revisit this issue. Thanks to your help, I was able to get the fetch to work with the test URL. Unfortunately, the URL I really need to pull data from is much more problematic. My goal is to query a network device API and extract information to populate the Leap form. The main issues I have are handling the authentication and dealing with the fact that the devices are using self-signed certificates. My queries using Postman and node work just fine, however the code gives errors in Leap. Here's an example of the code that works from the cli: ``` token = (btoa('username:password')); process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; async function fetchText(url) { let response = await fetch(url, { method: 'GET', headers: { 'Authorization': 'Basic ' + token, 'Content-Type': 'application/json' } }); let data = await response.text(); \\BO.F_Paragraphtext1.setValue(data); console.log(data); } fetchText('https://{net_device_ip}/mgmt/tm/ltm/pool'); ``` Running this from the CLI returns data fine, but when I try to put this in Leap and preview (I have this code set to run "on show") I get: ``` There was an error executing the onShow event code on item Status, page Page 1, form Form 1. Caused by: ReferenceError: process is not defined ``` When I remove the process.env line I don't get an error but nothing populates and I get this error in the browser console section: ``` Uncaught (in promise) TypeError: Failed to fetch ``` Not sure if there's some other method to ignore self-signed certs that Leap would work with but any guidance you could provide would be very much appreciated. Thanks!

christopher_dawes
Tue, 23 Feb 2021 17:09:17 GMT

To address certificate issues you would need to install the same self-signed certs into your WebSphere environment where Leap is deployed.