Solved

How to trigger automation via costum html-form and API

1 year ago
April 17, 2024
4 replies
167 views

worjak
Contributor
18 replies

Hi,

I am struggling to trigger a automation from a custom html-form. It seems that the post-action never gets to the automation in FME Flow.

My html-page looks like this:

The html-code is this:

When I hit the [Submit]-button I get a white page - no error - nothing is logged! I know the automation works because the API-page gives me this:

What I think might be wrong is that on the API-page I have a Token - which I don’t have on my custom html-form! How do I add the token to the HTM-form?
Another question is wheather the request body coming from the custom html-form is right since I don’t see it?

Thanks in advance.

Regards Jakob

Best answer by worjak

I solved this with chatGPT. It made me a bit of javascript so the token could go into the http-request-header:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Forms</title>
</head>
<body>

  <h1>Sample Form 1</h1>

  <form id="sampleForm1">
    <label for="input1">Input 1:</label>
    <input type="text" id="input1" name="input1" required><br><br>

    <label for="input2">Input 2:</label>
    <input type="text" id="input2" name="input2" required><br><br>

    <button type="submit">Submit</button>
  </form>

  <h1>Sample Form 2</h1>

  <form id="sampleForm2">
    <label for="input3">Input 3:</label>
    <input type="text" id="input3" name="input3" required><br><br>

    <label for="input4">Input 4:</label>
    <input type="text" id="input4" name="input4" required><br><br>

    <button type="submit">Submit</button>
  </form>

  <script>
    // Function to handle form submission
    function handleFormSubmit(event, formId, nextPage) {
      event.preventDefault(); // Prevent default form submission

      const token = "your_auth_token_here";
      const url = 'https://example.com/api/endpoint';
      const formData = new FormData(document.getElementById(formId)); // Get form data

      // Convert form data to JSON object
      const postData = {};
      formData.forEach((value, key) => {
        postData[key] = value;
      });

      // Options for the fetch request
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}` // Adding the token to the Authorization header
        },
        body: JSON.stringify(postData) // Convert the postData object to JSON string
      };

      // Making the fetch request
      fetch(url, options)
        .then(response => {
          if (response.status === 202) { // Check for 202 Accepted status code
            // Redirect to the next page after successful submission
            window.location.href = nextPage;
          } else {
            throw new Error('Network response was not ok');
          }
        })
        .catch(error => {
          // Handle errors
          console.error('There was a problem with the fetch operation:', error);
        });
    }

    // Add event listeners to the forms
    document.getElementById('sampleForm1').addEventListener('submit', function(event) {
      handleFormSubmit(event, 'sampleForm1', 'nextstep.html');
    });

    document.getElementById('sampleForm2').addEventListener('submit', function(event) {
      handleFormSubmit(event, 'sampleForm2', 'nextstep.html');
    });
  </script>

</body>
</html>

View original

Did this help you find an answer to your question?

+28

jkr_wrk
384 replies
1 year ago
April 17, 2024

if you add <INPUT NAME=”token” value="blablabla” type=”hidden” /> it will send the token as a get parameter. But keep in mind your token is visible to everyone with access to your html page.

💡 Did you know... The FeatureWriter is more intuitive. 😏

worjak
Author
Contributor
18 replies
1 year ago
April 17, 2024

The html-form uses the post-action as required by the API, but adding this didn’t change the result.

<INPUT NAME=”token” value="blablabla” type=”hidden” />

I suppose that adding the token as above will result in a http (post) request body like:

{ "token": "blablabla", "p_schema": "okf", "p_table": "v_bydel" }

“blablabla” is obvioursly substituted with my API-key 😉

worjak
Author
Contributor
18 replies
1 year ago
April 17, 2024

costum=custom!

worjak
Author
Contributor
18 replies
Best Answer
11 months ago
May 3, 2024

I solved this with chatGPT. It made me a bit of javascript so the token could go into the http-request-header:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Forms</title>
</head>
<body>

  <h1>Sample Form 1</h1>

  <form id="sampleForm1">
    <label for="input1">Input 1:</label>
    <input type="text" id="input1" name="input1" required><br><br>

    <label for="input2">Input 2:</label>
    <input type="text" id="input2" name="input2" required><br><br>

    <button type="submit">Submit</button>
  </form>

  <h1>Sample Form 2</h1>

  <form id="sampleForm2">
    <label for="input3">Input 3:</label>
    <input type="text" id="input3" name="input3" required><br><br>

    <label for="input4">Input 4:</label>
    <input type="text" id="input4" name="input4" required><br><br>

    <button type="submit">Submit</button>
  </form>

  <script>
    // Function to handle form submission
    function handleFormSubmit(event, formId, nextPage) {
      event.preventDefault(); // Prevent default form submission

      const token = "your_auth_token_here";
      const url = 'https://example.com/api/endpoint';
      const formData = new FormData(document.getElementById(formId)); // Get form data

      // Convert form data to JSON object
      const postData = {};
      formData.forEach((value, key) => {
        postData[key] = value;
      });

      // Options for the fetch request
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}` // Adding the token to the Authorization header
        },
        body: JSON.stringify(postData) // Convert the postData object to JSON string
      };

      // Making the fetch request
      fetch(url, options)
        .then(response => {
          if (response.status === 202) { // Check for 202 Accepted status code
            // Redirect to the next page after successful submission
            window.location.href = nextPage;
          } else {
            throw new Error('Network response was not ok');
          }
        })
        .catch(error => {
          // Handle errors
          console.error('There was a problem with the fetch operation:', error);
        });
    }

    // Add event listeners to the forms
    document.getElementById('sampleForm1').addEventListener('submit', function(event) {
      handleFormSubmit(event, 'sampleForm1', 'nextstep.html');
    });

    document.getElementById('sampleForm2').addEventListener('submit', function(event) {
      handleFormSubmit(event, 'sampleForm2', 'nextstep.html');
    });
  </script>

</body>
</html>

Reply

Rich Text Editor, editor1

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

Cookie settings

We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.

Basic
Functional

Normal
Functional + analytics

Complete
Functional + analytics + social media + embedded videos + marketing

How to trigger automation via costum html-form and API