How to render separate HTML file with SPFX WebPart

SPFX WebParts gives us facility to write HTML content in Render() method. Many times if HTML file is large or for our own convenience we want or needs  to create separate HTML file.

To create HTML file we need to create .ts file with HTML content.To use created file we need to add its reference to WebPart file. Web Part file will render its HTML content in browser.

I have created SPFX Solution: SPDesignTest and added webpart SpCustomDesignSpfxWebPart

To add separate html file I created MyCustomHTML.ts file  and added content as shown in below image.

 

Once HTML file is ready we can access this file in SpCustomDesignSpfxWebPart.ts file by adding its references.

Added reference

/* Reference of MyCustomHTML HTML Content File  */
import objMyCustomHTML from './MyCustomHTML';

/* Load External Bootstrap CSS Reference */
import { SPComponentLoader } from '@microsoft/sp-loader';
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

We need to provide its reference to SpCustomDesignSpfxWebPart.ts using variable as shown in below code

public render(): void {
    /* Load HTML From MyCustomHTML.ts file by using its variable templateHTML */
    this.domElement.innerHTML = objMyCustomHTML.templateHTML;
  }

Final SpCustomDesignSpfxWebPart.ts will look as per below image

Now when we run our SPFX Solution using gulp serve we are able to see HTMLas shown in below image

SPFX WebPart TS File Code :

MyCustomHTML.ts

import { escape } from '@microsoft/sp-lodash-subset';
import styles from './SpCustomDesignSpfxWebPart.module.scss';

export default class sample {

	public static templateHTML: string = 
	`
		<div class="container">
		<h2>Custom Form</h2>
		<p>Custom Form in SPFX using Bootstrap 4</p>
		<form>
		<div class="form-group">
			<label for="inputdefault">Name</label>
			<input class="form-control" id="inputdefault" type="text">
		</div>
		<div class="form-group">
			<label for="sel1">Country</label>
			<select class="form-control" id="sel1">
				<option>-Select-</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
			</select>
		</div>
		<div class="form-group">
			<button type="submit" class="btn btn-default">Submit</button>
		</div>
		</form>
	</div>

	`
	}

SpCustomDesignSpfxWebPart.ts

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 './SpCustomDesignSpfxWebPart.module.scss';
import * as strings from 'SpCustomDesignSpfxWebPartStrings';

export interface ISpCustomDesignSpfxWebPartProps {
  description: string;
}

/* Reference of MyCustomHTML HTML Content File  */
import objMyCustomHTML from './MyCustomHTML';

/* Load External Bootstrap CSS Reference */
import { SPComponentLoader } from '@microsoft/sp-loader';
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

export default class SpCustomDesignSpfxWebPart extends BaseClientSideWebPart<ISpCustomDesignSpfxWebPartProps> {

  public render(): void {
    /* Load HTML From MyCustomHTML.ts file by using its variable templateHTML */
    this.domElement.innerHTML = objMyCustomHTML.templateHTML;
  }

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

Advertisement