Sp-dev-docs: Accordion for a list is not working

[chaitu07311]

I modified MyAccordionTemplate.ts file content with a REST API code to GetItems from a list, but showing a blank page in workbench. Any help would be appreciated!!

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 9f5a35c2-9914-fc67-1550-15d4f63c918c
• Version Independent ID: 8418c398-1a93-622d-4df8-84c866fef67f
• Content: Add jQueryUI Accordion to your SharePoint client-side web part
• Content Source: docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md
• Product: sharepoint
• GitHub Login: @spdevdocs
• Microsoft Alias: spdevdocs

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[StfBauer]

Do you see any errors on the console in the browser?

[chaitu07311]

No StfBauer

[andrewconnell]

Which workbench? If local, that's expected as there's no SharePoint context in the local workbench. You can only call the SharePoint REST API from the hosted workbench.

If that's not it, need more information to help troubleshoot. What about the network tab... any errors calling the REST API?

If not, please share your webpart code... hard to troubleshoot with information provided.

[chaitu07311]

I am it testing in hosted workbench, Andrewconnell. I am referring this link https://sharepoint.stackexchange.com/questions/249578/sharepoint-online-list-accordion and modified List and Column names.

[chaitu07311]

I did not see any errors in network tab too. I am able to deploy the Accordion webpart in my O365 tenant from this article. Now, I am trying same with a list.

[andrewconnell]

Sorry... I'm not clear @chaitu07311. If you see nothing in the Network tab, then no HTTP call is being made to the REST API. If there are no errors in the JS console, that leads me to believe it's a code / logic issue... hard to troubleshoot without more info. Maybe post web part to your own repo and share the link?

[chaitu07311]

Okay, i will share my dev tenant URL. Please share me your mail id @andrewconnell.

[andrewconnell]

You misunderstood... share your code where we can see it... either post your web part code in this issue / link to a github repo where we can look at it.

Not looking for your tenant...

[chaitu07311]

Okay, here is my webpart.ts code. FYI, i tried teh code shared in previous link in both SP2013/Online, it is working in SP2013 but not in online with CEWP. Accordion style is missing at online site.

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './AccordionWebPart.module.scss';
import * as strings from 'AccordionWebPartStrings';
import MyAccordionTemplate from './MyAccordionTemplate';
import * as jQuery from 'jquery';
import 'jqueryui';
import { SPComponentLoader } from '@microsoft/sp-loader';

export interface IAccordionWebPartProps {
  description: string;
}

export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWebPartProps> {

public constructor() {
   super();
   SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
}

 public render(): void {
 this.domElement.innerHTML = MyAccordionTemplate.templateHtml;

 const accordionOptions: JQueryUI.AccordionOptions = {
   animate: true,
   collapsible: false,
   icons: {
     header: 'ui-icon-circle-arrow-e',
     activeHeader: 'ui-icon-circle-arrow-s'
   }
 };

 jQuery('.accordion', this.domElement).accordion(accordionOptions);
}

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

editted code to add fencing for readability by @andrewconnell

[andrewconnell]

I edited your reply to include code fencing so I could read the code... it's a markdown technique to surround code with three back-ticks and the code ref

You still haven't shared enough... from this code...

1) can't see the template
2) can't see where you are getting any date to show in the accordion
3) can't tell if jquery & accordion are included in the bundle or if externally referenced in a CDN, referenced correctly so they are loading in the correct order

It would _really_ help if you created a public repo in your github account, pushed the entire web part project there, and replied with a link to it. It's just not possible to troubleshoot the problem with part of the answer...

[chaitu07311]

Here it is, @andrewconnell
https://github.com/chaitu07311/MyProjects

[andrewconnell]

Now we're getting somewhere... the good news is I see a lot of problems here. You're trying to mix two different solutions together and while you aren't seeing errors, it's no surprise things are breaking.

1. You're mixing versions of jQuery & jQueryUI on the page:

   • you're loading jquery & jqueryui in the template, but you're already loading them in your bundle, so you're loading them twice on the page...
   • but what's more problematic for dupe instances on the page, you have conflicting versions... the ones referenced & download in the template don't match what is in your project

2. You're loading the SharePoint JSOM on the page... but you never use it... this isn't even needed

3. You're trying to get a reference to the accordion by a CSS class, but you've created it as an ID

The last one would explain why you don't see anything... that has nothing to do with SharePoint / SPFx... that's a web dev error.

[chaitu07311]

@andrewconnell, fixed my code issues you identified. But I still see a blank page. Any idea?

[chaitu07311]

Updated code in github as well for your reference.

[chaitu07311]

Hi @andrewconnell, I suspect only MyAccordionTemplate.ts file content.

Because, when I followed this article, I was able to see the static HTML content applied accordion successfully.

But, when I tried to build content dynamically for SharePoint list items with some javascript code, it is failing.

So, I need your help in modifying MyAccordionTemplate.ts file content to manage both javascript code and HTML content. I doubt on putting entire code in public static templateHtml variable.

[andrewconnell]

I see you've made changes where you are now calling the SharePoint REST API... good work on getting all that stuff fixed. From this point. it's just client-side dev...

Unfortunately, I don't have the bandwidth to troubleshoot every project... you seem to be on your way as the specific SPFx project structure & external reference issues have been addressed.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues