1

Reading this tread (Add jQuery in Client Web part (SPFX)) I'm going to open a new question with another problem.

I am also following the accordion tutorial from Microsoft docs and trying to customize it using jQuery functions: Add jQueryUI Accordion to your SharePoint client-side web part.

Example works fine by following the steps.

Problems come when I want to rewrite (or replace) styles of the default classes to custom colors to my SharePoint Site Theme.

I've read API docs from here: Accordion Widget.

I added a new class in root level of JQueryWebPart.module.scss file (hard-coded red is only for reference and testing purposes).

CSS:

.myAccordionHeaderActive{
    background: red;
}

And just added the following line after accordion creation:

Typescript:

//Line like shown in the example
jQuery('.accordion', this.domElement).accordion(accordionOptions);
//My New Line
jQuery('.accordion', this.domElement).accordion("option", "classes.ui-accordion-header", styles.myAccordionHeaderActive);

I think it should work but new red background does not appear.

Obviously, before to come here to ask for help I tried many other ways to do that with this call, following API docs, but couldn't get that.

Typescript:

jQuery('.accordion',this.domElement).accordion(accordionOptions).accordion("option", "classes", "ui-accordion-header : ${styles.summarAccordionHeaderActive}");
jQuery('.accordion',this.domElement).accordion("option", "classes", "ui-accordion-header : ${styles.summarAccordionHeaderActive}");

None of them work for me.

Thanks in advance.

1

Your TS code looks correct:

jQuery('.accordion', this.domElement).accordion("option", "classes.ui-accordion-header", styles.myAccordionHeaderActive);

Try using 'important' in your CSS class definition

.myAccordionHeaderActive{
    background: red !important;
}
  • Hi. I tried but did not work. Thanks for the idea. I think this is a an issue related on how copiler imports and executes the project. I think my custom class is not available at the moment of the execution of the "option". Neither works even embedding custom class in the domElement – Biggum Sep 24 '19 at 7:42
0

I have found a tricky solution. It's ugly and dirty, but works.

What I have done is rewrite JQuery CSS classes right before render the accordion in the html DOM.

TypeScript: (Original example from MS Docs)

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);
}

TypeScript: (My additions)

public render(): void {
  //rewrite some accordion css classes properties
  this.domElement.innerHTML = `<style type="text/css">
        .ui-state-default{
          background: none;
        }
        .ui-state-hover .ui-icon,
        .ui-state-default .ui-icon{
          background-image: none;
        }

        .ui-accordion-header-active{
          background: #0078d4;
          color: white;
        }

      </style>`;
  //Concatenate original example
  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);
}

Hope someone else find the correct use of JQuery Library or realizes what is the issue cause.

0

I've made a better workaround so I can apply theme colors to accordion. Which is what I wanted to do when I opened this thread.

Instead of writing the style directly in the DOM.innerhtml, I've create a new CSS file (not SCSS, just CSS) and set colors using theme tokens.

AccordionMyStyles.css (for example)

.ui-state-default{
    background: none;
    color: white;
}

.ui-state-hover .ui-icon,
.ui-state-default .ui-icon{
  background-image: none;
}

.ui-accordion-header{
  background-color: "[theme: themePrimary, default: #0078d4]"; 
  font-weight: bold;
}

.ui-accordion-header-active {
  background-color: "[theme: themeTertiary, default: #71afe5]"; 
  color: #222222;
}

In .ts WebPart main file, import AccordionMyStyles.css file using require


require('./AccordionMyStyles.css');

And that worked for me and covered my needs. Hope it to be useful to someone else.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.