MashZone NextGen 10.2 | Appendix | Legacy Presto components | Mashables and Mashups | Views for Mashups and Mashables | Creating Pluggable Views or Libraries | Implement a Pluggable View Class | Pluggable View Classes: Using Mashable/Mashup Data | Selecting Columns for View Configuration
 
Selecting Columns for View Configuration
The showConfig method is called in the second step of the MashZone NextGen View Maker wizard. The Data Table with the mashable/mashup response is passed as well as a configuration object for the view and a selector for the node in this page where the configuration form will be rendered.
self.showConfig = function(dataTable, selector, config){

config = config || self.config;
var form = $(selector);
self.form = form;

form.html('<div><div>Select Column:</div><div><select></select></div></div>');
config.columns.each(function(col){
var name = col.name,
selected = name == config.selectedColumn ? 'selected="selected"' : '';
form.find('select').append('<option value="' + name + '" ' + selected + ' >' + name + '</option>');
});

};
The config parameter may contain:
*Properties for the view itself, such as the name, and the underlying view library.
*Properties for the fields in this configuration form, if the user is editing an existing view or has simply moved back to a previous step in the wizard.
*A columns property with an array of objects containing configuration for each column that the user has chosen to include in this view in the previous step (Data Configuration). Each configuration object for a column can contain these properties:
name
The name of this column. If the data for this row or cell is complex, this may be a path separated by / marks.
header
The label to display for this column. This defaults to the column name, but users can change this to provide a more useful display label.
data-type
One of several formats for the data in this column.
*date = a date and the format to show it in (either mm/dd/yyyy or dd/mm/yyyy)
*html = the data also contains HTML markup tags which should be rendered
*image = a URL to an image to show in an <img> tag.
*link = a URL to make into a link with an <a> tag.
*longstring = long text content will be truncated and ellipsis added
*number = numeric data and the formats to apply
*string = text content. This is the default
template
An optional template of how to construct the data for this column.
Note: The MashZone NextGen View Maker wizard shows users options to set alternate formats and templates for columns in the Data Configuration step. You can easily apply this configuration when the view is rendered in the draw or update methods. See Selecting Columns for View Configuration for an example.
This columns array is used to build the options for a <select> field in this form so that users can select one column, such as this example:
The getConfig method is called when users click Next to move to the Preview step in the View Maker wizard. This method retrieves the name of the selected column and saves it in the config object for the view.
if(self.form){
self.config.selectedColumn = self.form.find('select').val();
}

Copyright © 2013-2018 | Software AG, Darmstadt, Germany and/or Software AG USA, Inc., Reston, VA, USA, and/or its subsidiaries and/or its affiliates and/or their licensors.
Innovation Release