1 Context:

2 Step by step guide:

1. 👋 Navigate to “Design” -> “Screens” and select “Create” to create a new screen
2. 👋 Fill in a “Name”
1. “MyWorkflowScreen_<yourName>”
2. “Description”
3. “Smart-Module” -> “MyAppModule”
4. “Template” type -> “Window (simple)” and select “Confirm”
3. 👋 Now navigate to “Design” -> ”Components” -> “Forms”.
4. 👋 Search in the “List of Forms” in the “Object Name” for “ItemForm”
5. 👋 Mark it by clicking on the description and click on “Copy”.
6. 👋 Fill in the name “ItemForm2_<yourName>” and save it to your module “MyAppModule”, then select “Confirm”
7. 👋 Now navigate to “Design” -> ”Components” -> “Grids”.
8. 👋 Search in the “List of repository objects” in the “Object Name” for the “ItemGrid”,
9. 👋 Mark it by clicking on the description and click on “Copy”.
10. 👋 Fill in the name “ItemGrid2_<yourName>” and save it to your “Smart-Module” -> “MyAppModule”, then select “Ok”
11. 👋 Open the Screen Designer of your newly created screen and select the page in the “Preview” panel (Click on the blue bar where the name of the screen is displayed)
12. 👋 Change the “Attribute Value” of “Layout” to “2E” in the “Attributes” panel and select “Save”
13. 👋 Now populate the following objects (Using the ”Browse catalog of objects” panel) and connect them in the Flow Designer (select the third icon, called “Flow”, when hovered over, in the tab on the left) accordingly
1. “ItemGrid2<youName>” -> “Panel A”
2. “ItemForm2_<yourName>” -> “Panel B”
3. “ItemDSO” → “Whole Screen, blue bar where the name of the screen is displayed”
4. In the Flow Designer: “This Object” -(PrimarySdo)→ “ItemDSO” -(Data)→ ItemGrid2<youName> AND “ItemDSO” -(Display)→ ItemForm2<youName>

then select “Save”

14. 👋 Restrict the fields of the “ItemGird2” by first selecting the “ItemGrid2<youName>” in the “Preview” panel and then changing the  “Attribute Value” of “instanceRestriction” to “!ItemName,!Itemnum,*” in the “Attributes” panel
15. 👋 Open the Form Designer for the “ItemForm” by selecting the “ItemForm2_<yourName>” gear wheel in the “Layout” panel and then “Open Object Master”
1. Design the form so that it looks like this:
1. SimpleSwatBlock
2. SimpleSwatNewColumn
3. Remove not needed Attributes,

11. 👋 In the “Browse catalog of objects” panel search for the “SimpleSwatButton” and drag and drop it on the empty “SimpleSwatBlock” and click “Save” (There is currently a visualization issue. The button will appear after the safe)
12. 👋 Select the “SimpleSwatButton” and set the following attributes in the ”Attributes” panel -
1. “Enabled” -> Checkbox “True”
2. “Label” -> “Check Market prices”   Break point: Wait for the others to complete and present!
13. 👋 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
14. 👋 A workflow window will appear. Click on the button “Start from scratch” to create a new workflow from scratch, then the editor appears
15. 👋 Insert the following nodes. You can do that by clicking the plus icon in the top right corner or in the middle:
1. 1. Webhook:
1. Authentication: “None”
2. HTTP Method: “POST”
3. Path: “check-prices-<yourName>”
4. Respond: “Using 'Respond to Webhook' Node ”
5. Then select “Back to canvas” in the top left corner
16. 👋 Click on the small plus sign next to your “Webhook” node to create the next part of your workflow
1. HTTP Request:
1. Method: “GET”
2. URL: https://www.westmetall.com/api/marketdata/de/WM_Cu_high
3. Authentication: “None”
2. XML:
1. Mode: XML to JSON
2. Property Name: data
3. Code:
1. Mode: “Run Once for All Items”
2. JavaScript:
Copy

const inputData = $input.last().json;
const prices = inputData.diagram.series.lineSeries.val;
const latestPrice = prices[prices.length - 1].y;
return { message: latestPrice };

18. 👋 Your workflow should look like this. Set it from ⚠️”Inactive” to ✅“Active” & click on save in the top right corner:

Break point: Wait for the others to complete and present!

Now we will make the button, that we have previously created in our form on our screen, to the trigger for the workflow that we have just created

19. 👋 Navigate back to the Screen Designer of your screen “MyWorkflowScreen_<yourName>”
20. 👋 In the top “Ribbons” click on “</> Open event files” and go to Gitpod. In the source tree of your files a new event file should appear. The path is: /src/webui/clientlogic/_export/myapp/<Screenname>
21. 👋 Fill in the following code and press “CRTL+S” to save your code:

interface Arguments {
  context: Record<string, unknown>;
  workflowName: string;
  payload: Record<string, unknown>;
  options: { isTest: boolean; }
}
export async function <YOURFUNCTIONNAME>(args: Arguments) {
   const result = await window.akioma.automation.runWorkflow(args);
   const message = { type: result.status, ...result.payload };
   
   akioma.swat.Message.informationMessage (`The current price on the market is: ${result.payload.text} €`)}

22. 👋 Navigate back to the Screen Designer. Open the Form Designer of your “ItemForm_<yourName>” and click on your button in the “Preview” panel.
23. 👋 Search for the attribute -> “eventClick” in the “Attributes” panel and populate the “Attribute Value” with the following code (replacing the _<yourName> part in both cases) and select “Save”:
24. 👋 Click on the code button. This will open the code editor.

#.checkPrice<YourName>({   context: {     eventSource   },   workflowName: 'check-prices-<yourName>', payload: {},   options: { isTest: false } })

24. 👋 Close the Form Designer and go back to your screen
25. 👋 Click on your screen in the “Preview” panel (Click on the blue bar where the name of the screen is displayed) called “MyWorkflowScreen_<yourName>” and search for “Namespace” in the “Attributes” panel and fill the ”Attribute Value” with “#” and select “Save”
26. 👋 Execute a hard reload and empty cache of your browser tab (Open the Browser Console by clicking F12 and hold with left click on the broswer reload until the options appear ) → The hard reload is needed because everytime the frontend was built (compiled and built), it will be saved into the browser cash in order to load faster. So if you have made changes in the frontend code, the displayed app in Build.One is still based on the old Frontend code. This means every time you change something in the frontend code, you need to compile it and empty the cash to rebuild the WebUI.
27. 👋 Launch the screen and click on the button to see the message

💡 To make you screen constantly available we need to export the workflow to gitpod

28. 👋 Navigate to gitpod and go to src/data/n8n/workflow.json and delete the workflow.json. (There is already one that exists, which B1 prepared for this training. We will replace this one with the new workflow now)
29. 👋 In the terminal type in b1 export-automation
30. 👋 Your new created workflow will appear in the folder. (Please put “ [ ] ” around your code because gitpod expects a JSON if it is not there). Right click on the code and select “Format document”

3 Explanation: