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.

The Resources tree displays a list of the popups included in the project. It allows you to:

●Manage the popups included in the project

●Manage the list of files used by the popup

●Manage the list of items of a popup

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

1. Create multiple workflows of various SAP scenarios.
2. Make a main workflow with custom pages developed in UI Perspective.
3. Attach your scenarios or workflows with the main workflow on various buttons in custom page.
4. You can use “Wait Click” Activity – The activity will trigger whenever a user clicks the button.
5. 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.