Controls Tab

In this section:

You can insert controls in an HTML page or a Guided Report page using the Controls tab and group. The controls are Edit Box, Hidden, Drop Down, List Box, Double list, Radio Button, Check Box, Text area, Tree, Calendar, and Slider.


Top of page

x
Controls Group

In this section:

How to:

You can use the Controls tab and group to insert controls in an HTML page or a Guided Report page. Controls enable you to prompt users for a parameter value. When you create a parameter as part of a report or graph, the HTML canvas automatically adds a control, Submit button, and Reset button for the parameter to your layout, and the parameter appears on the Parameters tab. You can also add an input control and bind it to a parameter.

Controls, with the exception of a text box which does not supply a list of possible values, can supply values with a dynamic or static list of values:

An active report control lists active report values that mimic active report menu items. The active report controls cannot be associated to any parameters in the layout. This type of control can only be associated with an active report in the layout.

The properties of a control, as well as the parameters associated with each control, can be controlled with the Properties tab of the Properties window, and with the Parameters tab. The Controls tab is shown in the following image.

Controls tab

The controls are:

Edit Box

Inserts a text box. A text box enables you to enter a value in an entry field. You can specify a list of static or dynamic accepted values in Settings panel and, at runtime, when you type the first letter of a value into the text box, that value will be listed as an autocomplete suggestion.

Hidden

Inserts a hidden control. A hidden input control allows parameter values to be used in a control without the user seeing them. When a hidden control is used, the current input control assigned to the parameter will not be visible. The value of the parameter can be entered in the Properties and settings dialog box of the Parameters tab, or supplied through chaining.

Drop Down

Inserts a drop-down list. A drop-down list enables you to select a single value from a list of supplied values. You can use a dynamic or static list of values for the drop-down list.

List Box

Inserts a list. This enables you to select single or multiple values at one time:

  • A single-select list enables you to select only one value for each time a request is run.

  • A multi-select list enables you to select multiple values by using the Ctrl key while selecting values.

In order to provide multiple values, the procedure must be set up to accept multiple values.

List box values can be dynamic or static.

Double list

Inserts a double list. Displays multi-select values. This enables you to view a list of the available values and add or remove them from one list to another. At run time, a report is generated based on the values that are added.

Radio Button

Inserts a radio button. Radio buttons enable you to select a single value from a list of supplied values. Radio button values can be static or dynamic.

Check Box

Inserts a check box. Check boxes enable you to select a single value from a list of supplied values. Note that if there are multiple check box input controls that are grouped together, you may select the Multiple properties for each control. Multiple ensures that you can select a single value from each check box control. Check box list values can be dynamic or static.

Text area

Inserts a text area. A text area is a single-select control that enables you to enter multiple lines of text that can be assigned to a single variable. The behavior is similar to a text box, but you are not restricted to entering just one line of text. For example, if you want to assign a paragraph (multiple lines of text) to a variable that can be referenced by a procedure, you can add the paragraph to a text area from the Properties and settings dialog box on the Parameters tab. You can specify a list of values in the Settings panel and, at runtime, when the first letter

Tree

Inserts either a single-source tree control or multi-source tree control. By using a tree structure in an HTML report, you can show hierarchical data from a multi-dimensional data source (for example, SAP BW), that uses the parent/child model. You may also use a tree control for non-hierarchical data sources. Level hierarchies are not supported. The behavior of the tree control is integrated with the parameter definition. If a parameter is defined as a single value and that parameter is bound to a tree control, the tree control uses option buttons for each node in the hierarchy. If the parameter is defined as Multiselect OR or Multiselect AND, and that parameter is bound to a tree control, then the tree control uses check boxes for each node in the hierarchy, enabling you to select multiple nodes.

Calendar

Inserts a calendar. Date parameters can utilize a built-in calendar control that enables you to select the desired date or range of dates in a pop-up dynamic calendar. A procedure that is added to or referenced in the HTML canvas and contains date parameters will have a Calendar control type available in the Properties tab of the Properties window. When the Calendar control type is selected, a text box with a calendar icon will display in the Design view of the layout. The text box is the only control available for the calendar, and the icon will always display to the right of the text box. The icon cannot be positioned independently from the text box. Note that when programmatically returning a date to the calendar, the date must be in a WebFOCUS date format that specifies the complete date from the list of supported data types in Calendar Properties.

Slider

Inserts a horizontal or vertical slider control that has a numeric range of values to be used with a report or chart. This enables you to use a slider bar to select from a range of values.



x
Procedure: How to Set Calendar Properties
  1. Add a calendar to the HTML page by clicking the Calendar command on the Controls tab.

    The pointer changes to a crosshair.

  2. Drag the crosshair to create a calendar and adjust it to the size you want.

    A calendar placeholder is created in the layout and assigned the name calendar(n), where (n) is a number.

  3. Optionally, change the calendar properties by adjusting the properties displayed in the Properties panel.
  4. Bind an existing parameter to the calendar.

    Binding a parameter to a calendar creates an incoming parameter. An incoming parameter is a parameter that is bound to a control. If binding a parameter to a calendar, the parameter value must be in a WebFOCUS date format that specifies the complete date from the list of supported data types in Calendar Properties. The parameter value will populate the calendar with date values.

    • Click the Parameters tab.
    • Select the center of the parameter name object, drag the parameter to the center of the calendar object, and release the mouse to complete the binding.
    • To unbind the parameter from the calendar, select the arrow head on the line, so that the line is bold, right-click, and click Break binding.
  5. Bind the calendar to a parameter.

    Binding the calendar to a parameter will populate the parameter with a date value.

    • Click the Parameters tab.

      The Settings panel opens, showing the calendar setup options. The calendar setup options enable you to set the range of dates available to the user at run time. Available dates will be represented as an active hyperlink (blue and underlined) and unavailable dates will be static (black without underlines).

      Note: The Settings panel for a calendar will contain different options depending on the selected data type.

    • Create the values for the calendar. You can create Static or Dynamic values.

      When the Current/Start date option is checked, the current date will be used in the calendar control at run time.

      The Date Range options for setting up the calendar include:

      • Static. This option will set a static date range in which the developer will select a start date and an end date using a pop-up calendar icon, or by clicking the month, day, or year from the controls.

        The pop-up calendar icon appears in the From and To sections when the Static Date Range is selected. If you click the pop-up calendar icon, a pop-up calendar appears and shows the current date selected and circled in red by default. As you scroll through the calendar with the left/right arrows, the currently selected day will remain highlighted for each month. Clicking a date will add that date to the control. Dates can be selected by scrolling left to right, entering the month, day, and year as text, or by selecting the month, day, and year from the drop-down list and spin boxes.

      • Relative. This option allows you to set a specific number of days, months, and years relative to the current date. The current date (at run time) will always be the reference or starting point and the calendar will show a number of days, months, and years relative to the current date. The range could be all in the past (for example, five years prior to the current date) or all in the future (for example, five years in the future). This is selected as the default Date Range.
      • Dynamic. This option allows you to point to a procedure that returns a range of dates. Clicking the Select custom procedure browse (...) button allows the developer to choose a preexisting procedure. The procedure must return two date values on the same data line in XML format. The date values must be returned in a format that returns two digits for the month and day, and four digits for the year, for example, MM/DD/YY.
    • Close the Settings panel to create the calendar with the range of date values.
    • Bind the calendar to a parameter. Select the center of the calendar, drag the calendar to the center of the parameter object, and release the mouse to complete the binding.


x
Using a Double-head Slider Control

A double-head slider control is a new control you can access from the HTML canvas. A double-head slider control is a type of slider control in which you can select a range of values for displaying data in a report or chart. Rather than having one slider head, you have two. In order to use a double-head slider control, you must have two variables in the report or chart that will be controlled by the double-head slider control. One variable will be controlled by one head of the double-head slider control and the other variable will be controlled by the other head of the double-head slider control. The variables need to be specified in the procedure as FROM and TO.

Note: You can use the Report canvas to create a parameter that accepts a range of values using the Expression Builder dialog box. The Chart canvas requires you to manually create a parameter that accepts a range of values.



x
Procedure: How to Create a Report That Can Be Used With a Double-head Slider Control
  1. Create a new report.
  2. Add the fields you want displayed in your report.
  3. On the Report tab, in the Filter group, select Filter, and click Where to create a Where filter.

    The Expression Builder dialog box opens.

  4. Double-click the field you want to use in conjunction with the Double-head slider control.
  5. From the Logical Relation drop-down list, select Is From.

    This indicates the parameter you are creating is a range of values.

  6. Double-click the Compare Type cell to open the Range Builder dialog box.

    In the Range Builder dialog box, you can name the parameters you will use for the Double-head slider control or select a field whose values you want to create a range from.

  7. Type a name in the From text box.

    This is the FROM value.

  8. Type a name in the To text box.

    This is the TO value.

    These are the names of the two parameters that will be controlled by the double-head slider control.

  9. Save and close the report.

    This report can now be used with a double-head slider control once you set up your HTML page.



x
Procedure: How to Create a Double-head Slider Control From the Ribbon
  1. While in the HTML canvas, click either Horizontal or Vertical, from the Slider command, in the Controls group, on the Controls tab.

    Your mouse becomes a crosshair.

  2. Drag the crosshair to create a single-head slider control.
  3. While the single-head slider control is selected, in the Properties panel, change the Range property from No, to Yes.

    Changing the Range property to Yes changes the single-head slider control to a double-head slider control. You can now use this control to select a range of values to display.



x
Procedure: How to Create a Double-head Slider Control Using the New Parameters Dialog Box
  1. Create a report object or chart object on the HTML canvas.

    Your mouse becomes a crosshair.

  2. Drag the crosshair to create a report or chart
  3. Create, import, or reference a report or chart with two variables. The New Parameters dialog box opens.
  4. In the Control Type column of the New Parameters dialog box, click the ellipsis (...) of the first parameter and then click Slider, and select either Double-head horizontal or Double-head vertical.

    Note that the Control Type for the second parameter changes to Append to Above. This means that the second parameter has been recognized as being part of a range and will be controlled by the double-head slider control specified in the first parameter.



x
Procedure: How to Create an HTML Page that Uses a Double-head Slider Control

  1. Create a new HTML page.
  2. Add a report object to the HTML canvas.
  3. Create, import, or reference a report that contains a variable that accepts a range of a values.

    The New Parameters dialog box opens.

  4. In the Control Type column of the New Parameters dialog box, click the ellipsis (...) of the first parameter and then click Slider, and select either Double-head horizontal or Double-head vertical.

    Note that the Control Type for the second parameter changes to Append to Above. This means that the second parameter has been recognized as being part of a range and will be controlled by the double-head slider control specified in the first parameter.

  5. Click OK to close the New Parameters dialog box and add the double-head slider control to the HTML page.
  6. Click the Parameters view tab at the bottom of the HTML canvas.
  7. Drag the unbound parameter out of the Unbound Parameters box.
  8. Drag the second half of the slider control to the unbound parameter.
  9. Click the slider control and click the Settings panel.
  10. In the Input Control Population section, change the Data Type to Dynamic.
  11. Select the data source you used in the Data Source drop-down list.
  12. In the Value Field, click the ellipsis (...) and select the field being controlled by the double-head slider control.
  13. Save and run your HTML page.

    The double-head slider control controls what you see in your report or chart by allowing you to select a range of values rather than one specific value or all values. The first head updates the FROM value and the second head updates the TO value.



x
Procedure: How to Enter Masked Text in a Text Box

When entering a value in a text box at run time, you may set the Mask text property so that the text is not displayed as text, but masked by default characters. This is recommended when using passwords or other sensitive information.

  1. Select the Edit Box object to view the associated properties in the Properties panel.
  2. From the Mask text property field, select Yes.
  3. Run the report and enter a value in the text box.

The value being entered appears as masked text.



x
Procedure: How to Select Multiple Values From a Drop-Down List

When using a drop-down list input control to supply parameter values, the Multiple property value indicates whether multiple values can be selected from a list of supplied values at run time.

Note: A multi-select list enables you to select multiple values by using the Ctrl key while selecting values. In order to select multiple values in the drop-down list, the procedure must be set up to accept multiple values. Ensure that the Variable Type for the parameter value is Multiselect OR or Multiselect AND in the procedure.

  1. From the HTML canvas, insert a report with parameters that accept multiple values.

    For example, create a report with Multiselect OR as the variable type for the parameter, accepting a dynamic list of values from a Master File.

  2. When the New Parameters dialog box appears, accept the default control type of Drop down list and click OK.

    A drop-down list is created in the layout and assigned the name combobox(n), where (n) is a number.

  3. Select Multiple from the Multiple drop-down list in the Properties panel.

    This indicates that multiple items can be selected from the drop-down list.

  4. Save and run the HTML page.

    Select multiple values by using the Ctrl key while selecting values from the drop-down list.

    The drop-down list shows the selected multiple values. Click the Run button to run the report with the selected value parameters.



x
Using Tree Controls



x
Procedure: How to Add a Tree Control to an HTML Page Using an Embedded Procedure

This procedure describes how to add a tree control for a multi-dimensional data source, using an embedded procedure.

  1. In the HTML canvas, insert a tree control from the Controls tab.

    Tip: You may select Single source Tree control or Multi source Tree control. If no type is selected, Single source Tree control is the default, as shown in the following image.

    The pointer changes to a crosshair.

  2. Drag the crosshair to create a tree control, and adjust it to the size you want.

    A tree control is created in the layout and assigned the name treecontrol(n), where (n) is a number. Additionally, the Settings panel appears for the tree control.

  3. Optionally, you may click the Expanded property from the Properties panel to show the tree control expanded at run time.
  4. Optionally, you may click the Hyperlink property from the Properties panel to show the tree nodes as hyperlinks, instead of radio buttons at run time.
  5. From the Settings panel, click Dynamic as the Data type.
  6. Keep Embedded procedure selected and click the browse (...) button adjacent to the first input field.

    The Open dialog box opens.

  7. Select a multi-dimensional data source and click Open.

    The multi-dimensional data source is added as the embedded procedure.

  8. Click the Value field browse button to select a field from the hierarchy.

    The Value field is the data source field from which the values will be retrieved.

  9. Click the Display field browse button to select a field from the hierarchy.

    The Display field is the text that represents the parameter value in the tree control.

  10. Save and run the page to view the multi-dimensional data source in the tree control.


x
Procedure: How to Add a Tree Control to an HTML Page Using an Existing Procedure

You can select an existing procedure to add to the tree control in an HTML page. When you select a procedure, it should use fields from the parent/child hierarchy and be set up as follows:

TABLE FILE file 
SUM FST.dispfield 
BY ParentUniqueField 
BY UniqueField 
BY datafield 
ON TABLE PCHOLD FORMAT XML 
END

where:

file

Is the name of the data source.

dispfield

Is the field whose values display in the tree control.

ParentUniqueField

Is the field that represents the parent for the parent/child hierarchy (PROPERTY = PARENT_OF).

UniqueField

Is the field that represents the unique IDs for the hierarchy members (PROPERTY=UID).

datafield

Is the field whose values are passed as the parameter value.

After the procedure is set up, follow these steps:

  1. From the Controls tab, insert a tree control.

    Tip: You may select Single source Tree control or Multi source Tree control. If no type is selected, Single source Tree control is the default.

    The pointer changes to a crosshair.

  2. Drag the crosshair to create a tree control, and adjust it to the size you want.

    A tree control is created in the layout and assigned the name treecontrol(n), where (n) is a number.

  3. Optionally, you may click the Expanded property from the Properties panel to show the tree control expanded at run time.
  4. Optionally, you may click the Hyperlink property from the Properties panel to show the tree nodes as hyperlinks, instead of radio buttons at run time.
  5. From the Settings panel, click Dynamic as the Data type.
  6. Click External Procedure and click the browse (...) button adjacent to the first input field.

    The Open dialog box opens.

  7. Select a procedure and click Open.

    The procedure name is added as the external procedure.

  8. Click the Value field browse button to select a field from the hierarchy.

    The Value field is the data source field from which the values will be retrieved.

  9. Click the Display field browse button to select a field from the hierarchy.

    The Display field is the text that represents the parameter value in the tree control.

  10. Save and run the page to view the multi-dimensional data source in the tree control.


x
Procedure: How to Populate a Multi Source Tree Control

You can show a tree structure for a non-hierarchical data source by using a tree control. By identifying the number of levels for the tree control, you are able to populate each level of the tree control with its own procedure. Setting the number of levels creates a tree structure by which each level is its own subcontrol, chained together with no conditions.

This procedure describes how to add parameters for a tree control, where the number of levels property is set.

  1. In the HTML canvas, insert a Multi source tree control.
    • Click Multi source Tree control from the Tree control drop-down list, located on the Controls tab.

    The pointer changes to a crosshair.

  2. Drag the crosshair to create a tree control, and adjust it to the size you want.

    A tree control is created in the layout and assigned the name treecontrol(n), where (n) is a number.

  3. From the Properties panel, type in the Number of levels for the tree control, and press the Enter key.

    This enables you to specify the number of levels to populate.

  4. Optionally, you may click the Expanded property from the Properties panel to show the tree control expanded at run time.
  5. Optionally, you may click the Hyperlink property from the Properties panel to show the tree nodes as hyperlinks, instead of radio buttons at run time.
  6. With the tree control selected, click the Parameters tab.

    The tree control object shows the set number of levels.

  7. Select each level of the tree control and create the settings for its data population.

    When creating a Multi source Tree control, the static data type is not available. If creating static values for the tree control, you must create a single source tree control.

  8. Optionally, to add an additional level for the tree control, right-click the tree control object on the Parameters tab and select Add level.

    Note: Add level only appears for a Multi source tree control object.

  9. Click the added level to view the Settings panel for that level.
  10. Switch to the Design tab of the HTML canvas to preview the populated tree control.

    Note that the Properties window drop-down list for the tree control shows each level of input values.

  11. Save and run the page.

    Note: If a user selects a lower level node in one level and a higher level node in another level, when the procedure is executed, only the lowest level selections will take effect. For example, you have 3 levels: COUNTRY, CAR, and MODEL. Under ENGLAND, TRIUMPH you select TR7. Under FRANCE, you select PEUGEOT. At run-time you will only receive the records for TR7 because you did not select a MODEL under the FRANCE node.

    The tree control populates each level with values.

    Note: A value must be selected for each level before you can click the Save Selection button.

    If a selected value is specified for a field that is not in level1, then corresponding selected values must also be specified for the preceding levels.

    Only the first and second levels load at run time. If a selected value is specified for a field in level1, only values from the first two levels will be selected.



x
Procedure: How to Add a Tree Control to an HTML Page Using Static Values

This procedure describes how to add static data type parameters for a tree control, where the Number of levels property for the tree control is not set. This enables you to add a static list of values.

  1. In the HTML canvas, insert a tree control.
  2. From the Settings panel, select Static as the Data type.

    Static is selected by default. You may select an item, delete it, or add a subitem.

  3. Create the parameter values for the control:
    • Click the add value button to add a list of values. The values are added in a sequential hierarchical structure. The last value added appears in the Value and Display Value fields.
    • To edit the value, manually type the desired value in the Value and Display Value fields.
    • Click Append child item from the Static values drop-down list to append a value at the level currently selected, and create a new value as the child of the selected value.
    • Click Insert before from the Static values drop-down list to insert a value before the selected value, as shown in the following example. Note the number of the value.
    • Click Insert after from the Static values drop-down list to insert a value after the selected value, as shown in the following example. Note the number of the value.

      Repeat these steps until the list contains all of the values you want to include.

    • Optionally, click the Delete button to eliminate any values.
  4. Click the Selected check box to show the entry in the Value field as the default value.
  5. Select the Send display value check box to send the display value, rather than the actual data, to the parameter.
  6. Save and run the page to populate the tree control with static values.


x
Procedure: How to Create a New Tree Control From the New Parameters Dialog Box

When a report contains one or more new amper variable parameters, the New Parameters dialog box opens when you save the report and return to the HTML canvas. You can assign a new Single source or Multi source Tree control from the HTML page to the parameter from the New Parameters dialog box.

For each parameter, you will find Name and Control Type fields, a Create control check box, and options to set the Control Type to a Single source or Multi source Tree control.

  1. Import or create a report that contains parameters.

    When importing a report with parameters, the New Parameters dialog box opens, prompting you to create the control type.

  2. Select the new tree control from the New Parameters dialog box.

    The Control Type column refreshes, showing the selected control.

  3. Click OK to close the New Parameters dialog box.

    The report is added and the associated parameters are bound to the tree control.



x
Reference: Usage Notes For Chaining Tree Controls

The following usage notes apply when chaining tree controls. You may chain controls from the New Parameters dialog box and from the Parameters tab.

  • When the Multi source Tree control is a link in the chain, the New Parameters dialog box enables you to share parameters with the same multi source control.
  • You can chain a Multi source Tree control to a Single source Tree control.
  • You can chain a Single source Tree control to another Single source Tree control.
  • You can chain a Multi source Tree control to another Multi source Tree control.
  • You can chain a tree control to another non-tree control, such as Drop down list or List box.
  • Chaining cannot be done with only field names.
  • Dynamic population of controls with field names need to use SYSCOLUMN calls.

WebFOCUS