Indicate selected row of a segment in a responsive web app

HCL Volt MX Volt MX Forum
1

I built a web app with a segment loaded by a service call with Iris 9.5. The segment is populated properly.

The list should now show the selected row (e.g. by changing the background color) and this of course should change after clicking at another row.

Is there a default feature to configure this? If not - which action I have to use and how to implement it?

Many thanks in advance for your help!

2
The below is the logic for expand/collapse the selected row and change the background skin. You can tweak the below code as per your requirement. Hope this helps.
this.view.segFilesRowData.onRowClick = this.accordianView;
accordianView(context){
try{
var selectedRow = this.view.segFilesRowData.selectedRowItems[0];
var rowIndex = this.view.segFilesRowData.selectedRowIndex[1];
var segmentFilesData = this.view.segFilesRowData.data;
var expanded = selectedRow.flxMoreDetails.isVisible;
for(var i =0;i<segmentFilesData.length;i++){
if(i===rowIndex){
segmentFilesData[i]["flxMoreDetails"]["isVisible"] = !expanded;
if(expanded){
segmentFilesData[i]["imgArrow"] = "arrow_backward.png"; //down
segmentFilesData[i]["flxFilesRowData"]["skin"] = "sknFlxSegCollapse";
}else{
segmentFilesData[i]["imgArrow"] = "arrow_forward.png"; //up
segmentFilesData[i]["flxFilesRowData"]["skin"] = "sknFlxBGE6EAF0Op40";
}
}else{
segmentFilesData[i]["imgArrow"] = "arrow_backward.png"; //down
segmentFilesData[i]["flxFilesRowData"]["skin"] = "sknFlxSegCollapse";
segmentFilesData[i]["flxMoreDetails"]["isVisible"] = false;
}
}
this.view.segFilesRowData.setData(segmentFilesData);
3

Hi Veera,

many thanks for your quick help! May I ask you for some more hints to make use of it?

I got the idea of the code but I'm not sure where to place it in Iris. Where is the right place?

a) in a snippet in onRowClick of my segment

b) in the controller of the form?

Both did not work for me so far.

Thank you!

4

in the form controller onNavigate (or) preshow method add the below line by renaming the below widget name with your form's widget name.

this.view.segFilesRowData.onRowClick = this.accordianView;
5

I encountered this issue, and unfortunately, for responsive web, it’s not possible to natively change the skin of a clicked row in a segment, even though the segment’s skin property has a "pressed" option.

I managed to achieve this with a line of code by creating a dynamic function. This function, when called through the segment’s onRowClick action, changes the color of the clicked row.

The function dynamically identifies the name of the flex container within the template.

To apply the row skin change, you need to call the function through the segment's onRowClick action, passing in the parameters: segueWidget, sectionNumber, rowNumber, and segmentId.

The function uses a global object (selectedRows) to store the index of the selected row for each segment. The key is created dynamically using the segmentId (stored as selectedRowKey), allowing each segment to keep track of its selected row separately. If a row was previously selected (i.e., selectedRows[selectedRowKey] has a value other than -1), the function resets the skin of the previous row to a default skin (slFbox), visually deselecting that row.

Note: When calling the function to change the skin, the content of seg.selectedRowItems is reset.

Before calling the function in the onRowClick action, define a variable to store the object of the clicked row.

Example:

let segMyListRowItems = self.view.segMyList.selectedRowItems;

After that, call the function.

To retrieve data from the variable, you can do the following:

this.view.txtName.text = segMyListRowItems[0].lblNameUser.text;




rowClickedSeg: function(seguiWidget, sectionNumber, rowNumber, segmentId) {
    var flxName = seguiWidget.rowTemplate.split('/').pop();

// Sets the key name for the selected index using the segmentId

var selectedRowKey = “selectedRow_” + segmentId;


// Checks if the previous index is stored and resets it

if (selectedRows[selectedRowKey] !== undefined && selectedRows[selectedRowKey] !== -1) {

var segPrevData = seguiWidget.data[selectedRows[selectedRowKey]];

segPrevData[flxName] = {

“skin”: “slFbox” // Skin Default

};

seguiWidget.setDataAt(segPrevData, selectedRows[selectedRowKey], sectionNumber);

}


// Applies the skin to the selected row
var segData = seguiWidget.data[rowNumber];
segData[flxName] = {
    "skin": "sknClickedLine" // Selection skin
};
seguiWidget.setDataAt(segData, rowNumber, sectionNumber);

// Update the selected index for the specific segment
selectedRows[selectedRowKey] = rowNumber;



},

Sorry for any spelling mistakes, I'm Brazilian and I used Google Translate to translate and try to help you.

If you have any questions, I'm at your disposal.