1 Context:
This step entails building and setting up a workflow. We will build a simple integration with an API (SpaceX) and will insert a button. This button will trigger the workflow on the server, which will then call the SpaceX API to return flight data.Â
2 Step by step guide:
- Create a new Form âAutomationForm_<yourName>
- to do this, Navigate to âDesignâ -> âFormsâ and select âCreateâ
- Fill in a âNameâ
- âMyAutomationFlow_<yourName>â
- âDescriptionâ
- âSmart-Moduleâ -> âMyAppModuleâ
- on the right, select âSwatFormâ as template
- open the Form in Designer (or enable âopen in Designerâ in previous step)
- Use âLibrary of Objectsâ to add a âSimpleSwatButtonâ and set enable = true, label = âcall SpaceXâ
- edit the onClick event of the Button and insert the following code:
âŁ
b1.v1.App.invokeServerTask({
methodName: "myFirstWorkflow",
methodType: "automation",
paramObj: {
payload: { launches: "latest"}
},
})
- Add the Form to your OrderOverView Screen whereever you like (e.g. add another Page, or change the Layout,âŚ)
Implement the Automation-Flow
- Navigate back to the Home Screen. On the right panel click on the button âLaunch Automation Hubâ to go to the workflow area of Build.One
- A workflow window will appear. Click on the button âStart from scratchâ to create a new workflow from scratch, then the editor appears. (if you have existing workflows, click the âAdd workflowâ Button in the uppre right)
- Insert the following 3 nodes (Webhook, http request, Respond to Webhook). You can do that by clicking the plus icon in the top right corner or in the middle:
- 1. Webhook:
- Authentication: âNoneâ
- HTTP Method: âPOSTâ
- Path: âmyFirstWorkflowâ
- Respond: âUsing 'Respond to Webhook' Node â
- Then select âBack to canvasâ in the top left corner
- Click on the small plus sign next to your âWebhookâ node to create the next part of your workflow
- HTTP Request:
- Method: âGETâ
- URL: https://api.spacexdata.com/v5/launches/latest
- Authentication: âNoneâ
- Respond With: âFirst Incoming Itemâ
- Your workflow should look like this. Important: Set it from â ď¸âInactiveâ to â âActiveâ & click on save in the top right corner:
b. Respond to Webhook
Check the Result
- Launch the screen and click on the button.
- Navigate to your Automation-Flow and switch from âDesignâ to âExecuteâ
You see all executions of your workflow. click on an execution, to see the flow of data through the nodes.
Trouble shooting
Use the Network Tab of the Browser to check if your Automation-Flow is called correctly or if there are errors. Possible problems to check:
- Did you set your Automation-Flow to âactiveâ ?
- Did you set the Webhook Node to âPOSTâ ?
- Is the Path in your webhook node correct and matches with your button-code (it is case-sensitive!) ?
3 Explanation:
With this workflow example, we show how easy it is to connect an external API using visual tools. This task includes three components: