Parameter Implementations

A text input box.

• textClassName: Specify a class to add to the HTML input element.

• style: CSS styles added to the HTML input element.

• numericOnly: Set to true if the text box should accept only numbers.

• numericType: Set to “INTEGER” to disallow decimal numbers. numericOnly should be true.

• unsignedOnly: Set to true to not allow negative values. Works only when numericOnly is true.

• thousandSeparatorOn: Set to true to show the thousandths separator when numericOnly is true.
  
• decimalPlaces: Number of decimal places when numericOnly is true and numericType is not INTEGER.
  
• minValue/maxValue: Min and Max number which can be entered.
  
• maxStringLength: Maximum length of the input when numericOnly is false.
  
• readonly: Sets the “readOnly” property of the HTML input element.
  
• disabled: True sets the “disabled” property of the HTML input element.
  
• name: Sets the “name” property of the HTML input element.
  
• tooltip: Sets the “title” property of the HTML input element.
  
• disableBrowserAutoComplete: Disable browser’s autocomplete for that field.
  
• placeholder: placeholder text to show before a value has been entered.
• placeholderCss: Style the placeholder.
  
• placeholderAccountForScroll: Set to true to subtract the scroll position from the placeholder.
  
• suffix: a display suffix which should be shown appended to the end of the actual value.
  
• width: override the width value of this input with a custom width. Note: This is a css property, so you can define whatever display unit you like. No unit defaults to px.

A drop down list. The value and description are taken from the Possible Values added to this parameter.

• width: override the width value of this input with a custom width. Note: This is a css property, so you can describe in whatever display unit you like. No unit defaults to px.

• style: CSS styles added to the HTML input element

• size: Sets the size attribute of the dropdown list. The default is 1. Setting it to a higher number makes it a scrollable list.

• multiSelect: Set to true to make this a scrollable multiselect list.

• selectAllAvailable: Add controls for selecting and deselecting all options. multiSelect should be true to use this

• multiJoinString: If this is "|", all the selected values in a multi-select will be joined with "|" between them into a single string. multiSelect should be true to use this

• disabled: Set to true to disable input

• showOptionTitle: Show tooltips for options when set to true.

A group of Radio Buttons. Has a radio button for each option.

• alignment: When ‘right’, render the radio buttons to the right of their labels. The default is ‘left.’
• fullDescription: Set this to true to display descriptions for each option.

• descriptions: This should be an object of the format {value: ‘description’ }. For e.g.:

  {
  "LEFT": "Align Left",
  "RIGHT": "Align Right",
  "MIDDLE": "Centre Align"
  }

  This works only when fullDescription is true.

• textAlign: Set the text-align CSS property. This is applicable only when the alignment property is set.
• valign: specifies the valign CSS property for this element.
• radioColour: Set this to ‘red’ to render a red radio button. This does not affect the label.
• disabled: Set to true to disable input
• tooltip: Show tooltips for options when set to true.
• maxRows: Available options will be rendered in this many rows.

Date/Timestamp input element. These are mostly similar and have the same view options.

The key set using setProperty stores the input value.

Format:

• Static dates are stored as yyyy-MM-dd
• Static timestamps are stored as yyyy-MM-dd hh:mm:ss

Dynamic Dates:

In case of Dynamic Dates, the unit is stored against the key specified in the view option “unitCodeProperty”.

Dynamic date values are stored as “SYSDATE+x”. For example, if property=STARTDATE and unitCodeProperty=STARTUNIT

Today - 1 Year is stored as:

STARTDATE: SYSDATE-1

STARTUNIT: YEAR

• useCurrentDate: Set this to true to use Dynamic Dates. It renders a toggle, which can be switched off to use a specific date/timestamp.
• unitCodeProperty: In case of Dynamic Dates, this is used to identify the selected date unit.
• width: override the default width of the textbox.
• disabled: Set to true to disable input.

Text input element which verifies time data input.

Valid time input is saved against the specified property in hh:mm:ss format (24 hour).

This widget does not have any styling options.

• showSeconds: Set to true to show a textbox for seconds entry. This is false by default.
• disabled: Set to true to disable.

Displays one or more standard Yellowfin checkboxes.

• alignment: When ‘right’, render the checkboxes to the right of their labels. The default is ‘left’.
• checkboxColour: Set this to ‘red’ to render red checkboxes. This does not affect the label.
• tooltip: Show tooltips for options when set to true.

Renders a standard Yellowfin button.

• text: the text label to display on the button
• img: the image to display on the button. Note that if both the 'img' and 'text' options are specified, only the image will be displayed, and the 'text' option's value will be used as a tooltip for the button. The image may be a URL or a Base64 string with the image type:

data:<MIME Type>;base64, <base64 String>

• activeImg: the image to display on the button when hovering over it.
• imgCss: styles to apply to the image on the button (active or not).
• style: colour of the button, which may be one of 'red', 'blue', 'redhover', 'grey', 'medgrey', 'darkgrey'.
• flat: true renders the button without 3D effects.
• tooltip: HTML tooltip on hovering over the button.
• css: styles to apply to the button.
• cssClass: this class will be added to the button.
• width: width of the button.
• height: height of the button.

Renders a block of static text.

• text: Content to be displayed

Standard Yellowfin colour-picker.

Slider input with a linked text box which allows input via either method.

• maxValue: Maximum value of the slider which is saved against the Parameter’s property. Defaults to 100.
• textMaxValue: Max value which can be entered in the textbox.
• minValue: Minimum value of the slider which is saved against the Parameter’s property. Defaults to 0.
• textMinValue: Min value which can be entered in the textbox.
• sliderWidth: override the default width of the slider element.

Renders an On/Off toggle slider.

• onValue: the value to save when the toggle slider is switched to the On position. Defaults to true.
• offValue: the value to save when the toggle slider is switched to the Off position. Defaults to false.
• disabled: Set to true to disable.

Accepts two lists of FieldObject (see the section on Helper Objects) which can be matched to one another. There may be one or more matches. The resulting relationships are returned in an array of objects which look like:

 

{
  'from': fieldA.id,
  'to': fieldB.id
}

 

 

This serves the same function as FIELDMATCHDROPDOWN. Fields are matched by dragging them around. They are matched by data type, which are colour coded. Fields which cannot be matched are flagged.

Fields from one side may also be excluded by dragging them to the “exclude” zone. The resulting relationships are returned in a similar format as FIELDMATCHDROPDOWN.

When a field is excluded from one column, the match object for that row will not have the corresponding “from” or “to” attribute. For example, the object for ADDRESSID in the below screenshot would be

{  
  'to': ADDRESSID.id
}

• fieldListA: The first list of fields.
• fieldListB: The second list of fields
• titleA: The title for field list A.
• titleB: The title for field list B.
• titleClassA: Optional CSS class to format the title for field list A.
• titleClassB: Same as above, but applies to title of field list B.
• viewOptionsA: Options passed to drop down  list A.
• viewOptionsB: Options passed to drop down  list B.
• includeUnmatched: Allow fields from one list to be matched to nothing in the other list and show no error. False by default.
• roughMatch: Allow Dates and Text fields to be matched. False by default.
• imageMap: Specify various images in a map. Available keys are:
• primary: For fields which form a Primary Key
• dragHandle: The handle for dragging fields around
• error: Field match error image
• forceAllConnections: If set to true when connections are being returned, if there are warnings an empty list will bereturned instead of a partially connected list. False by default.

ParameterImpl p = new ParameterImpl();
p.setInputType(InputType.FIELDMATCH);
p.setProperty("UNION_FIELD_MATCH");
p.addViewOption("includeUnmatched", true);
 
//Match exact types
p.addViewOption("roughMatch", false);
 
List<FieldObject> foListA = new ArrayList<>();
List<FieldObject> foListB = new ArrayList<>();
 
FieldObjectDataType textDataType = FieldObjectDataType.TEXT;
FieldObjectDataType numericDataType = FieldObjectDataType.NUMERIC;
 
// LIST A
FieldObject field1 = new FieldObject("1", "primary", "Field 1", textDataType); //Primary Key
FieldObject field2 = new FieldObject("2", "", "Field 2", numericDataType);//This is a metric
 
foListA.add(field1);
foListA.add(field2);

// LIST A
FieldObject field3 = new FieldObject("3", "", "Field 3", textDataType);
FieldObject field4 = new FieldObject("4", "", "Field 4", numericDataType);//This is a metric
FieldObject field5 = new FieldObject("5", "", "Field 5", textDataType);
FieldObject field6 = new FieldObject("6", "", "Field 6", numericDataType);//This is a metric

foListB.add(field3);
foListB.add(field4);
foListB.add(field5);
foListB.add(field6);
 
p.addViewOption("fieldListA", foListA);
p.addViewOption("fieldListB", foListB);
 
//Input 1
p.addViewOption("titleA", "Input 1");
 
//Input 2
p.addViewOption("titleB", "Input 2");

The above code will generate the following:

This renders a searchable dropdown list.

Searchable items should be CustomValue objects  added as “possibleValues” of the Parameter.

• initialValue: the input's initial value. This should be a CustomValue object where
  value = search string
  description = search string

• width: Sets the width of the view
• maxDisplayItems: The max number of items displayed below the list, default is 4
• isDataGrouped: Data can have a group
• resultListStyle: Adds the specified class(es) to HTML element containing the results list

An accordion-like widget to show/hide other UI elements. This should be used with ParameterDisplayRules.

• showText: Text for the link which opens the accordion
• hideText: Text for the link which hides the accordion

Renders paired data in two columns. There is a control for deleting rows.

Whenever the Parameter data changes, the columns are re-rendered to show the new data. The data should be an array having objects of the format:

{  
  column1Key: dataRow1Col1
  column2Key: dataRow2Col2
}

• column1Header: Heading of the first column
• column2Header: Heading of the second column
• column1Key: Key to identify the first column’s data
• column2Key: Key to identify the second column’s data

Shows example output on applying a delimiter to split a row of data.

• text: Sample row having delimited data

• inputOptions: a list of options that allows InputListView to render a collection of views automatically. Each input option will have:

  • controlType: the type of control of that view (TEXTBOX, TOGGLE, CHECKBOX, SELECT,...)

  • viewOptions: view options of that particular control