How to use @bentley/ui-framework - 10 common examples

private async startRetrieveViews() {
    if (this.props.iModelInfo) {
      const projectInfo = this.props.iModelInfo.projectInfo;
      const iModelWsgId = this.props.iModelInfo.wsgId;

      // this.setState({ waitingForViews: true });
      this._iModelConnection = await UiFramework.iModelServices.openIModel(projectInfo.wsgId, iModelWsgId);
    } else if (this.props.iModelConnection) {
      this._iModelConnection = this.props.iModelConnection;
    } else {
      throw Error("IModelViewPicker: Either iModelInfo or iModelConnection must be passed as Props");
    }

    const viewQueryParams: ViewQueryParams = { wantPrivate: false };
    let viewProps: ViewDefinitionProps[] = [];
    try {
      viewProps = await this._iModelConnection.views.queryProps(viewQueryParams);
      this.setState({ views: viewProps, waitingForViews: false });
    } catch (e) {
      // tslint:disable-next-line:no-console
      console.log("error getting views", e);
    }
  }

private async startRetrieveIModels(project: ProjectInfo) {
    this.setState({
      prompt: "Fetching iModel information...",
      isLoadingiModels: true,
      isLoadingProjects: false,
      currentProject: project,
    });
    const iModelInfos: IModelInfo[] = await UiFramework.iModelServices.getIModels(project, 40, 0);
    // tslint:disable-next-line:no-console
    // console.log(JSON.stringify(iModelInfos));
    this.setState({
      isLoadingiModels: false,
      iModels: iModelInfos,
    });
  }

public static get openMessageBoxCommand() {
    const textNode = document.createTextNode("This is a box opened using IModelApp.notifications.openMessageBox and using promise/then to process result.");
    const message = document.createElement("div");
    message.appendChild(textNode);
    message.appendChild(this._longMessage);

    return new CommandItemDef({
      commandId: "openMessageBox",
      iconSpec: "icon-info",
      labelKey: "SampleApp:buttons.openMessageBox",
      execute: () => {
        // tslint:disable-next-line:no-floating-promises
        IModelApp.notifications.openMessageBox(MessageBoxType.Ok,
          message,
          MessageBoxIconType.Information)
          .then((value: MessageBoxValue) => { window.alert("Closing message box ... value is " + value); });
      },
    });
  }

constructor(props?: any, context?: any) {
    super(props, context);

    // TODO: registering categories is application specific, move this to Navigator source.
    IModelIndex.RegisterCategory(UiFramework.translate("iModelIndex.views"), this._renderSheets);
    IModelIndex.RegisterCategory(UiFramework.translate("iModelIndex.3dModels"), this._render3dModels);

    this.state = {
      currentCategory: 0, thumbnail: undefined, upToDate: false, header: undefined,
      versionName: "", versionUserName: "", versionDate: "", checkingUpToDate: false, showWaiting: false,
    };
  }

public componentWillUnmount() {
    // TODO: an application should not have to unregister categories/tabs.
    IModelIndex.UnregisterCategory(UiFramework.translate("iModelIndex.views"));
    IModelIndex.UnregisterCategory(UiFramework.translate("iModelIndex.3dModels"));
  }

// tslint:disable-next-line: variable-name
const ToolAssistance = withStatusFieldProps(ToolAssistanceField);
// tslint:disable-next-line: variable-name
const MessageCenter = withMessageCenterFieldProps(MessageCenterField);
// tslint:disable-next-line: variable-name
const SnapMode = withMessageCenterFieldProps(SnapModeField);
// tslint:disable-next-line: variable-name
const DisplayStyle = withStatusFieldProps(DisplayStyleField);
// tslint:disable-next-line: variable-name
const ActivityCenter = withStatusFieldProps(ActivityCenterField);
// tslint:disable-next-line: variable-name
const ViewAttributes = withStatusFieldProps(ViewAttributesStatusField);
// tslint:disable-next-line: variable-name
const Sections = withStatusFieldProps(SectionsStatusField);
// tslint:disable-next-line: variable-name
const SelectionInfo = withStatusFieldProps(SelectionInfoField);
// tslint:disable-next-line: variable-name
const SelectionScope = withStatusFieldProps(SelectionScopeField);
// tslint:disable-next-line: variable-name
const ClearEmphasis = withStatusFieldProps(ClearEmphasisStatusField);
// tslint:disable-next-line: variable-name
const TileLoadIndicator = withStatusFieldProps(TileLoadingIndicator);
// tslint:disable-next-line: variable-name
const FooterMode = withStatusFieldProps(FooterModeField);

export class AppStatusBarItemProvider {
  public static readonly id = "ui-test-app.AppStatusBarItemProvider";
  private _statusBarItems: ReadonlyArray | undefined = undefined;

  public get statusBarItems(): ReadonlyArray {
    if (!this._statusBarItems) {
      this._statusBarItems = [

StatusBarItem, StatusBarSection, StatusBarItemUtilities, withStatusFieldProps, withMessageCenterFieldProps,
  BooleanSyncUiListener, TileLoadingIndicator, FooterModeField,
} from "@bentley/ui-framework";
import { DisplayStyleField } from "../statusfields/DisplayStyleField";
import { SampleAppUiActionId, SampleAppIModelApp } from "../..";

// tslint:disable-next-line: variable-name
const ToolAssistance = withStatusFieldProps(ToolAssistanceField);
// tslint:disable-next-line: variable-name
const MessageCenter = withMessageCenterFieldProps(MessageCenterField);
// tslint:disable-next-line: variable-name
const SnapMode = withMessageCenterFieldProps(SnapModeField);
// tslint:disable-next-line: variable-name
const DisplayStyle = withStatusFieldProps(DisplayStyleField);
// tslint:disable-next-line: variable-name
const ActivityCenter = withStatusFieldProps(ActivityCenterField);
// tslint:disable-next-line: variable-name
const ViewAttributes = withStatusFieldProps(ViewAttributesStatusField);
// tslint:disable-next-line: variable-name
const Sections = withStatusFieldProps(SectionsStatusField);
// tslint:disable-next-line: variable-name
const SelectionInfo = withStatusFieldProps(SelectionInfoField);
// tslint:disable-next-line: variable-name
const SelectionScope = withStatusFieldProps(SelectionScopeField);
// tslint:disable-next-line: variable-name
const ClearEmphasis = withStatusFieldProps(ClearEmphasisStatusField);
// tslint:disable-next-line: variable-name
const TileLoadIndicator = withStatusFieldProps(TileLoadingIndicator);
// tslint:disable-next-line: variable-name
const FooterMode = withStatusFieldProps(FooterModeField);

export class AppStatusBarItemProvider {

// tslint:disable-next-line: variable-name
const SnapMode = withMessageCenterFieldProps(SnapModeField);
// tslint:disable-next-line: variable-name
const DisplayStyle = withStatusFieldProps(DisplayStyleField);
// tslint:disable-next-line: variable-name
const ActivityCenter = withStatusFieldProps(ActivityCenterField);
// tslint:disable-next-line: variable-name
const ViewAttributes = withStatusFieldProps(ViewAttributesStatusField);
// tslint:disable-next-line: variable-name
const Sections = withStatusFieldProps(SectionsStatusField);
// tslint:disable-next-line: variable-name
const SelectionInfo = withStatusFieldProps(SelectionInfoField);
// tslint:disable-next-line: variable-name
const SelectionScope = withStatusFieldProps(SelectionScopeField);
// tslint:disable-next-line: variable-name
const ClearEmphasis = withStatusFieldProps(ClearEmphasisStatusField);
// tslint:disable-next-line: variable-name
const TileLoadIndicator = withStatusFieldProps(TileLoadingIndicator);
// tslint:disable-next-line: variable-name
const FooterMode = withStatusFieldProps(FooterModeField);

export class AppStatusBarItemProvider {
  public static readonly id = "ui-test-app.AppStatusBarItemProvider";
  private _statusBarItems: ReadonlyArray | undefined = undefined;

  public get statusBarItems(): ReadonlyArray {
    if (!this._statusBarItems) {
      this._statusBarItems = [
        StatusBarItemUtilities.createStatusBarItem("ToolAssistance", StatusBarSection.Left, 10, ),
        StatusBarItemUtilities.createStatusBarItem("ToolAssistanceSeparator", StatusBarSection.Left, 15, (
            
        )),

ToolAssistanceField, ActivityCenterField, MessageCenterField,
  SnapModeField, StatusBarItem, StatusBarSection, StatusBarItemUtilities,
  withStatusFieldProps, withMessageCenterFieldProps, BooleanSyncUiListener, FooterModeField,
} from "@bentley/ui-framework";
import { SampleAppUiActionId, SampleAppIModelApp } from "../..";

// tslint:disable-next-line: variable-name
const ToolAssistance = withStatusFieldProps(ToolAssistanceField);
// tslint:disable-next-line: variable-name
const MessageCenter = withMessageCenterFieldProps(MessageCenterField);
// tslint:disable-next-line: variable-name
const SnapMode = withMessageCenterFieldProps(SnapModeField);
// tslint:disable-next-line: variable-name
const ActivityCenter = withStatusFieldProps(ActivityCenterField);
// tslint:disable-next-line: variable-name
const FooterMode = withStatusFieldProps(FooterModeField);

export class SmallStatusBarItemProvider {
  public static readonly id = "ui-test-app.SmallStatusBarItemProvider";
  private _statusBarItems: ReadonlyArray | undefined = undefined;

  public get statusBarItems(): ReadonlyArray {
    if (!this._statusBarItems) {
      this._statusBarItems = [
        StatusBarItemUtilities.createStatusBarItem("ToolAssistance", StatusBarSection.Left, 10, ),
        StatusBarItemUtilities.createStatusBarItem("ToolAssistanceSeparator", StatusBarSection.Left, 15, (
            
        )),

        StatusBarItemUtilities.createStatusBarItem("MessageCenter", StatusBarSection.Left, 20, ),
        StatusBarItemUtilities.createStatusBarItem("MessageCenterSeparator", StatusBarSection.Left, 25, (

CommandItemDef, ToolItemDef, WidgetState, FrontstageManager, ModalDialogManager, BaseItemState, ContentViewManager,
  SyncUiEventId, UiFramework, Backstage, BackstageItem, BackstageItemUtilities, StatusBarItemUtilities, StatusBarSection, withStatusFieldProps,
} from "@bentley/ui-framework";
import { SampleAppIModelApp } from "../";
import { Tool1 } from "../tools/Tool1";
import { Tool2 } from "../tools/Tool2";
import { ToolWithSettings } from "../tools/ToolWithSettings";
import { AnalysisAnimationTool } from "../tools/AnalysisAnimation";

// cSpell:ignore appui
import { TestMessageBox } from "../appui/dialogs/TestMessageBox";
import { AppUi } from "../appui/AppUi";
import { SampleStatusField } from "../appui/statusfields/SampleStatusField";

// tslint:disable-next-line: variable-name
const SampleStatus = withStatusFieldProps(SampleStatusField);

export class AppTools {
  public static getBackstageItems(): BackstageItem[] {
    return [
      BackstageItemUtilities.createActionItem("tool1:item1", 50, 50, () => { }, "Tool1 - Item1"),
    ];
  }
  private static _sampleStatusFieldId = "tool1:statusField1";

  public static get tool1() {
    return new ToolItemDef({
      toolId: Tool1.toolId,
      iconSpec: Tool1.iconSpec,
      label: () => Tool1.flyover,
      description: () => Tool1.description,
      execute: () => {