1 Context:
In this example, we integrate a frontend button that, when clicked, executes custom client logic and outputs a Hello World message in the frontend. For this purpose, we write our own frontend class that executes this command.
2 Result:
3 Step by step guide:
- 👋 Navigate to “Design” –> “Screens” and copy the “TrainingDay4_OrderOverview” screen and replace the “TrainingDay4” with your name at the end like this “OrderOverview2_<yourName>”, then open it
- 👋 Open the Form Designer of the OrderForm by clicking the small gear wheel icon
- 👋 At the bottom insert a “SimpleSwatBlock” and fill in a “SimpleSwatButton”
- 👋 Select the “SimpleSwatButton” and set the attribute “Enabled” to true in the “Attributes” panel
- 👋 Close the Form Designer and navigate back to the Screen Designer
- 👋 In the ribbon select the button “</> Open events file”. A new file is created in the Gitpod workspace (Pro-Code Workspace). This file is created automatically in the right place in the webui folder. Navigate to your Pro-Code Workspace
- 👋 Start typing “b1” in the created file and see the different code-templates you can use. Please select the “eventFunction” and press enter
- 👋 Change the function name to “myMessage”
- 👋 Start typing in the body of the function “akioma.” then “swat.” then “Message.” and then select the “informationMessage”
- 👋 Fill in the parameter field the string “Message was sent #HelloBuild1”
- 👋 Press “Strg + S” to save and compile your code
- Navigate back to the Build.One Low-Code Workspace and go to the Form Designer of your order screen and select the button
- 👋 Search for the attribute “eventClick” in the “Attributes” panel and fill in “#.myMessage(eventSource);”
- 👋 Make sure in the screen itself the attribute “EventNamespace” -> “#” is set
- 👋 Empty the cache and hardreload, then launch your screen and click the button to see the message
Example Code:
export function <yourFunctionName>(eventSource: akioma.swat.SwatObject) {
akioma.swat.Message.informationMessage ('The Button can have any functionality you want to have :)!!');
}4 Explanation:
When integrating custom frontend logic, there are no limits to creativity. The given example may be very simple, but is solely meant to exemplify the ease of use. Much complexer logic can also be integrated using these priciples mechanics. Complex validations can be implemented with ease, for example.