Page History
The user interface of Yellowfin plug-ins are built by using or extending classes in the Parameter API. This section covers the UI implementation in detail.
Transformation UI Levels
There are four levels of hierarchy for building plug-in UI. The diagram below explains these levels:
- Parameter Panel Collection
...
- : This is the outermost
...
- level of
...
- that is mostly represented by a collection of tabs.
...
Override this method to return a list of panels (tabs) within the ParameterPanelCollection.
...
public JSONObject toJSON()
...
This method converts everything in the Panel Collection to a org.json.JSONObject (Jackson). The object attributes are name, description, panels, data and parameterPanelCollectionClassName.
- The panels attribute holds a JSONArray of JSONObjects returned by each ParameterPanel.
...
protected String getText(Integer textId)
...
If the ID is known, these methods allow a file or a CLOB to be read from the Yellowfin configuration database. The ID may be stored in the component’s configuration. In case of Data Transformations, this would be a Step Option.
...
public List<ParameterDisplayRule> getDisplayRules()
...
Implementation
Yellowfin includes an implementation of ParameterPanelCollection for use with Data Transformation steps. The ETLStepPanels concrete class is easy to use. It has a method addPanels() for adding ParameterPanel objects.
| Code Block | ||||
|---|---|---|---|---|
| ||||
ETLStepPanels panels = new ETLStepPanels();
panels.addPanel(panel); |
Parameter Panel
This is the second level of the UI and is described by abstract class ParameterPanel. A panel is usually implemented as a tab. Implementing classes must override a few methods and are described in the javadoc. The important members in the Panel API are listed below:
| Parameter Panel members | Description |
|---|---|
| public String getPanelKey() | This method returns a unique identifier for the Panel within a Panel Collection. |
| public String getName() | This is used to provide a name to the Panel or tab. |
| public String getParameterPanelClassName() | This returns a CSS class to be applied to the Panel. This should be overridden as the default implementation returns null. |
| public List<ParameterSection> getSections() | Implementations should return a list of ParameterSection objects within this Panel. |
public String getDynamicKey() public void setDynamicKey(String dynamicKey) | These methods are used for working with Dynamic Parameters, which is discussed in the section on Helper Objects. |
| public GeneralPanelOptions getGeneralOptions() | General Options are discussed in the section on Helper Objects. These options control how the UI is rendered. |
public List<ParameterDisplayRule> getDisplayRules() | Display Rules are discussed in the section on Helper Objects. They are used to determine whether a panel should be displayed or not based on user input. |
public Map<String, ?> getData() | As with ParameterPanelCollection, the default implementation returns the member variable data. Subclasses may override to modify it. This is used by the ParameterPanelCollection’s toJSON() method to construct its data object. |
| public JSONObject toJSON() | This method converts everything in the Panel Collection to a org.json.JSONObject (Jackson). The main attributes of the object are name, description, panelKey, parameterPanelClassName, sections, displayRules, dynamicKey and generalOptions.
|
Implementation
Yellowfin ships with an implementation of ParameterPanel for use with Data Transformation steps. ETLStepConfigPanel is easy to use. It has a method called addSection() for adding ParameterSection objects. Its implementation of getGeneralOptions() adds an “Apply” button to the bottom of the panel using standard styling from Data Transformations.
| Code Block | ||||
|---|---|---|---|---|
| ||||
String stepName = getETLStepBean().getStepName();
ETLStepConfigPanel panel = new ETLStepConfigPanel(PANEL_KEY, stepName);
panel.addSection(section); |
ParameterSection
This is the third level and is described by the abstract class ParameterSection. Implementing classes must override a few methods and are described in the javadoc. The important members in the API are listed below:
| Parameter Section Members | Description |
|---|---|
| public String getSectionKey() | This returns a unique identifier for the Section within a Panel. |
| public String getName() | The name of the Section. This is rendered as the heading of a section. |
| public String getParameterSectionClassName() | This returns a CSS class to be applied to the Section. This should be overridden as the default implementation returns null. |
| public List<Parameter> getParameters() | Implement this method to get a list of ParameterSection objects within this Panel. This should never return a null value. |
public String getDynamicKey() public void setDynamicKey(String dynamicKey) | These methods are used for working with Dynamic Parameters, which is discussed in the section on Helper Objects. |
| public GeneralPanelOptions getSectionOptions() | General Options are discussed in the section on Helper Objects. These options control how the UI is rendered. |
| public List<ParameterDisplayRule> getDisplayRules() | Display Rules are discussed in the section on Helper Objects. They are used to determine whether a panel should be displayed or not based on user input. |
| public Map<String, ?> getData() | This method is abstract at this level. Implementations should return the data object for the level, containing data relevant to the Parameters. This is used by ParameterPanel’s toJSON() method to construct its data object. |
| protected ParameterValueLoader parameterValueLoader | This protected member variable contains the Value Loader associated with this section. It is used to load option values of a Parameter, when the user selects a related parameter. For example, reloading a country dropdown, based on the user’s selection of region. Value Loaders are discussed in detail in the section on Helper Objects. |
| public JSONObject toJSON() | This method converts everything in the Section to a org.json.JSONObject (Jackson). The main attributes of the object are name, sectionKey, parameterSectionClassName, parameters, displayRules, dynamicKey and generalOptions.
|
Implementation
Yellowfin comes included with ETLStepConfigSection, an implementation of ParameterSection which can be used with Data Transformation steps. Related methods of use include:
| Methods | Description |
|---|---|
| public Map<String, ?> getData() | Returns member variable data which contains data from the parameters in this section. |
| public void setData(Map<String, ?> data) | Replaces the class member data with the object passed into this method. |
| public void setMappedParameterDataObject(String key, Object value) | Adds the specified key and value to the data object. |
| public void setMappedParameterData(String key, String value) | Adds the key and value to the data object. When the value is a JSON String, it is converted to an equivalent Java object. For example:
This is done using the method convertParameterToJSON() in the ParameterSection class. |
When this implementation is used, it applies some standard Yellowfin styling to the section.
| Code Block | ||||
|---|---|---|---|---|
| ||||
ETLStepConfigSection section = new ETLStepConfigSection("SECTION_KEY", "SectionName");
section.addParameter(rowCountParam); // Parameter containing option key ROW_COUNT_KEY
section.setMappedParameterDataObject("ROW_COUNT_KEY", rowCountInteger); |
Parameter
This is the fourth and lowest level, and is described by the Parameter interface. User input widgets are rendered by implementation classes. Yellowfin has a number of implementations, most of which can be used by instantiating the ParameterImpl class and setting the correct input type. Yellowfin uses this information to generate html using its view engine.
The important methods of the ParameterImpl class are listed below:
...
This is used to set the parameter type to one defined in enum InputType. For example, InputType.SELECT renders a dropdown.
...
public void setMinAllowed(int min)
...
public void addViewOption(String property, Object value)
...
The rendered input widget can be customized by setting up options using these methods. The available views and their options are listed in the section on Input Types.
...
public void addDisplayRule(ParameterDisplayRule rule)
...
public void addPossibleValue(String val, String desc)
public void addPossibleValue(String val, String desc, String colour)
public void setPossibleValues(List<CustomValue<?>> possibleValues)
These methods are used to set up the available option values for an input type such as Dropdown List. addPossibleValue is also overloaded to accept an integer value. The value, description and colour are used to build a CustomValue object which is then used to render an option. The string in the value field will be saved to the database as the selected option. The description is for display purposes only.
- Parameter Panel: The second level of the UI deals with implementing tabs.
- Parameter Section: The third level is used to implement sections.
- Parameter: The fourth and lowest level is used to implement the parameters.
The diagram below illustrates the level of hierarchy listed above:
...
Define CSS rules which can be used for fine-grained control over styling of a parameter. This is described in detail in the section on Helper Objects.
public void addParameterValueDisplay(String key, ParameterValueDisplay pvd)
...
public void setList(boolean)
...
public void setValidationRules(ParameterValidation rules)
public void setObjectValidationRules(Map<String, ParameterValidation> rules)
These methods are used to set up front-end validation rules. For example, this can be used to ensure that an input field is not empty. Object validation is used to validate JSON objects. For example, a field matching parameter may hold the mapping between two fields as a JSON object
{ "from": "field1", "to": "field2"}...
public void setValueDependencies(List<ValueDependent> deps)
public void addValueDependency(String prop, PropertyLocation loc)
...
public void setEvent(String event)
public void setEventParameters(List<ValueDependent> eventParameters)
public void addEventParameter(ValueDependent parameter)
public void addEventParameter(String prop, PropertyLocation loc)
public void setEventData(Map<String, Object> eventData)
...
Events are similar to Value Dependencies, except in reverse. This is used to trigger an event when the parameter’s value changes. This may be used to change the values of “child” parameters. Event Data is used to send any associated data along with the triggered events. For more information, see the section on Helper Objects.
...
public String getDynamicKey()
...
These methods are used for working with Dynamic Parameters, which is discussed in the section on Helper Objects.
...