Part V -- Configuration Properties

ClassificationExtensionApplicationCustomizer.ts

import * as React from "react";
import * as ReactDom from "react-dom";
import { override } from "@microsoft/decorators";
import { Log } from "@microsoft/sp-core-library";
import {
  BaseApplicationCustomizer,
  PlaceholderName,
  PlaceholderContent
} from "@microsoft/sp-application-base";
import { Dialog } from "@microsoft/sp-dialog";

import * as strings from "ClassificationExtensionApplicationCustomizerStrings";
import ClassificationHeader from "../../../lib/extensions/classificationExtension/components/ClassificationHeader";
import { IClassificationHeaderProps } from "./components/ClassificationHeader.types";

const LOG_SOURCE: string = "ClassificationExtensionApplicationCustomizer";

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface IClassificationExtensionApplicationCustomizerProperties {
  ClassificationPropertyBag: string;
  DefaultClassification: string;
  DefaultHandlingUrl: string;
}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class ClassificationExtensionApplicationCustomizer
  extends BaseApplicationCustomizer<IClassificationExtensionApplicationCustomizerProperties> {
  private _topPlaceholder: PlaceholderContent | undefined;


  @override
  public onInit(): Promise<void> {
    if (!this.properties.ClassificationPropertyBag) {
      const e: Error = new Error("Missing required configuration parameters");
      Log.error(LOG_SOURCE, e);
      return Promise.reject(e);
    }

    const header: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(
      PlaceholderName.Top,
      { onDispose: this._onDispose }
    );

    if (!this._topPlaceholder) {
      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Top,
        { onDispose: this._onDispose });

      // the extension should not assume that the expected placeholder is available.
      if (!this._topPlaceholder) {
        console.error("The header placeholder was not found.");
        return;
      }


      const elem: React.ReactElement<IClassificationHeaderProps> = React.createElement(ClassificationHeader, {
        context: this.context,
        ClassificationPropertyBag: this.properties.ClassificationPropertyBag,
        DefaultClassification: this.properties.DefaultClassification,
        DefaultHandlingUrl: this.properties.DefaultHandlingUrl
      });
      ReactDom.render(elem, this._topPlaceholder.domElement);
    }
  }

  private _onDispose(): void {
    // empty
  }
}

ClassificationHeader.tsx

import * as React from "react";
import {
  IClassificationHeaderProps,
  IClassificationHeaderState,
} from "./ClassificationHeader.types";
import { MessageBar, MessageBarType } from "office-ui-fabric-react/lib/MessageBar";
import { Link } from "office-ui-fabric-react/lib/Link";
import { Web } from "sp-pnp-js/lib/pnp";
import * as strings from "ClassificationExtensionApplicationCustomizerStrings";


export default class ClassificationHeader extends React.Component<IClassificationHeaderProps, IClassificationHeaderState> {
  constructor(props: IClassificationHeaderProps) {
    super(props);
    this.state = {
      isLoading: true,
      businessImpact: null
    };
  }

  public componentDidMount(): void {
    this.setState({
      isLoading: true,
      businessImpact: null
    });

    const web: Web = new Web(this.props.context.pageContext.web.absoluteUrl);
    web.select("Title", "AllProperties")
      .expand("AllProperties")
      .get()
      .then(r => {
        var businessImpact: string = this.props.DefaultClassification;

        // handle the default situation where there is no classification
        if (r.AllProperties && r.AllProperties[this.props.ClassificationPropertyBag]) {
          businessImpact = r.AllProperties[this.props.ClassificationPropertyBag];
        }

        this.setState({
          isLoading: false,
          businessImpact: businessImpact
        });
        console.log("All properties results", r);
      });
  }

  public render(): React.ReactElement<IClassificationHeaderProps> {
    // get the business impact from the state
    let { businessImpact } = this.state;

    // ge the default handling URL
    let handlingUrl: string = this.props.DefaultHandlingUrl;

    // change this switch statement to suit your security classification
    var barType: MessageBarType;
    switch (businessImpact) {
      case "MBI":
        // if you'd like to display a different URL per classification, override the handlingUrl variable here
        // handlingUrl = "/SitePages/Handling-instructions-MBI.aspx"
        barType = MessageBarType.warning;
        break;
      case "HBI":
        barType = MessageBarType.severeWarning;
        break;
      case "LBI":
        barType = MessageBarType.info;
        break;
      default:
        barType = undefined;
    }

    // if no security classification, do not display a header
    if (barType === undefined) {
      return null;
    }

    return (
      <MessageBar
        messageBarType={barType}
      >
        {strings.ClassifactionMessage.replace("{0}",this.state.businessImpact)}
        {handlingUrl && handlingUrl !== undefined && handlingUrl !== "" ?
          <Link
            href={handlingUrl}

          > {strings.HandlingMessage}</Link>
          : null
        }
      </MessageBar>
    );
  }
}

ClassificationHeader.types.ts

import { ExtensionContext } from "@microsoft/sp-extension-base";

export interface IClassificationHeaderProps {
    context: ExtensionContext;
    ClassificationPropertyBag: string;
    DefaultClassification: string;
    DefaultHandlingUrl: string;
}

export interface IClassificationHeaderState {
    isLoading: boolean;
    businessImpact: string;
}