can't show properties in custom propertygridwidgt when selected element

[guanhuaming]

when I selected an element, why the propertygridwidgt can't show the element's properties？
Some relevant code is as follows， thanks：

1. some code in FrontstageIntroductionApp.tsx:

import { Viewer, ViewerFrontstage } from "@itwin/desktop-viewer-react";
import { IModelConnection } from "@itwin/core-frontend";

import { mapLayerOptions } from "../../common/MaplayerOptions";
import { ViewSetup } from "../../common/ViewSetup";
import { FrontstageSwapperToolbarProvider } from "../../FrontstageSwapperToolbarProvider";
import {
  FrontstageReadyEventArgs,
  StandardContentToolsProvider,
  StandardFrontstageProvider,
  StandardNavigationToolsProvider,
  StandardStatusbarItemsProvider,
  UiFramework
} from "@itwin/appui-react";
import { PropertyGridManager } from "@itwin/property-grid-react";

import { InstructionsFrontstageProps } from "../../frontstages/InstructionsFrontstage";
import { ModalWithMessage } from "../../ModalWithMessage";
import { DefaultFrontstageProps } from "../../frontstages/DefaultFrontstage";
import { TwoViewportsFrontstageProps } from "../../frontstages/TwoViewportsFrontstage";
import { ViewAttributesFrontstageProps } from "../../frontstages/ViewAttributesFrontstage";
import { ViewAttributesWidgetProvider } from "../../view-attributes/ViewAttributesWidget";
import { PropertyGridWidgetProvider } from "../PropertyGridWidget";

import { viewerRpcs } from "../../common/rpcs";
import { AppWrapper } from "./style";

const uiProviders = [
  // The toolbar that allows switching between different frontstages. Present on every frontstage.
  new FrontstageSwapperToolbarProvider(),
  new ViewAttributesWidgetProvider(),
  new PropertyGridWidgetProvider(),
];

const _onIModelAppInit = async () => {
  /** Provides a set of standard tools for Content (in the top left corner) */
  StandardContentToolsProvider.register("sandbox:defaultContentTools", {
    horizontal: {
      clearSelection: true,
      clearDisplayOverrides: true,
      hide: "group",
      isolate: "group",
      emphasize: "element",
    },
  }, (stageId: string, _stageUsage: string, _applicationData: any) => {
    return stageId === "sandbox:default-frontstage";
  });

  /** Provides standard tools for Navigation (in the top right corner) */
  StandardNavigationToolsProvider.register("sandbox:defaultNavigationTools", undefined, (stageId: string, _stageUsage: string, _applicationData: any) => {
    return stageId === "sandbox:default-frontstage";
  });

  /** Provides standard status fields to Statusbar (at the bottom of the Viewer) */
  StandardStatusbarItemsProvider.register("sandbox:defaultStatusFields", undefined, (stageId: string, _stageUsage: string, _applicationData: any) => {
    return stageId === "sandbox:default-frontstage";
  });
};

const ViewportFrontstageApp = () => {
  return (
    <AppWrapper>
      <Viewer
        clientId={""}
        rpcInterfaces={viewerRpcs}
        filePath={"G:\\imodels\\Baytown.bim"}
        viewportOptions={viewportOptions}
        mapLayerOptions={mapLayerOptions}
        frontstages={frontstages}
        uiProviders={uiProviders}
        onIModelAppInit={_onIModelAppInit}
        onIModelConnected={_onIModelConnection} 
        enablePerformanceMonitors={false}
        theme={process.env.THEME ?? "dark"}
      />
    </AppWrapper>
  );
};

2. PropertyGridWidgetProvider code:

import React from "react";
import { IModelConnection, IModelApp } from "@itwin/core-frontend";
import { IconSpecUtilities } from "@itwin/appui-abstract";
import {
    CommandItemDef,
    GroupItemDef,
    StagePanelLocation,
    StagePanelSection,
    ToolbarHelper,
    ToolbarItem,
    ToolbarOrientation,
    ToolbarUsage,
    UiFramework,
    UiItemsProvider,
    Widget,
    WidgetState
  } from "@itwin/appui-react";

import { useDisposable } from "@itwin/core-react";
import { VirtualizedPropertyGridWithDataProvider, usePropertyData, usePropertyGridModel, usePropertyGridEventHandler, PropertyGridModelSource, MutableGridItemFactory } from "@itwin/components-react";
import { PresentationPropertyDataProvider, usePropertyDataProviderWithUnifiedSelection, DEFAULT_PROPERTY_GRID_RULESET } from "@itwin/presentation-components";

export class PropertyGridWidgetProvider implements UiItemsProvider {
    public readonly id: string = "PropertyGridWidgetProvider";

    public static activeIModel?: IModelConnection;

    public provideWidgets(stageId: string, _stageUsage: string, location: StagePanelLocation, _section?: StagePanelSection): ReadonlyArray<Widget> {
        const widgets: Widget[] = [];
        if (location === StagePanelLocation.Right) {
            const iModel = IModelApp.viewManager.selectedView?.iModel;
            widgets.push({
                id: "Properties",
                label: "Property Grid",
                icon: IconSpecUtilities.createWebComponentIconSpec("help-circular.svg"), /////
                defaultState: WidgetState.Open,
                content: iModel ? <PropertyGridWidget imodel={iModel} /> : null
            });
        }
        return widgets;
    }
}

function PropertyGridWidget({ imodel }: { imodel: IModelConnection }) {
    const dataProvider = useDisposable(React.useCallback(() => {
        const provider = new PresentationPropertyDataProvider({ imodel, ruleset: DEFAULT_PROPERTY_GRID_RULESET });
        provider.isNestedPropertyCategoryGroupingEnabled = true;
        return provider;
    }, [imodel]));

    const MAX_ELEMENTS = 10;
    const { isOverLimit, numSelectedElements } = usePropertyDataProviderWithUnifiedSelection({ 
        dataProvider, 
        requestedContentInstancesLimit: MAX_ELEMENTS,
    });
    if (numSelectedElements === 0)
        return <>Select an element to see its properties</>;

    if (isOverLimit)
        return <>Selected more than allowed maximum of {MAX_ELEMENTS} elements</>;

    return (
        <VirtualizedPropertyGridWithDataProvider
            width={400}
            height={800}
            dataProvider={dataProvider}
        />
    );
}

[grigasp]

Looks fine to me. Can you reproduce the problem in a sanbox? BTW, please also post versions of your @itwin dependencies.

[guanhuaming]

Looks fine to me. Can you reproduce the problem in a sanbox? BTW, please also post versions of your @itwin dependencies.

thanks gripasp's reply. @iTwin version is 4.0.6。 the package.json is as follows， thanks:

{
  "name": "desktop-viewer",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts --max_old_space_size=4096 start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts --max_old_space_size=4096 test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "@bentley/icons-generic-webfont": "^1.0.34",
    "@bentley/react-scripts": "^5.0.4",
    "@itwin/appui-abstract": "^4.0.6",
    "@itwin/appui-layout-react": "^4.3.0",
    "@itwin/appui-react": "^4.3.0",
    "@itwin/build-tools": "^4.0.6",
    "@itwin/components-react": "^4.3.0",
    "@itwin/core-backend": "^4.0.6",
    "@itwin/core-bentley": "^4.0.6",
    "@itwin/core-common": "^4.0.6",
    "@itwin/core-electron": "^4.0.6",
    "@itwin/core-frontend": "^4.0.6",
    "@itwin/core-geometry": "^4.0.6",
    "@itwin/core-i18n": "^4.0.6",
    "@itwin/core-markup": "^4.0.6",
    "@itwin/core-orbitgt": "^4.0.6",
    "@itwin/core-quantity": "^4.0.6",
    "@itwin/core-react": "^4.3.0",
    "@itwin/core-telemetry": "^4.0.6",
    "@itwin/desktop-viewer-react": "^4.1.0",
    "@itwin/ecschema-metadata": "^4.0.6",
    "@itwin/electron-authorization": "^0.14.1",
    "@itwin/express-server": "^4.0.6",
    "@itwin/imodel-browser-react": "^1.0.0",
    "@itwin/imodel-components-react": "^4.3.0",
    "@itwin/imodels-access-backend": "^4.0.3",
    "@itwin/imodels-access-frontend": "^4.0.3",
    "@itwin/itwinui-css": "^1.11.5",
    "@itwin/itwinui-icons-react": "^2.4.0",
    "@itwin/itwinui-react": "^2.11.10",
    "@itwin/itwinui-variables": "^2.0.0",
    "@itwin/measure-tools-react": "^0.12.2",
    "@itwin/presentation-backend": "^4.0.6",
    "@itwin/presentation-common": "^4.0.6",
    "@itwin/presentation-components": "^4.0.1",
    "@itwin/presentation-frontend": "^4.0.6",
    "@itwin/property-grid-react": "^0.11.0",
    "@itwin/tree-widget-react": "^1.0.0-dev.1",
    "@itwin/web-viewer-react": "^4.1.1",
    "@itwin/webgl-compatibility": "^4.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^7.2.9",
    "react-router": "^6.14.2",
    "react-router-dom": "^6.14.2",
    "redux": "^4.2.1",
    "start": "^5.1.0"
  },
  "devDependencies": {
    "@types/node": "^18.17.1",
    "@types/react": "^18.2.16",
    "@types/react-dom": "^18.2.7",
    "@types/react-redux": "^7.1.25",
    "styled-components": "^6.0.5",
    "typescript": "~5.0.2"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    "last 4 Chrome version"
  ]
}

[grigasp]

Thanks, the config seems fine too. What about reproducing the problem in a sandbox?

[aruniverse]

Please try

"@itwin/property-grid-react": "^1.0.0",

[grigasp]

The usePropertyDataProviderWithUnifiedSelection hook that you use listens to unified selection changes to know whose properties to show. Since the property grid is set up correctly, I guess the problem could be that it doesn't get those event notifications. Assuming that you select the element in a viewport component, it should be configured to notify unified selection manager about selection changes. I see the DefaultContentGroupProvider in viewer-react sets up the viewport correctly. Are you using this provider for your viewport or something else?

[guanhuaming]

After I comment out the props (frontstages={frontstages}) in the Viewer component,
properties are shown in custom property gridwidgt when selected element.
Can't the props frontstages and uiProviders be used at the same time?

[aruniverse]

would you be able to share a link to a (private) github repo with your code? would be much easier to read and digest your code outside of these code blocks

[guanhuaming]

Thanks for the reminder。I built a private github repo with my study code, here is the link:
https://github.com/guanhuaming/itwinfrontstage
@aruniverse @grigasp

[grigasp]

Thanks, this is very helpful. Every frontstage definition under /src/frontstages specifies a ContentGroupProvider and every provider uses the IModelViewportControl component as the content control. This component is not hooked into unified selection system.

What you need to do is basically copy this component and use it instead of IModelViewportControl in your content group providers.

[aruniverse]

The latest version of the iTwin Viewer pkg now exports the UnifiedSelectionViewportControl for you to use

[guanhuaming]

Thanks, this is very helpful. Every frontstage definition under /src/frontstages specifies a ContentGroupProvider and every provider uses the IModelViewportControl component as the content control. This component is not hooked into unified selection system.

What you need to do is basically copy this component and use it instead of IModelViewportControl in your content group providers.

Thank you. Following your guidance, I have resolved this issue. Everything is working fine now.