Forio Broadcast makes it easy to create a decision form with text boxes, check boxes, drop-down lists, radio buttons, an even input graphs that allow the user to draw a curve.
To build such a form, first build a decision form, then use one or more of the decision types in this article. You can read more about building a decision form here:
A decision input can be entered using a short Macro Directive or an HTML form input tag.
Using a decision Macro Directive (the "short form") is a simple way of listing the variables and other basic parameters. When the page is produced it will insert the proper HTML to display the form input object and any related information. However, you are not able to customize any HTML attributes of the form object, and it will not display properly in a WYSIWYG HTML editor.
As an alternative, entering the HTML input tag directly (the "long form") allows you to customize the form object. This method requires more complex HTML and FML. It will display reasonably well in a WYSIWYG HTML editor.
As a reminder, all decisions should be within a form named "Decisions". The page itself should have the following line in the HEAD section, typically just after the <HEAD> tag.
|
<script type="text/javascript" src="/tools/forio.js"></script> |
A text box allows the user to directly type the value of the decision.
Short Form:
#TextDecision(<decision>)
Example Short Form:
#TextDecision("Price")
Example Long Form:
|
<input type="text" name="D_Price"
value="$Values.get('Price').DecisionFormatted" |
Result:
How It Works:
Forio Broadcast sets the value of the decision "Price" based on the name of the input ("D_Price"). When the user enters a decision and then clicks on another part of the page, the onBlur event specifies that a JavaScript function should be called the validate the user input. (The actual function name and parameters are inserted by #Validate based upon the DecisionMin and DecisionMax property). When the page is loaded, the default value is determined from the property DecisionFormatted.
A drop-down list (alternately called a "select list" or a "pop-up list") allows the user to choose from a list of choices. When entering the list, remember that the list items are separated by commas, but the three parameters to the directive are separated by spaces.
Short Form:
#SelectDecision (<decision> <value_list> <label_list>)
Example Short Form:
#SelectDecision("Hires" [0, 10, 40, 100] ["None", "Slow Growth", "Normal Growth", "Rapid Growth"] )
Long Form:
|
<select name="D_Hires"> |
Result:
How It Works:
In the example above, the decision "Hires"
is set based on the select element name "D_Hires". Depending
on which option the user chooses, the appropriate value is sent to Forio
Broadcast. When
the page is loaded, the default option (indicated by the phrase "selected")
is determined by whether the value for that option is equal to the Decision
property.
Checkbox inputs are typically used for a on/off decision.
Short Form:
#CheckBoxDecision(<decision> <true_value> <false_value>)
Example Short Form:
#CheckBoxDecision("Work Overtime" 1 0)
Example Long Form:
|
<input type="checkbox" name="C_Work Overtime"
|
Result:
How It Works:
Checkboxes send a value to the server only when they are checked. This means that in order to create a check box with Forio Broadcast, you must include a hidden field that is set when the user clicks the checkbox. In the provided example, the hidden field is named "D_Work Overtime", indicating the model should set the value of the decision "Work Overtime". Each time the user clicks the checkbox a built-in JavaScript function "setDecisionField" is called which sets the value of this hidden field. When the page is loaded, the default setting (indicated by the phrase "checked") is determined by whether the true value is equal to the Decision property.
Radio button inputs are used for multiple choice answers. Use the short form to create a list of vertically displayed radio buttons. (The last parameter is true/false indicating if the button should go on the right or left of the text). Use the long form to create radio buttons with a different layout.
Short Form:
#RadioButtonDecision (<decision> <value_list> <label_list> <button_on_left>)
Example Short Form:
#RadioButtonDecision ("Hires" [0, 10, 40, 100] ["None", "Slow Growth", "Normal Growth", "Rapid Growth"] true)
Example Long Form:
|
<input type="radio" name="D_Hires"
value="0" <input type="radio" name="D_Hires"
value="40" <input type="radio" name="D_Hires"
value="100" |
Result:
How It Works:
Radio buttons with the same name are used to offer multiple choice options. Clicking one radio button in such a group will deselect the other options. The name "D_Hires" indicates to Forio Broadcast to set the decision "Hires" with the value for the selected radio button. When the page is loaded, the default setting (indicated by the phrase "checked") is determined by whether the value for a particular radio button is equal to the Decision property.
The InputGraph object allows users to draw a line graph as input. Drawing the line sets the values for a list of decisions. Typically this is used to enter a time series and the decision is an arrayed model variable. For example, the input graph might be used to enter a projected pricing trend. The decisions that would be set in this case might be Price[0], Price[1], Price[2], Price[3], Price[4], where each array subscript represents the projected price for the year.
Short Form:
#InputGraph (<decision_list> <x_axis_label> <max_y_axis> <min_y_axis> <input_style> <area_fill>)
Custom Form:
#CustomInputGraph(<decision_list> <x_axis_label>
<max_y_axis> <min_y_axis> <input_style> <area_fill>
<width>
<height> <horizontal_lines> <background_color> <input_color>
<label_color>)
Parameters
|
Parameter |
Example |
Description |
|
decision_list |
["in[1]","in[2]","in[3]","in[4]"] |
list of variables for the x axis (typically array subscripts) |
|
x_axis_labels |
["2004","2005","2006","2007"] |
list of labels for x axis (must be same as number of decisions |
|
max_y_axis |
10 |
maximum value of the y axis |
|
min_y_axis |
0 |
minimum value of the y axis |
|
input_style |
1 |
1 = line graph, 2 = bar graph |
|
area_fill |
0 |
0 = no area fill, 1 = use area fill |
|
width |
600 (default) |
width of input graph |
|
height |
350 (default) |
height of input graph |
|
horizontal_lines |
5 (default) |
number of horizontal grid lines |
|
background_color |
0xFFFFFF (default) |
color for background of input graph |
|
input_color |
0x0000FF (default) |
color for line/area of input graph |
|
label_color |
0x000000 (default) |
color for input graph labels |
Examples
|
#InputGraph(["price[0]","price[1]","price[2]","price[2]","price[4]","price[5]"] #CustomInputGraph(["price[0]","price[1]","price[2]","price[2]","price[4]","price[5]"] |
Results: (for #CustomInputGraph above)
How It Works:
#InputGraph and #CustomInputGraph are Macro directives that insert a Flash applet in the page. Like all decision macros they should be used within a form named "Decisions". This applet displays a graph and allow the user to draw on the graph. When the user releases the mouse, the values are copied into hidden fields in the web page. Clicking a "Submit" button in the form saves the decision values as usual.