widgets

[meenow708]

Hi,

i was implementing the widget view tab palette here is the code. this code has no error but the App.tsx file showing out error.

import React from 'react';
import { UiItemsProvider, StagePanelLocation, StagePanelSection, AbstractWidgetProps, WidgetState} from "@itwin/appui-abstract";

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

public provideWidgets(_stageId: string, _stageUsage: string, location: StagePanelLocation, _section?: StagePanelSection): ReadonlyArray {
const widgets: AbstractWidgetProps[] = [];

if (_stageId === "DefaultFrontstage" && location === StagePanelLocation.Right) {
  
  const widget: AbstractWidgetProps = {
    id: "DashboardPaletteWidget",
    label: "Dashboard",
    defaultState: WidgetState.Open,
    getWidgetContent: () => {
      return (
        <iframe width="600" height="450" src="https://lookerstudio.google.com/embed/reporting/fa2d2181-b2b9-47b7-b33b-15be3691028e/page/P5epD" frameBorder="0" style={{ border: 0 }} allowFullScreen sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>
      );
    }
  };
  widgets.push(widget);
}

return widgets;

}
}

// Example usage:
const dashboardPaletteWidget: UiItemsProvider = new ViewDashboardPaletteWidget();

export default dashboardPaletteWidget;

this is where i want to add my tab.

Even i have used this code but it is not working:

import React from 'react';
import { UiItemsProvider, StagePanelLocation, StagePanelSection, Widget } from "@itwin/appui-abstract";

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

public provideWidgets(stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection): ReadonlyArray {
const widgets: Widget[] = [];

if (stageId === "DefaultFrontstage" && location === StagePanelLocation.Right) {
  
  const widget: Widget = {
    id: "DashboardPaletteWidget",
    label: "Dashboard",
    getWidgetContent: () => {
      return (
        <iframe width="600" height="450" src="https://lookerstudio.google.com/embed/reporting/fa2d2181-b2b9-47b7-b33b-15be3691028e/page/P5epD" frameBorder="0" style={{ border:   0 }} allowFullScreen sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>
      );
    }
  };
  widgets.push(widget);
}

return widgets;

}
}

// Example usage:
const dashboardPaletteWidget: UiItemsProvider = new ViewDashboardPaletteWidget();

export default dashboardPaletteWidget;

If someone has the solution to this please put the code below

[aruniverse]

Take a closer look at error, theres a type mismatch.
If you are using the <Viewer /> component v-ewer-react@4.x, the UiProviders need to implement the interface from @itwin/appui-react not @itwin/appui-abstract.