SPFx WebPart - Tab

Question

I am totally new to SPFX WebPart Development.

I am trying to develop a Tab Web part - the HTML seems to render properly however the Javascript is not firing (maybe the way I am using is not proper).

Some help would be highly appreaciated.

Thanks in advance.

//The webpart.ts file
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './JqueryWebPart.module.scss';
import * as strings from 'JqueryWebPartStrings';
import MyTabTemplate from './MyTabTemplate';

import * as jQuery from 'jquery';
import 'jqueryui';
import { SPComponentLoader } from '@microsoft/sp-loader';

export interface IJqueryWebPartProps {
  description: string;
}

export default class JqueryWebPart extends BaseClientSideWebPart<IJqueryWebPartProps> {

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

  public render(): void {
    this.domElement.innerHTML = MyTabTemplate .templateHtml;
    jQuery('.tabs', this.domElement);

    function openCity(evt, cityName) {
      // Declare all variables
      var i, tabcontent, tablinks;
    
      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
    
      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
    
      // Show the current tab, and add an "active" class to the button that opened the tab
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  }

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

=================================================

//the template.ts file - holding the html
export default class MyTabTemplate {
    public static templateHtml: string = `
    <div class="tabs">    
        <!-- Tab links -->
        <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'London')">London</button>
        <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
        <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
        </div>

        <!-- Tab content -->
        <div id="London" class="tabcontent">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
        </div>

        <div id="Paris" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
        </div>

        <div id="Tokyo" class="tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
        </div>
        </div>
    `;
}

Answer 1

You cannot just add the function openCity in the render() directly. You need to add it in a script tag, like this:

  public render(): void {
    this.domElement.innerHTML = MyTabTemplate.templateHtml;
    jQuery(".tabs", this.domElement);

    let head: any =document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";
    script.text =
      'function openCity(evt, cityName) { var i, tabcontent, tablinks;tabcontent = document.getElementsByClassName("tabcontent");for (i = 0; i < tabcontent.length; i++) {tabcontent[i].style.display = "none";}tablinks = document.getElementsByClassName("tablinks");for (i = 0; i < tablinks.length; i++) {tablinks[i].className = tablinks[i].className.replace(" active", "");}document.getElementById(cityName).style.display = "block";evt.currentTarget.className += " active";}';

    head.insertBefore(script, head.firstChild);
  }

Answer 2

We can use the fluent UI Pivot control to develop the tab webpart