My trials with SAP Intelligent RPA –UI Designer design screen for data read from excel file

Posts in the series

What we are trying to achieve in this post?

In our previous posts we have been able to set and read data from excel file via inbuilt activity as well as scripting. If you remember we were logging the data to see what is being read and this can be seen in debug log. Depending on the business case it might happen someone needs to confirm before proceeding towards the next step. So this is what we would like to explore, how do we present the read data in this post. This will help us in understanding an important component of iRPA which is UI Designer.

What is UI Designer?

So a UI designer is one of the component which helps us in designing User interfaces which we can use for designing templates for the interaction. The templates can range from a simple pop up to confirm to credential input form to anything. So lets create a custom pop up containing a table to display the data.

Lets design our pop up!

Right click on POPUPS -> Add a new Popup

The default project contains 4 files out of which you can use popup.js and popup.css to change the behavior of the html page which we will explore in coming posts. For this post our focus is to use the inbuilt feature and design the page. Apart from these 4 we have one more tab which is knows as Items. Under Items only we will embed our different form elements.

Click on design mode and then right click -> Choose container

Set the properties, name etc.

Now we have the container we need to insert a table inside the container to display the excel data we have read in our previous posts. Remember we have the data stored in the context container. Right click choose table. Update the name, table title and column names in the properties.

If you notice the table is outside the container drag it inside the container not a mandatory step but to be more logical. Add a save button by right clicking also and drag it inside the container.  The save button will not do anything as of now, in coming posts we will integrate it.

Now we have our table ready all that is left is to link with our existing read excel workflow, let’s do it.

Integrate our pop up with existing read excel workflow

As we got introduced to scripting in our last post, we will use the same approach to integrate our pop up call. The context CTX contains a POPUPS class using which we can refer our custom pop up. Lets bind our data from context to the table.

ctx.popups. myTable.excelData.set(rootData.excelinput[0]);

Now the data is assigned lets now call the pop up!.

ctx.popups.myTable.open();

Now we have designed the pop up and integrated it with the existing workflow also, time for demo.

Demo of the Popup

Let’s now looks at the demo.

What is next?

Since now we have incorporated the basic UI in coming posts we will look at the customization of the UI, integration with SAP, other control’s etc.