2. Create a user interface in the App Builder

Use the App Builder to map the input arguments in the code for example, main.R, to user inputs in the App Panel.

Click on the App Builder tab on the left to enter the App Builder.

You can set up the parameters when in build mode. Click on the wrench icon () or Create App to enter build mode.

The App Builder contains four separate sections. In this guide, we will continue use the sample file to fill in each of the sections.

• General - covers basic information about the App

• Data - enables the attaching of data assets that can be swapped out

• Parameters - set configurable parameters that are sent as arguments to run the script

• Display Result After Run - choose output files to display in the main window

Adding General Information

This section allows you to set the title for the application along with a short description of the App usage. It is recommended to create aREADME.mdfile along with the application to help users understand the functionality of the tool, the inputs and outputs of the application, and any additional necessary information.

The example below shows the completion of the General section. This capsule plots a sine function.

This description will not appear outside of build mode until data or parameters have been added to the capsule.

Adding Data

Data consists of any data assets that can be attached to the capsule.

In the example, the input data is the user's own data being attached as a data asset. Let's create the Data Asset and attach it to the capsule.

To create an asset containing the data:

• Click Files

• Download sample-data.txt

• Click Manage Data Assets

• Create a new data asset from the downloaded file

This is a quick walkthrough on creating Data Assets via uploading a file. Please check out this guide for more details.

Now the Data Asset is created, get back to the App Builder and continue adding the Data Assets.

• Navigate to App Builder

• Enter Build Mode - click Create App

• Click Attach Data Assets

• Select the data asset

• Click Add

• Provide the information for the:

  • Label

  • Default Data

  • Description

• Click Save

Adding Parameters

App Panel supports three types of input parameters. The icons at the top of the Parameters panel represent each type:

main.R plots a sine function. You will set up the following three arguments in this example from main.R.

1. plot_title: the title of the figure in the result file.

2. number_of_cycles: # of cycles for the sine function.

3. input_data: a txt file that indicates the sampling rate.

The argumentsargs[x]in line 9-11 need to match with the three input parameters in the panel in sequential order from top to bottom. The following three tabs show you how to set the input parameters up respectively.

The following three tabs show you how to set up three parameters in the Parameters panel. Click on each tab for more details.The first parameter value you set up goes toargs[1]in the code. It is stored in plot_titleas the first argument. This parameter lets the viewer type the plot title by entering any text. A Text Parameter is the most appropriate parameter type here.

plot_title

Click on in the Parameters section to add a new Text Parameter. Fill in the fields: Label (required) should inform the viewer of the meaning of this parameter, for example, Title. Default Value (optional) is the value for the parameter for example, “Hello Code Ocean”. Description (optional) is a brief description of the parameter, this will appear as a hover-over explanation for the information icon, for example, This sets the title for the output plots. Click Save to create this parameter.
The result of the saved text parameter.

number_of_cycles

The second parameter value you set up goes to args[2] which is stored in number_of_cycles as the second argument. This parameter allows the viewer to select the number of cycles for the plot. Both Text and List Parameters are suitable, using List Parameter is limited to a list of predefined values.

Click to add a new List Parameter section. Fill in the fields: Label (required) represents the number of cycles, for example, # of cycles. List Values (required) allows you to add a list of inputs, each in a separate line as the options of cycles. In this example, you can enter 3, 5, and 7. Default Value (optional) allows you to choose a default. In this example select 3 from the drop-down menu. Description (optional) is a brief description of the parameter, Sets the number of cycles to generate the sine plot. Click Save to create this parameter.
After you add the # of Cycles parameter, your Parameters panel should look like this

input_data

The third parameter value you set up goes to args[3], which is stored in the variable input_dataas the third argument. This parameter lets the viewer choose the input file. While both the File parameter type and the Text parameter type would be appropriate here, it is preferable to attach data assets with the input file. For this example, the text parameter is selected and the path set for the input file

Files uploaded to the /data folder will appear in the drop-down menu.

Click in the Parameter panel to create a new file parameter section. Fill in the fields: Label (required) should indicate the function of this parameter, for example, Input Points File". Default Value (optional) is the parameter value for example, /data/Sample_Input/sample-data.txt Description (optional) is a brief description of the parameter and will appear as a hover-over explanation for the information icon, for example, Path to the input file containing the points that will determine the length of the sine plot. Click Add to create this parameter.

After you add the Input data parameter, your Parameters panel should look like this

Swapping the Order of App Panel Parameters

To swap the order that the App Panel Parameters are displayed. In Build Mode select the six ellipses . Drag and drop the Parameters into the required order.

Display Result after Run

This allows you to set results to display to the user after running the capsule. These are static paths, so the outputs will need to have the same name for every run. In this example, fig1.png and fig2.png are always output, they can be set as the results display.

Note: a reproducible run must be done in order to see available results files to display after the run.

After adding both results:

The final App Panel result is displayed below: