• EN
Solved

How to trigger automation via costum html-form and API

  • 17 April 2024
  • 4 replies
  • 44 views
worjak
Rank
Badge +3

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:

html-form

The html-code is this:

html-code

 

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:
 

API-page
  1. 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?
  2. 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

icon

Best answer by worjak 3 May 2024, 11:29

View original

4 replies

jkr_wrk
Rank
Userlevel 4
Badge +18

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.

@ReplaceString(@Value(Verpakking),"Frites","Patat",caseSensitive=False)
worjak
Rank
Badge +3

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
Rank
Badge +3

costum=custom! 

worjak
Rank
Badge +3

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


Community Stats

28,807
Posts
109,810
Replies
36,622
Members
Terms & ConditionsCookie settings
A product of
Safe Software respectfully acknowledges that we live, learn and work on the traditional and unceded territories of the Kwantlen, Katzie, and Semiahmoo First Nations.