Skip to content

Instantly share code, notes, and snippets.

Last active Apr 23, 2018
What would you like to do?
Part V of Security Classification Header - Conditional Header
import * as React from "react";
import { IClassificationHeaderProps, IClassificationHeaderState, DefaultClassification } 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 { ClassificationPropertyBag } from "../../../../lib/extensions/classificationExtension/components/ClassificationHeader.types";
export default class ClassificationHeader extends React.Component<IClassificationHeaderProps, IClassificationHeaderState> {
constructor(props: IClassificationHeaderProps) {
this.state = {
isLoading: true,
businessImpact: null
public componentDidMount(): void {
isLoading: true,
businessImpact: null
const web: Web = new Web(this.props.context.pageContext.web.absoluteUrl);"Title", "AllProperties")
.then(r => {
var businessImpact:string = DefaultClassification;
// handle the default situation where there is no classification
if (r.AllProperties && r.AllProperties[ClassificationPropertyBag]) {
businessImpact = r.AllProperties[ClassificationPropertyBag];
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;
// change this switch statement to suit your security classification
var barType: MessageBarType;
switch (businessImpact) {
case "MBI":
barType = MessageBarType.warning;
case "HBI":
barType = MessageBarType.severeWarning;
case "LBI":
barType =;
barType = undefined;
// if no security classification, do not display a header
if (barType === undefined) {
return null;
return (
This site is classified as {this.state.businessImpact}. <Link href="">Learn more about the proper handling procedures.</Link>
import { ExtensionContext } from "@microsoft/sp-extension-base";
export interface IClassificationHeaderProps {
context: ExtensionContext;
export interface IClassificationHeaderState {
isLoading: boolean;
businessImpact: string;
// change this value to whatever you want to use as the property bag value name
export const ClassificationPropertyBag: string = "sc_x005f_BusinessImpact";
// change this value to whatever you want the default classification you wish to use. "undefined" means no default.
export const DefaultClassification: string = undefined;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment