Office UI Fabric Persona z Skype for Business status integracijo v SPFx

Tokrat bi vam rad predstavil, kako enostavno lahko povežete nov Office UI Fabric React gradnik, imenovan Persona, s statusom iz Skype for Business (Lync).  Vse skupaj bi radi naredili v SharePoint Framework (SPFx) Web Partu.

Persona se uporablja za izris posamezne osebe v obliki njegove slike, njegovih podatkov ter prisotnosti oz statusa. Za namene pridobitve statusa iz Skype for Business klienta pa bomo uporabili kar Name.NameCtrl ActiveX komponento. Omenjena komponenta je bila spisana s strani Microsofta in deluje zgolj na brskalnikih Internet Explorer ker uporablja NPAPI, to pa je onemogočeno / nepodprto v Chrome brskalnikih od 1. septembra 2015 naprej.

Pa začnimo. Ker je Skype for Business status dinamičen podatek, ga moramo poriniti v State naše React komponente:

export interface IAddressBookState {
userPresences: {};
}

V konstruktorju naše React komponente je potrebno inicializirati NameCtrl ActiveX komponento in ji pripeti OnStatusChange event listener:

export default class AddressBook extends React.Component<IAddressBookProps, IAddressBookState> {
    private nameCtrl: AXO;

    constructor(props: IAddressBookProps) {
        super(props);

        this.state = {
          userPresences: {}
        };

        try {
            if ((window as any).ActiveXObject) {
                this.nameCtrl = new AXO("Name.NameCtrl");
            } else {
                this.nameCtrl = this.CreateNPApiOnWindowsPlugin("application/x-sharepoint-uc");
            }

            if (!this.nameCtrl) {
              return;
            }

            this.nameCtrl.OnStatusChange = this.OnLyncPresenceStatusChange.bind(this);
        }
        catch (ex) {
            console.log(ex);
        }
    }

    private CreateNPApiOnWindowsPlugin(b) {
        var c = null;
        try {
            c = document.getElementById(b);
            if (!Boolean(c) && this.IsNPAPIOnWinPluginInstalled(b)) {
                var a = document.createElement("object");
                a.id = b;
                a.type = b;
                a.width = "0";
                a.height = "0";
                a.style.setProperty("visibility", "hidden", "");
                document.body.appendChild(a);
                c = document.getElementById(b);
            }
        } catch (d) {
            c = null;
        }
        return c;
    }

    private IsNPAPIOnWinPluginInstalled(a) {
        return Boolean(navigator.mimeTypes) && navigator.mimeTypes[a];
    }
}

Uporabil sem AXO kot ActiveX component loader. Namestite ga lahko z naslednjim ukazom:

npm install --save axo

V render metodi moramo za vsako osebo poklicati GetStatus metodo iz ActiveX komponente z email parametrom in nato lahko osebo izrišemo s Persona Fabric UI komponento.

private onRenderItem(props: IPickerItemProps<IPersonaProps>):JSX.Element {
    if (!this.state.userPresences[props.item.tertiaryText]) {
        if (this.nameCtrl) {
            this.nameCtrl.GetStatus(props.item.tertiaryText, "user");
        }
    }

    return (
        <div className={ "ms-FocusZone ms-PickerPersona-container personaContainer_894c3072" }>
          <div className={ "ms-PickerItem-content itemContent_894c3072" }>
            <Persona
                { ...props.item }
                size={ PersonaSize.regular }
                presence={ this.state.userPresences[props.item.tertiaryText] }
                hidePersonaDetails={ false }
                onMouseOver={ (event) => { this.showLyncPresencePopup(props.item.tertiaryText, event.currentTarget); } }
                onMouseOut={ this.hideLyncPresencePopup.bind(this) }
            />
          </div>
        </div>);
}

Preostanek članka si lahko preberete na tej povezavi.