Informational post: Implementing accordion view using segment widget

HCL Volt MX Volt MX Forum
,
1

Hello All,

This post describes about implementing an accordion view using a segment widget.

Accordion view: When displaying data in a segment widget grouped into sections, clicking a section header must collapse the records in that section and just that section header has to be shown. And when clicked on a section header of a section that is in collapsed state it has to expand the section showing the records in that section.

Here is a video showing the user experience by implementing an accordion view using a segment widget.

Below are the steps followed to implement this accordion view using segment widget.

  • Created a segment template and used it for defining the section header for the segment.
  • Implemented the below code in the controller of this section header template
  sectionHeaderOnClickHandler : function (eventObject, context) {
    var sectionIndex = context["sectionIndex"];
    var rowIndex = context["rowIndex"];
    this.executeOnParent("accordianViewImplementation", {"sectionIndex":sectionIndex,"rowIndex":rowIndex,});
  }
  • Invoked the above function in the onClick event for the parent flex container in the section header template used for the segment.
  • Implemented below code in the form controller which has the segment widget that is using the section header template in it.
  accordianViewImplementation: function (context) {
    var clickedSectionIndex = context.sectionIndex;
    var currentDataInSegment = this.view.segAccordian.data;
    var numberOfRowsInTheCurrentStateOfClickedSection = currentDataInSegment[clickedSectionIndex][1].length;

var clickedSectionHeader = this.originalDataInSegment[clickedSectionIndex][0];
var originalDataInTheClickedSection = this.originalDataInSegment[clickedSectionIndex];

if(numberOfRowsInTheCurrentStateOfClickedSection === 0) {
  for (i=0;i<originalDataInTheClickedSection[1].length;i++) {
    this.view.segAccordian.addDataAt(originalDataInTheClickedSection[1][i], i, clickedSectionIndex);
  }
}
else {
  var emptySectionWithHeader = [[clickedSectionHeader,[]]];
  this.view.segAccordian.addSectionAt(emptySectionWithHeader, clickedSectionIndex);
  this.view.segAccordian.removeSectionAt(++clickedSectionIndex);
}



}

  • Implemented the below function in the form controller and invoked this function in the init lifecycle event of the form, this function will perform a deep copy of the data present initially in the segment widget.
  formInitCallback : function () {
    this.originalDataInSegment = this.deepCopy(this.view.segAccordian.data);
  },
  • Lastly, implemented below function to perform a deep copy of the data present in the segment widget in to a local variable 'originalDataInSegment' of the form controller.
  deepCopy : function (originalData) {
    var deepCopiedData, value, key;

if (typeof originalData !== "object" || originalData === null) {
  return originalData;
}

deepCopiedData = Array.isArray(originalData) ? [] : {};
for (key in originalData) {
  value = originalData[key];
  deepCopiedData[key] = this.deepCopy(value);
}
return deepCopiedData;



},

Thanks and Regards,

Venkata Raju Bankapalli