Informational post: Implementing accordion view using segment widget

HCL Volt MX Volt MX Tips
,
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. Example accordion view using a segment widget.

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

  • Create a segment template and use it for defining the section header for the segment.
  • Implemente 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,});
  }
  • Invoke the above function in the onClick event for the parent flex container in the section header template used for the segment.
  • Implement 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);
    }
  }
  • Implement 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, implement 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

2 Likes