How can i implement @itwin/tree-widget-react

[contactshahzadh1]

I am trying to implement tree-widget from https://www.npmjs.com/package/@itwin/tree-widget-react
However I am unable to attach the treewidget to the provideWidgets in UiItemsProvider

public provideWidgets(_stageId: string, _stageUsage: string, location: StagePanelLocation, _section?: StagePanelSection , IModelConnection?: IModelConnection): ReadonlyArray {
const widgets: Widget[] = [];
if (location === StagePanelLocation.Right) {

TreeWidget.initialize(IModelApp.localization);
widgets.push(
    createTreeWidget({
        trees: [
          // add a custom component
          { id: "my-tree-id", startIcon: <svg />, getLabel: () => "My Custom Tree", render: () => <>This is my custom tree.</> },
          // add the Models tree component delivered with the package
          {
            id: ModelsTreeComponent.id,
            getLabel: () => ModelsTreeComponent.getLabel(),
            render: () => (
                
              <ModelsTreeComponent
                // see "Creating schema context" section for example implementation
                getSchemaContext={IModelConnection}
                // see "Creating unified selection storage" section for example implementation
                selectionStorage={}
              />
            ),
          },
        ], 

})    
);

return widgets;
}
}

[contactshahzadh1]

@aruniverse any idea how this can be done ?

[aruniverse]

Hi @contactshahzadh1 ! We have a few questions for you so we can try better assist you.

• What version of @itwin/tree-widget-react are you using?
• If it's v3, have you looked at the usage instructions? Looks like you are trying to mix/match the old UiItemsProvider behavior the package previously used with their new api.
• Are you using the <Viewer /> component from @itwin/web-viewer-react or are you writing your own custom viewer?
• Did you see any warnings/errors in either the dev console or browser?

[contactshahzadh1]

Hi @aruniverse ,
I am using "@itwin/tree-widget-react": "^3.2.4"
Viewer i am using is from "@itwin/web-viewer-react"
I just want to use the default treewidget with the viewer,
I tried to do this:

widgets.push(
  {
    id: "TreeWidget",
    label: "TreeWidget",
    defaultState: WidgetState.Open,
    content: <TreeWidget />,
  }
);

But I am getting error:
'TreeWidget' cannot be used as a JSX component.
Its type 'typeof TreeWidget' is not a valid JSX element type.
Type 'typeof TreeWidget' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
Type 'TreeWidget' is missing the following properties from type 'Component<any, any, any>': context, setState, forceUpdate, render, and 3 more.ts(2786)

[aruniverse]

Please review what is mentioned in the usage instructions.
Here is a running example you can use for reference, https://github.com/iTwin/viewer/blob/master/packages/templates/cra-template-web-viewer/template/src/App.tsx#L179-L214

[contactshahzadh1]

@aruniverse,
Thanks, it works fine.