In many analytic applications we will need to select values from some type of control. In many cases, we will use a drop list that will allow a single selection. However, if you want more than a single selected value, then a chart or a table should be considered to present values from which to choose. Charts and tables also offer more information than a drop down list, because we can associate measures and dimensions with our available selection values, which allows for more informative selections.
In this example, we are going to reference a chart as our selector.
When one of the elements in the chart is selected, then we want to paste that value into an Input Control. We have made the selections more informative by adding the number of carts each item was present in. We will allow up to 4 selected items to be pasted into Input Fields.
In the above screen shot, four items in the chart are selected. The first Input field (InputField_6) contains 4 4. This is because two different methods to populate the field were used, as shown below.
The getSelections() method of the Chart object will return an array of selection objects, and each object will represent a selection made in the chart. The .length property of the selections array will return the number of elements in the array, or in this case the number of selections in the chart.
The difficult part was accessing the text for the selection, because the text is embedded in a Selection object. So, to extract the text value, I used the console.log function to output the Selection object to the Console of Google Chrome.
To view the console when running the analytic application, press the F12 key when the application is running (not during development, but after pressing the Run Analytic Application button). This will open a side panel in Chrome. At the top of this panel are menu items, click on the Console menu item.
To examine the Selection object and the array, I selected three items in the chart. I selected these items one at a time. This allowed me to see one selection, two selections, and three selections. See the console output shown below.
With one item in the chart selected, the output in the console is simply the entry [{…}]. The [] brackets means that it is an array, and there is only a single entry. After selecting two, and then three elements, you can see that the array is increasing in number of elements.
If the last line is clicked on, then we will see the following three array entries:
Here we can see the thee elements selected - POSTAGE, PARTY BUNTING, and Manual. Now, we want to extract these values form the array. To do this, we must realize the the Description_g3p3501n1k identifier is different from the label in the chart itself, which is simply Description. If we try to use simply Description, then we will not be able to retrieve the value for the array entry. We also must realize the each entry is in a separate element of the selection array.
The code used to reference the description values in the selection array is shown above. We reference each element of the array with the code selection[x], where x is the element of the array that we want to access. the ["Description_g3p3501n1k"] refers to the identifier for the text that we want to access. Therefore, we want to access the text stored in the Selection object identified by "Description_g3p3501n1k", in elements 0, 1, and 2 of the array.
Below is the complete code that was used to populate the input controls using the chart as the selector.
There are basically three sections to the code. The first section:
retrieves the number of elements in the array. Notice that in order to place the number in the input field, we needed to use the toString function to convert the number to text.
The second block of code:
retrieves the selected values with the code: selection[i]["Description_g3p3501n1k"], where i is the array element to access. We place text in an input control using the setValue method. For example, InputField_7.setValue(). In this example, we are placing text in input control InputField_7. The value iSelCount was set in the first block of code, and it contains the number of selections made in the cart, which can be less than 4.
The second block of code:
loops through the remaining input controls and blanks them. This will remove any unselected values in the chart that were previously selected.
When creating an analytic application a chart or table should be considered when deciding what type of selector control to use. Drop down lists are convenient, but only allow for limited information to be presented. A chart or table can provide an enriched presentation that allows for more informative selections.
.
In this example, we are going to reference a chart as our selector.
When one of the elements in the chart is selected, then we want to paste that value into an Input Control. We have made the selections more informative by adding the number of carts each item was present in. We will allow up to 4 selected items to be pasted into Input Fields.
In the above screen shot, four items in the chart are selected. The first Input field (InputField_6) contains 4 4. This is because two different methods to populate the field were used, as shown below.
var selection = Chart_1.getSelections();
var iSelCount = Chart_1.getSelections().length;
InputField_6.setValue(selection.length.toString() + ' ' + iSelCount.toString());The getSelections() method of the Chart object will return an array of selection objects, and each object will represent a selection made in the chart. The .length property of the selections array will return the number of elements in the array, or in this case the number of selections in the chart.
The difficult part was accessing the text for the selection, because the text is embedded in a Selection object. So, to extract the text value, I used the console.log function to output the Selection object to the Console of Google Chrome.
console.log(Chart_1.getSelections()); Note: The console.log function is very helpful, as it allows the value of variables to be viewed during run-time. It may also convenient to place Input fields on the canvas where we can output variable values. These input fields can be deleted once the application is finished being developed. However, Input fields require string data, and cannot display numbers (unless converted, arrays, or other type of variable formats.
To view the console when running the analytic application, press the F12 key when the application is running (not during development, but after pressing the Run Analytic Application button). This will open a side panel in Chrome. At the top of this panel are menu items, click on the Console menu item.
To examine the Selection object and the array, I selected three items in the chart. I selected these items one at a time. This allowed me to see one selection, two selections, and three selections. See the console output shown below.
With one item in the chart selected, the output in the console is simply the entry [{…}]. The [] brackets means that it is an array, and there is only a single entry. After selecting two, and then three elements, you can see that the array is increasing in number of elements.
If the last line is clicked on, then we will see the following three array entries:
Here we can see the thee elements selected - POSTAGE, PARTY BUNTING, and Manual. Now, we want to extract these values form the array. To do this, we must realize the the Description_g3p3501n1k identifier is different from the label in the chart itself, which is simply Description. If we try to use simply Description, then we will not be able to retrieve the value for the array entry. We also must realize the each entry is in a separate element of the selection array.
Note: Notice the Length property at the bottom of the above graphic. We used this property to determine how many elements were in the array using the following code: Chart_1.getSelections().length;
selection[0]["Description_g3p3501n1k"]
selection[1]["Description_g3p3501n1k"]
selection[2]["Description_g3p3501n1k"]The code used to reference the description values in the selection array is shown above. We reference each element of the array with the code selection[x], where x is the element of the array that we want to access. the ["Description_g3p3501n1k"] refers to the identifier for the text that we want to access. Therefore, we want to access the text stored in the Selection object identified by "Description_g3p3501n1k", in elements 0, 1, and 2 of the array.
Below is the complete code that was used to populate the input controls using the chart as the selector.
var selection = Chart_1.getSelections();
var iSelCount = Chart_1.getSelections().length;
InputField_6.setValue(selection.length.toString() + ' ' + iSelCount.toString());
var i = 0;
for (i=0; i<iSelCount; i++)
{
if (i===0){
InputField_7.setValue(selection[i]["Description_g3p3501n1k"]);
} else if (i===1){
InputField_8.setValue(selection[i]["Description_g3p3501n1k"]);
}else if (i===2){
InputField_9.setValue(selection[i]["Description_g3p3501n1k"]);
}else if (i===3){
InputField_10.setValue(selection[i]["Description_g3p3501n1k"]);
}
}
var j=0;
for (j=i; j<4; j++)
{
if (j===0){
InputField_7.setValue(' ');
} else if (j===1){
InputField_8.setValue(' ');
}else if (j===2){
InputField_9.setValue(' ');
}else if (j===3){
InputField_10.setValue(' ');
}
}There are basically three sections to the code. The first section:
var selection = Chart_1.getSelections();
var iSelCount = Chart_1.getSelections().length;
InputField_6.setValue(selection.length.toString() + ' ' + iSelCount.toString());retrieves the number of elements in the array. Notice that in order to place the number in the input field, we needed to use the toString function to convert the number to text.
The second block of code:
var i = 0;
for (i=0; i<iSelCount; i++)
{
if (i===0){
InputField_7.setValue(selection[i]["Description_g3p3501n1k"]);
} else if (i===1){
InputField_8.setValue(selection[i]["Description_g3p3501n1k"]);
}else if (i===2){
InputField_9.setValue(selection[i]["Description_g3p3501n1k"]);
}else if (i===3){
InputField_10.setValue(selection[i]["Description_g3p3501n1k"]);
}
retrieves the selected values with the code: selection[i]["Description_g3p3501n1k"], where i is the array element to access. We place text in an input control using the setValue method. For example, InputField_7.setValue(). In this example, we are placing text in input control InputField_7. The value iSelCount was set in the first block of code, and it contains the number of selections made in the cart, which can be less than 4.
The second block of code:
var j=0;
for (j=i; j<4; j++)
{
if (j===0){
InputField_7.setValue(' ');
} else if (j===1){
InputField_8.setValue(' ');
}else if (j===2){
InputField_9.setValue(' ');
}else if (j===3){
InputField_10.setValue(' ');
}
}loops through the remaining input controls and blanks them. This will remove any unselected values in the chart that were previously selected.
When creating an analytic application a chart or table should be considered when deciding what type of selector control to use. Drop down lists are convenient, but only allow for limited information to be presented. A chart or table can provide an enriched presentation that allows for more informative selections.
.
- SAP Managed Tags:
1 Comment
