1. In a component, there is a flexcontainer and few labels within the flexcontainer.
After binding, I need access to each row of the segment from within the component so as to change the color of few labels.
So far, I got OnRowDisplay event, but it would be helpful if some insight be provided on how to implement and consume it?
Please guide how to access controls within each row of a segment?
2. How to use and implement Invoke Function from the action editor?
For question 1) I think you are wanting to dynamically change the properties of a widget in a row of a component's segment.
If you want to dynamically change a widget skin as an example, see below. The example will show you how a form can cause the font color of widget, in a row of a component's segment to be changed, via changing the widget's skin:
The way to achieve that is to first, in the Templates -> Segments area, name the skin that is applied to your segment-template label widget, e.g. sknCompSegNormal (for normal use). Secondly, duplicate that skin and change the font color to red and name it sknCompSegRed, as an example.
Now, expose the component-with-contract various properties and methods for its form to access/invoke:
Below are the 2 methods to be defined in your component -> Modules -> [component ... controller.js]
define(function() {
return {
constructor: function(baseConfig, layoutConfig, pspConfig) {
},
//Logic for getters/setters of custom properties
initGettersSetters: function() {
},
alertMeNow : function ()
{
alert("Segment component is here ...");
},
setRowData : function (inRowObject, inRowIndex)
{
this.view.segDataMain.setDataAt(inRowObject, inRowIndex);
},
getSelectedIndex : function()
{
return this.view.segDataMain.selectedRowIndex;
}
};
}
);
In my Iris project form, I have a button, btnColorRed, such that when it is clicked, it changes the font color of a segment-component label widget by changing the skin. It is required that the user clicks on a row in that segment-component to select a row first, before clicking btnColorRed!
4. btnColorRed calls the following code in a low-code action-snippet, for the onClick event, to change the skin of segment-label lblNamevalue , to sknCompSegRed:
// get the segment-component selected row after user clicks on 1 row.
let indexTmp = this.view.listdata.getSelectedIndex()[1];
let tmpSegData = this.view.listdata.dataSeg; // get segment object!
let tmpValue = this.view.listdata.dataSeg[indexTmp].lblNamevalue.text;
if (!tmpValue || tmpValue.length < 1)
{
tmpValue = this.view.listdata.dataSeg[indexTmp].lblNamevalue;
}
if (!tmpValue || tmpValue.length < 1)
{
return false; // label has no text, not shown.
}
tmpSegData[indexTmp].lblNamevalue = {text: tmpValue, skin:'sknCompSegRed'};
this.view.listdata.dataSeg = tmpSegData;
return true;
Hope the above is clear and will help!
Thanks for the input. While traversing each row (not based on selection) or adding/updating data to the segment, I need to apply the color based on few conditions, is its possible?
That is certainly possible. From my code for the btnColorRed button's onClick event, the line:
let tmpSegData = this.view.listdata.dataSeg; // get segment object!
get an array/JSON of all the rows in your segment. You can loop through to change/edit as you need. It will be helpful to use an alert to see your segment data, at the start, e.g. alert(JSON.stringify(tmpSegData)); .
It throws exception 'depMaps.slice is not a function'
For 2) How to use and implement Invoke Function from the action editor, you define your function in the form's controller, for example, if your form name is Form1, then add functions to Form1 controller module, named Iris -> Project -> your-Iris-project-name -> Controllers -> Form1Controller. Define a function with the following format:
function_name : function (inParam1, inParam2)
{
// your code
}, // if you have other functions, make sure there is a comma here!
In a low-code action, once you dragged the "Invoke Function" node to your action-script-tree, you can select the function, defined in the controller module, to execute.
