import { Log } from '@microsoft/sp-core-library' ; import { override } from '@microsoft/decorators' ; import { BaseFieldCustomizer , IFieldCustomizerCellEventParameters } from '@microsoft/sp-listview-extensibility' ; import * as strings from 'HelloWorldFieldCustomizerStrings' ; import styles from './HelloWorldFieldCustomizer.module.scss' ; /**
 * If your field customizer uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */ export interface IHelloWorldFieldCustomizerProperties { sampleText ? : string ; } const LOG_SOURCE = 'HelloWorldFieldCustomizer' ; export default class HelloWorldFieldCustomizer extends BaseFieldCustomizer < IHelloWorldFieldCustomizerProperties > { @ override public onInit ( ) { Log . info ( LOG_SOURCE , 'Activated HelloWorldFieldCustomizer with properties:' ) ; Log . info ( LOG_SOURCE , JSON . stringify ( this . properties , undefined , 2 ) ) ; Log . info ( LOG_SOURCE , `The following string should be equal: "HelloWorldFieldCustomizer" and "${ strings . Title }"` ) ; return Promise . resolve < void > ( ) ; } @ override public onRenderCell ( event ) { event . domElement . classList . add ( styles . cell ) ; event . domElement . innerHTML = `
                <div class='${ styles . full }'>
                  <div style='width: ${ event . fieldValue }px; background:#0094ff; color:#c0c0c0'>
                    &nbsp; ${ event . fieldValue }
                  </div>
                </div>` ; } @ override public onDisposeCell ( event ) { super . onDisposeCell ( event ) ; } }