Skip to content

Files

Latest commit

dlepowdlepow
updated ms.author metadata also
Sep 17, 2021
eca6f24 · Sep 17, 2021

History

History
77 lines (46 loc) · 3.17 KB

developer-portal-use-community-widgets.md

File metadata and controls

77 lines (46 loc) · 3.17 KB

title: Use community widgets in developer portal titleSuffix: Azure API Management description: Learn about community widgets for the API Management developer portal and how to inject and use them in your code. author: dlepow ms.author: danlep ms.date: 03/25/2021 ms.service: api-management ms.topic: how-to

Use community widgets in the developer portal

All developers place their community-contributed widgets in the /community/widgets/ folder of the API Management developer portal GitHub repository. Each has been accepted by the developer portal team. You can use the widgets by injecting them into your self-hosted version of the portal. The managed version of the developer portal doesn't currently support community widgets.

Note

The developer portal team thoroughly inspects contributed widgets and their dependencies. However, the team can’t guarantee it’s safe to load the widgets. Use your own judgment when deciding to use a widget contributed by the community. Refer to our widget contribution guidelines to learn about our preventive measures.

Inject and use external widgets

  1. Set up a local environment for the latest release of the developer portal.

  2. Go to the widget's folder in the /community/widgets directory. Read the widget's description in the readme.md file.

  3. Register the widget in the portal's modules:

    1. src/apim.design.module.ts - a module that registers design-time dependencies.

      import { WidgetNameDesignModule } from "../community/widgets/<widget-name>/widget.design.module";

...

    injector.bindModule(new WidgetNameDesignModule());

    2. src/apim.publish.module.ts - a module that registers publish-time dependencies.

      import { WidgetNamePublishModule } from "../community/widgets/<widget-name>/widget.publish.module";

...

    injector.bindModule(new WidgetNamePublishModule());

    3. src/apim.runtime.module.ts - a module that registers run-time dependencies.

      import { WidgetNameRuntimeModule } from "../community/widgets/<widget-name>/widget.runtime.module";

...

    injector.bindModule(new WidgetNameRuntimeModule());

  4. Check if the widget has an npm_dependencies file.

  5. If so, copy the commands from the file and run them in the repository's top directory.

    Doing so will install the widget's dependencies.

  6. Run npm start.

You can see the widget in the Community category in the widget selector.

:::image type="content" source="media/developer-portal-use-community-widgets/widget-selector.png" alt-text="Screenshot of widget selector":::

Next steps

Learn more about the developer portal: