3

I'm having trouble with the Expand/Not Expand. I've followed instruction from the Vendor rating template but still no luck..

What I've done :

  1. Creating an paper accordion widget (not cards) named AccordionServeur with this script in the onDataLoad event :
var rows = widget.children._values;
    for (var i = 0; i < rows.length; i++) {
      if (rows[i].name.indexOf('AccordionServeurDetail') === -1) {
        rows[i].styles = ['collapsed'];
      }
    }

  1. Add some TextBox inside the AccordionServeurRow to edit the value (i.e. with datalink)

  2. Create the client script with this code:

function expandAccordionRow(accordionRow) {
  var rows = accordionRow.parent.children._values;
  var i = 0;
  for (i = 0; i < rows.length; i++) {
    if (rows[i].name.indexOf('AccordionServeurDetail') > -1) {
      rows[i].styles = [];
    } else {
      rows[i].styles = ['collapsed'];
    }
  }
  accordionRow.styles = [];
}

function collapseAccordionRow(accordionRow) {
  var rows = accordionRow.parent.children._values;
  var i = 0;
  accordionRow.styles = ['collapsed'];
  for (i = 0; i < rows.length; i++) {
    if (rows[i].name.indexOf('AccordionServeurDetail') > -1) {
      rows[i].styles = ['hidden'];
    }
  }
}

function toggleAccordionRow(accordionRow) {
  if (accordionRow.styles.length === 0) {
     collapseAccordionRow(accordionRow);
  } else {
        expandAccordionRow(accordionRow);
  }
}
  1. On the AccordionServeurRow, in the onAttach event, I run this script:
widget.styles = ['collapsed'];
widget.getElement().removeAttribute('aria-expanded');
  1. On the AccordionServeurRow, in the onClick event, I run this script:
toggleAccordionRow(widget);
  1. On the AccordionServeurDetail, in the dataLoad event, I run this script:
widget.styles=['hidden'];

But it still expands the detail when I open the page where the widget is. Plus the detail stays expanded event if I click on the AccordionRow. Did I miss something in the script or is it because of parameters in the widget ?

EDIT : I've found the solution. You have to create style "collapsed" and to call them in the script above : 

.app-AccordionRow.collapsed {
  margin: 0 !important;
}

.app-AccordionDetail.hidden {
  display: none !important;
}
Sango_GS
  • 31
  • 4
  • Are you not using the prebuilt Accordion widget? That widget will automatically handle the expand/collapse for you, although it is built more so to handle datasource items. So if you are referring to more of a custom application, than the prebuilt Accordion might not work for you. – Markus Malessa May 03 '19 at 14:11
  • Hi Markus, I'm using the prebuilt Accordion. But I just want to have the same behaviour as the Accordion widget in the companies page from the Vendor ratings template ( link to the template : https://developers.google.com/appmaker/templates/vendor-ratings) . They manage in this template to hide the Accordion row by default . That what I would acheive. – Sango_GS May 03 '19 at 15:11
  • Does [this](https://stackoverflow.com/questions/51282275/accordion-in-appmaker/51283358#51283358) answer your question? – Darpan Sanghavi May 06 '19 at 05:14
  • Hi, Unfortunately not. I've used the code in this topic but without success. Just to be surein the code there is 'YourElementName' . This part should be replaced by AccordionRowDetail right ? – Sango_GS May 06 '19 at 14:03

1 Answers1

0

You have to create style "collapsed" and "Hidden" in the style editor in the global style part to call them in the script above :

.app-AccordionRow.collapsed {
  margin: 0 !important;
}

.app-AccordionDetail.hidden {
  display: none !important;
}
Sango_GS
  • 31
  • 4