Technical Articles
SAP Intelligent Robotic Process Automation 2.0 | Handle & Automate Various Business Workflows With UI Designer Based-Bot
Overview
Here is a short blog post to get you started on building a UI Designer Based-Bot which will handle and automate your entire Business Workflows. Lets get started with the definitions & purpose of tools used for making it.
UI Designer
Desktop Studio includes a UI Designer perspective. This perspective makes it possible to graphically design:
●Input Forms
●Custom pages
●Application bars
For simplicity’s sake, all these types of UI will be referred to as custom pages.
UI Designer is a graphical wrapper based on the Bootstrap-3 framework. Using UI Designer, every custom page is an empty HTML page whose content is dynamically built using JavaScript code.
SAMPLE USE CASE
A Simple UI Bot with multiple buttons. Each button is to trigger a specific workflow. You can create your own design of custom pages and can add various buttons or messages in UI Perspective of Desktop Studio.
Understanding it through a Flow Chart
UI Designer Perspective
The UI Designer perspective is where you design user interfaces, such as input forms or custom pages. When you select the UI Designer perspective tab, Desktop Studio displays the UI Designer perspective panel:
This panel consists of:
●The Resources tree (1)
●The popup editor zone (2)
●Various tool windows (3, 4) that can be docked around it.
Steps to create Popups
First you have to be aware about all the icons present in UI Perspective.
Then, you can add a pop by just clicking Right.
Design Mode
When design mode is active, each item is surrounded by a dotted rectangle with the Name property in the top-right corner. In this mode, you can:
●Add new items
●Select an item to edit its properties
Once, you have added all your items. You can change properties of the items as well such as name, color, etc.
Modify your code according to your design requirements. You can verify it from below codes.
popup = POPUPS.SYSTEM = POPUPS.popup({ SYSTEM: { template: e.popup.template.NoButton, url: "SYSTEM\\popup.html", CX: 490, CY: 500, X: e.popup.position.Center, Y: e.popup.position.Center }}); GLOBAL.events.START.on(function (ev) { if (ctx.options.isDebug) { systray.addMenu("", "TestPopup", "Test popups"); systray.addMenu("TestPopup", "SYSTEMOpen" , "Open SYSTEM", "", function(ev) { POPUPS.SYSTEM.open({ testMode: true }); }); systray.addMenu("TestPopup", "SYSTEMClose" , "Close SYSTEM", "", function(ev) { POPUPS.SYSTEM.close(); }); } }); POPUPS.SYSTEM.onTest(function(popup) { // TODO : add your tests here }); popup.item({ alert1: { type: e.item.type.alert, parent: "", style: e.item.style.Cyan, close: false, value: "", test: "<strong>Welcome to Automation World. Please select your System.</strong>", auto: true }}); popup.item({ button1: { type: e.item.type.button, parent: "", value: "ES1", tooltip: "Add", style: e.item.style.Blue, icon: e.item.icon.none, iconSide: e.item.side.left, badge: "", badgeStyle: e.item.style.None, size: e.item.size.Large, close: false, submit: false, disabled: false, right: false, justified: false, fa: "", animated: false, pulse: false, auto: true }}); popup.item({ button2: { type: e.item.type.button, parent: "", value: "S4H", tooltip: "Add", style: e.item.style.Blue, icon: e.item.icon.none, iconSide: e.item.side.left, badge: "", badgeStyle: e.item.style.None, size: e.item.size.Large, close: false, submit: false, disabled: false, right: false, justified: false, fa: "", animated: false, pulse: false, auto: true }}); popup.item({ button3: { type: e.item.type.button, parent: "", value: "E68", tooltip: "", style: e.item.style.Blue, icon: e.item.icon.none, iconSide: e.item.side.left, badge: "", badgeStyle: e.item.style.None, size: e.item.size.Large, close: false, submit: false, disabled: false, right: false, justified: false, fa: "", animated: false, pulse: false, auto: true }}); popup.item({ button4: { type: e.item.type.button, parent: "", value: "SM1", tooltip: "", style: e.item.style.Blue, icon: e.item.icon.none, iconSide: e.item.side.left, badge: "", badgeStyle: e.item.style.None, size: e.item.size.Large, close: false, submit: false, disabled: false, right: false, justified: false, fa: "", animated: false, pulse: false, auto: true }}); popup.item({ button5: { type: e.item.type.button, parent: "", value: "SM3", tooltip: "", style: e.item.style.Blue, icon: e.item.icon.none, iconSide: e.item.side.left, badge: "", badgeStyle: e.item.style.None, size: e.item.size.Large, close: false, submit: false, disabled: false, right: false, justified: false, fa: "", animated: false, pulse: false, auto: true }}); popup.item({ button6: { type: e.item.type.button, parent: "", value: "SEG", tooltip: "", style: e.item.style.Blue, icon: e.item.icon.none, iconSide: e.item.side.left, badge: "", badgeStyle: e.item.style.None, size: e.item.size.Large, close: false, submit: false, disabled: false, right: false, justified: false, fa: "", animated: false, pulse: false, auto: true }}); popup.item({ image1: { type: e.item.type.image, parent: "", src: "../SYSTEM/robot.jpg", width: "460px", height: "300px", auto: true }});
Workflow Design
- Create multiple workflows of various SAP scenarios.
- Make a main workflow with custom pages developed in UI Perspective.
- Attach your scenarios or workflows with the main workflow on various buttons in custom page.
- You can use “Wait Click” Activity – The activity will trigger whenever a user clicks the button.
- Similarly, various workflows can be connected through button of this UI Based-Bot.
You can build your Project and make it ready for execution.
Conclusion
In this blog post, i have tried to explain most of the UI Designer based content. Hope it gives you some idea of creating UI Designer Based-Bot attached with multiple workflows. Almost every Business Processes can be automated through SAP IRPA. 2.0.
Thanks! I hope it works. 😉