Build a Quick Application

This tutorial is currently being updated for the DigitalSuite Studio.

This tutorial is designed for users who are new to the RunMyProcess platform, it will guide you step-by-step through the stages of a simple application development. The application we will produce includes the main steps that are common to most applications on the platform - creating a project, creating a custom list, creating a web interface, designing a process, adding a web connector and integrating with a spreadsheet.

Building this application will give you a basic understanding of how the RunMyProcess platform works. Once you are comfortable with this project, we suggest that you move on to other help tools provided.

Once you've completed this project, we would like you to let us know whether you found the guide helpful or not.

What the application does

In the final version of the application, a user will be able to select a currency YYY from a list, in a web interface, and submit it.

Clicking on the Submit button will trigger a workflow process that will:

Get FX rates from the European Central Bank connector for the currency chosen by the user;
Assign a task to another user that will display the current FX rate and asks for his/her approval;
Upon approval, the application will write the FX rate, the name of the user and the date to a Google spreadsheet (link).

Let's get started

To start developing a new application, you must begin by creating a new RunMyProcess project. Click on New Project in the Home section of the platform.
Add a Title and choose a designer group from the choice offered to you - choose a group that you are a member of, this will give you the right to design the project. We encourage you to consult the explanation of how to choose the proper organization and lane available in the user guide. Click Create to create the new project.
You can now view the project. The project's resources are listed under Resource explorer.
As the application will make use of email, we need to include a project that provides emailing capability. Click on Include a project (1), select Mail provider (2) and then click OK (3). The Mail Provider project is deployed on all accounts and is the RunMyProcess default email provider.
We are now ready to start designing our process. Click on the + New button and select Process.
In the window that appears, select the group that will have the right to trigger the process. Please note that the developer/designer also needs to be a member of the group in order to trigger the process. After choosing a group add a Process name, and click Create. The name given to the process should be the same as the name of the application that we are creating.
You can now start designing the process. You will notice a purple circle on the workspace - this represents the starting point of your process. The tools available for you to use to design the process will be surrounding the purple circle. For our sample application, we will only be using two tools, but we encourage you to consult the complete list of process features available in the user guide.
If at any point during your process design you find yourself unable to edit your process, it's possible that it has been "locked". This is done as a precaution against the accidental editing of a process. To unlock the process, click on the barred pencil and paper icon in the corner of the work area.
We now need to add steps to our process. Click on the yellow square tool from the tools surrounding the starting purple circle and drag it to the right. Notice that the tools move to the latest step in the process. Repeat this process three times (1+2+3) to create three steps in our process. Finish the process by clicking on the purple circle to drag an end point to the process (4). Rename each step by double clicking it and inserting the following text:

Step 1: "Get FX rate from ECB"
Step 2: "Validation by the manager"
Step 3: "Write data to public spreadsheet"

Don't forget step (4)!
Save your process by clicking on the disk icon under the process design tab. We encourage you to consult the complete list of the process design features available in the user guide.

You now need to return to the project tab, you can do this by using this shortcut:
In the application, the end user will select a currency from a drop down list. Before creating the web interface, we need to create a custom list that will be used as a source for the drop down list in the web interface. We encourage you to consult the tips to follow to create a custom list available in the user guide.
Click on + New and then select Custom list.
Change the name of the list to Currencies (1), then add three items to the list by clicking on Add Line, and complete the Label and Value for the following currencies: EUR, USD, GBP (2). Then save by clicking on the disk icon (3).
Return to the project tab.
Please note that as you use different areas of the platform, you can navigate easily between the work tools (process builder, interface builder etc.) by using the tabs that will open at the top of the work area.
To create the web interface, click on + New and then select Web interface.
Add a title for the web interface (1) and then click on the Design tab (2).
In the web interface Widget Tool Box, click on the List icon to add a list (1). Change the label to Currency (2) and select Custom List (3) as the list type.
Then, click on Choose a list to view the pre-created custom lists. Choose the list "Currencies" that you created earlier and click OK.
Save the web interface of your new application by clicking on the disk icon.
Note: a web interface consists of multiple screens that correspond to different groups of users and steps of the same process. In this example, a requestor selects a currency (from the launch screen) and a manager validates the exchange rate (on the validation screen). The first screen is always the launch screen at the beginning of the process.
A Submit button needs to be added that will launch the process when clicked. Firstly add a new widget zone to the launch screen by clicking on the +, select widget Button (1), change the label to Submit (2), and click Choose a process (3).
Select the process that you created earlier, Quick Currency App, and click OK.
Next, we will create a second screen for this web interface that will correspond to the validation step of the process. To create a new screen click on the green +.
Name your new screen Validation (1), and click Add a new screen (2).
You've now created a second screen. When you add a new screen to a web interface you may not necessarily want to see all elements of the first screen and you may want to add others. To manage this, you can edit the visibility settings of each widget in the web interface. Managing different screens of the same web interface makes it possible to share elements and variables of the process without having to re-create everything multiple times.

In this example, the Currency widget needs to be visible in the Validation screen, to facilitate this click on the currency widget (1), go to Rules tab (2), and tick Visible (3) and tick Required. By default, the Submit button is not visible. As this button isn't needed on the validation screen, it remains invisible. The Submit button is only visible on the launch screen.
The second screen will be used to validate the FX rate, the FX rate therefore needs to be displayed on the screen. To place a new widget to the right of the Currency one click on + on the right margin of the Currency Widget (1).

This will create a new widget zone on the right. Choose Number Input from the Choose a Widget window as this widget will be used to display the FX rate.
Change the label of this widget to be FX rate in the Properties tab.
Follow the same process to add a button to the bottom left of the web interface (1) then split the row (by clicking on the + on the right hand side of this zone) to make room for a second button. Select the first widget zone and change the label to Validate (2), put choice as a variable (3) and validated for value (4).
Click on the zone on the right and repeat the process, adding another button (1). Set the label of the new button to Reject (2), add choice as a variable (3) and rejected as the value (4).
Click on the save icon to save your web form.
Return to the Process Tab to configure the various steps of the process.
Of the three steps in our process, two will use connectors (the first and third step) and one (the second step) will be a manual task. A manual task is a step that is assigned to a user role or to a specific person that he/she must manually complete in order to move forward in the process. We'll begin by configuring the 2nd activity as a manual task. Click on the second step in the process (1), then on the design icon (2), set the type to be Manual (3) and open the Assign a manual task tab that is now visible.
Write FX rate approval in the title (1), then click on Choose a web interface (2), select Quick Currency App (3) and click OK (4). Return to the Assign a manual task tab and select Validation as the screen (5). Add ${P_initiator.login} in the Assign to field (6); this is one of the standard RunMyProcess global variables that can be found in the user guide.

Ensure that Notify via email is selected (7) and click Choose a provider (8). Expand the Mail provider project by clicking on the arrow sign (9), select Default mail server (10) and click OK (11). You may want to configure your own mail provider (see example with Gmail provider).

Save your process.
Now you can proceed to configuring the first and third steps of the process which will both use connectors - the first to get the FX Rate from the European Central Bank and the third to write the data to a Google Spreadsheet.

The first step is to import the required connectors from the library.

Go to the Libraries tab and select Connectors.
Click on the Name column to sort all connectors by name.
Find European Central Bank provider, expand it by clicking on the small arrow (1) and import the Daily Euro Rate Exchange connector by clicking on the basket icon next to the connector (2).
You now have the choice between importing the connector with its provider or attaching the connector to an existing provider.
Select the first option (3), import the provider into your existing project Quick Currency App (4) and click Import (5).

Click OK when a pop-up window appears.
Return to the Libraries tab and select Connectors.
Remember that you can click on Name to sort the list alphabetically. Locate and expand the RunMyProcess - CAPI Call provider by clicking on the small arrow (1) and import Training 10 min Application - Add row in a spreadsheet connector by clicking on the basket icon (2).
Select Import connector provider as defined in the library (3), select your project Quick Currency App (4) and click Import (5).
As we will be writing data to a public spreadsheet, no authentication is required. We need to specify this in our provider. Click on the project tab (1), click on the down arrow next to Connectors (2) and click on the Google provider (3). We encourage you to consult the tips to set up your provider available in the user guide.

Set the authentication scheme to be None across all three environments - Live, Acceptance and Test.

Save your configuration.
We are now ready to make use of our imported connectors in our process. Return to the process design tab.
The first step of our process gets the exchange rate from the European Central Bank, we therefore need to configure this step as a Connector:
Click on the first step of the process (1) and click on the design tool (2), choose Connector as the type (3). Click on the Call a connector tab that is now visible (4).
Click on Choose a provider.
Select European Central Bank provider(1) and click Ok (2).
Click on Search connector in the directory.
A - Select Daily Euro Rate Exchange (1) and click OK (2).

B - Get the result of the connector which is a JSON object with the list of all the currency with their rate if they are compared with a based on 1 EUR. The idea now is to get only the value of 1 euro in the currency selected. So we have to loop on the result with the currency value select by the requester. Two outputs have to be created:
(1) currency: ${currency_value?upper_case}
(2) fx_rate: ${P_result.rate[currency]}

Don't forget to save each time you add things!
The third step in our process is to write the FX rate, the name of the user and the date to a Google spreadsheet. For this we will use the Google Spreadsheet connector that we imported from the library earlier.

To configure the third activity as a Connector:

Return to the process design tab. Click on the third step (1), click on the design tool (2) and click on the Functional tab and select Connector as the type (3). Click on the Call a connector tab that is now visible (4).
Click on Choose a provider.
Select RunMyProcess - CAPI Call (1) and click OK (2).
Click on Search connector in the directory.
Select Training 10 min Application - Add row in a spreadsheet (1) and click OK (2).

Save your process design by clicking on the save icon.
We have now configured the connectors that we will be using. The Google Spreadsheet connector will be expecting some input variables, these need to be configured to have the correct values. Click on the third step of the process (1), then click on the design tool (2) and open the Input variables tab (3). You'll see that the input variables have already been populated, these are the input parameters required by the connector. You need to update two of these variables:
- P_mode ⇒ ${P_mode}
- currency_value ⇒ ${currency_value}
- fx_rate ⇒ ${fx_rate}
The exchange rate we obtain from the European Central Bank connector will be written, along with the name of the user and the date, to a Google Spreadsheet in step 1. To facilitate this, we need to capture the output data that will be written in the spreadsheet in case if we need to check the consistency of the data. To set up output variables for the third step, click on the pencil icon (step 2) and then click on “Output variables” and create the variable:
- spreadsheet_data ⇒ ${P_result}
Save your process by clicking on the save icon.
Your first application is now ready to be tested. Go back to the web interface tab (1) and click Open in Test mode (2).
Select a currency (1) and click Submit (2).
The process has been triggered in the background. You should receive an email notifying you that a manual task has been assigned to you. Go to your mailbox, open the email (1) and click on the task link (2) (if you can't find it in your inbox, check your SPAM folder).
You can edit the value of the FX rate (1) if you want to, then click Validate (2).
Your workflow process has been successfully updated. If the project is functioning properly, you should be able to see a new row with your name in this spreadsheet.
If there is an error or a mistake in the project (for example if you didn't receive the email or you don't see your name in the spreadsheet), go back to your project, click on New, then select Report and select Process report.

Next, select Test mode (1) and click Search results (2).

You should see the following window :

The two red dots next to the processes indicate process errors. We encourage you to consult how to use the process report available in the user guide.
To investigate the errors, click on the request (1) to see the steps of the process that retrieve an error as well as the error message at the bottom of the screen:
Also, if you click on the “@ Parameters” tab, it will allow you to display the variables used and passed on by the process during execution.
Initial parameters - These parameters are sent to the process on launching.
Computed parameters - These parameters are calculated during process execution with their current values.
Internal parameters - These parameters are generated and used by RunMyProcess during execution.
You can find the values of P_result (result of a task), P_task (id of last task executed), P_user (user who has performed the latest action on the process).
If you are facing an error it will give you an idea of its nature. Otherwise, it will give you an overview of the variable values.
To consult the test web interface in the future, open your project and click on the Launch icon (1), then click Test (2) and select Last revision (3).

Congratulations! You've made your first RunMyProcess application! Was this tool helpful to you?