Articles in this section

How to Create User Input Fields in a Custom Analysis Tool

  • Updated
Follow

Introduction

This article describes how to add input controls to a custom analysis tool so that users can select options and enter values.

mceclip0.png

 

Requirements

 

Method

Like Rules, input fields that appear in custom analysis tools are RuleForm objects which are treated as properties of a form variable. This GUI allows various methods of defining and interrogating controls.

 

There are various types of input controls that can be added to a form. Each has their own set of arguments but many of them are common. We will now go through these controls using the example at the start of this article. I have laid out each argument below on a separate line to make things clearer but this is not a requirement.

 

numericUpDown

mceclip1.png

form.numericUpDown({name: "number", 
label: "Choose a number:",
default_value: 1,
increment: 2,
minimum: 1,
maximum: 1000,
prompt: "This is a numeric control"})
  • We use form.numericUpDown to create a numeric field with up and down selectors.
  • We add a reference name and category label to the left of the control.
  • We are able to set the default value.
  • We are also able to change the minimum, maximum and increment selector values. Note, the default values for these parameters are 0, 100 and 1 respectively.
  • Finally, we add an optional tooltip prompt.

checkBox

mceclip2.png

form.checkBox({name: "checkbox", 
label: "Tick me",
default_value: true,
prompt: "This is a checkbox control"})
  • We use form.checkBox to create a checkbox selector.
  • We add a reference name and category label to the left of the control.
  • We are able to set the default value which is either true or false.
  • Finally, we add an optional tooltip prompt.

textBox

mceclip3.png

form.textBox({name: "textbox", 
label: "Enter text:",
default_value: "*",
type: "text",
required: false,
expression: false,
prompt: "This is a textbox control"})
  • We use form.textBox to create a text field.
  • We add a reference name and category label to the left of the control.
  • We are able to set the default value and the format type (i.e. text or number).
  • We are also able to change the defaults from true for requiring a response and treating the input as an expression rather than a string that requires quotes.
  • Finally, we add an optional tooltip prompt.

comboBox

mceclip4.png

form.comboBox({name: "combobox", 
label: "Select an option:",
alternatives: ["Yes","No"],
default_value: "Yes",
required: false,
expression: false,
prompt: "This is a combo box control"})
  • We use form.comboBox to create a combo box.
  • We add a reference name and category label to the left of the control.
  • We set the alternatives as an array of categories to choose from.
  • We are able to set the default value which must be included in the alternatives array.
  • We are also able to change the defaults from true for requiring a response and treating the input as an expression rather than a string that requires quotes.
  • Finally, we add an optional tooltip prompt.

listBox

mceclip5.png

form.listBox({name: "listbox", 
label: "Select an option:",
alternatives: ["Option 1","Option 2"],
initialValues: ["Option 1"],
multiSelection: true,
required: false,
nItemsVisible: 2,
prompt: "This is a list box control"})
  • We use form.listBox to create a list box.
  • We add a reference name and category label to the left of the control.
  • We set the alternatives as an array of categories to choose from. Note, if these labels differ from those in the source data pulled in via R, you can add a further argument to match the corresponding labels: names: ["Option1","Option2"]. Both arrays need to have the same number of items.
  • We are able to set the initial values which must be included in the alternatives array. Note, if we use the names argument, these values must match this array instead. 
  • We are also able to change the defaults for multiple selection, requiring a response, and the height of the input field (which is no more than 5 rows by default).
  • Finally, we add an optional tooltip prompt.

dropBox

mceclip6.png

form.dropBox({name: "dropbox", 
label: "Select all options:",
types: ["Variable"],
multi: true,
min_inputs: 1,
max_inputs: 10,
height: 5,
duplicates: true,
required: false,
expression: false,
prompt: "This is a drop box control"})
  • We use form.dropBox to create a drop box.
  • We add a reference name and category label to the left of the control.
  • We set the selection types argument to restrict what objects are able to be shown. Allowable objects include variables and variable sets from the Data Sets tree or tables, R calculations and page controls from your document.
  • We are able to set the control to accept multiple inputs.
  • When multiple inputs are allowed, we can change the defaults for the minimum and maximum number of inputs, as well as the height of the input field (which is no more than 4 rows by default), and whether the same input is allowed to appear twice.
  • We are also able to change the defaults from true for requiring a response and treating the input as an expression rather than a string that requires quotes.
  • Finally, we add an optional tooltip prompt.

colorPicker

mceclip7.png

form.colorPicker({name: "colorpicker", 
label: "Select a color",
default_value: [255,0,0],
prompt: "This is a colorpicker control"})
  • We use form.colorPicker to create a color picker selector.
  • We add a reference name and category label to the left of the control.
  • We are able to set the default value using either the HTML color hex value (#FF0000) or the RGB color value [255, 0, 0]. See JavaScript Color Table for examples.
  • Finally, we add an optional tooltip prompt.

datePicker

mceclip8.png

mceclip11.png

form.datePicker({name: "datepicker", 
label: "Select a date",
default_value: "2021-01-01",
prompt: "This is a datepicker control"})
  • We use form.datePicker to create a date picker selector.
  • We add a reference name and category label to the left of the control.
  • We are able to set the default value in the YYYY-MM-DD date format.
  • Finally, we add an optional tooltip prompt.

dataEntry

mceclip9.png

mceclip10.png

form.dataEntry({name: "dataentry", 
label: "Enter data:",
edit_label: "Edit data:",
required: false,
default_value: [["Brand A","Brand B"],["1","2"]],
prompt: "This is a data entry control"})
  • We use form.dataEntry to create a data entry spreadsheet.
  • We add a reference name and category label to the left of the control. Note, the default label is Add Data...
  • We are able to set the default content via a nested array in the format of[[row1-col1,row1-col2][row2-col1,row2-col2]].
  • We are also able to change the "edit" label from the default of Edit Data..., which appears after editing the spreadsheet, and whether the input requires data entry.
  • Finally, we add an optional tooltip prompt.

 

Set controls

Unlike with Rules, for custom analysis tools, we don't need to declare each control first and then pass these through as an array to form.setInputControls()  and then add the lineBreakAfter parameter. By omitting this function, Displayr will automatically layout the controls in a vertical tabular layout (labels on the left, controls on the right), in the order in which the controls were added, which is normally what is desired. See also How to Create User Input Fields in a Rule.

 

Next

How to Set Conditional Controls in a Custom Analysis Tool

 

Later

How to Set Object Types in DropBox Controls in Custom Analysis Tools

How to Reference Controls in a Custom Analysis Tool Using R

 

See Also

How to Create a Custom Analysis Tool

How to Create an Auto-Updating Custom Analysis Tool

How to Create User Input Fields in a Rule

Related articles