Starts in:
2 DAYS
16 HRS
9 MIN
47 SEC
Starts in:
2 D
16 H
9 M
47 S
Open Closed

How can I create a new angular dashboard widget in abp.io. Documentation is only for Mvc. #858


User avatar
0
peter.ebdon@achorda.com created

I am using abp.io commercial which ahs 4 default widgets but there is no source code for these and no documentation I can find for how to add new ones.


5 Answer(s)
  • User Avatar
    0
    Mehmet created

    Hi

    We have used the chart.js library for widgets. The library is loaded lazy by ThemeSharedModule. You can subscribe to the chartJsLoaded$ stream to execute a callback when the library is loaded.

    See an example: https://support.abp.io/QA/Questions/382/How-to-use-Chartjs-in-angular

    You can use the chart.js widgets easily by following the its documentation.

  • User Avatar
    0
    peter.ebdon@achorda.com created

    Thanks Mehmet but my question is more about the abp side of things. So how do I correctly create the client-side and server-side for a widget so they pick up the filters? Source code for creating one of the commercial widgets would help but they are not available.

  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    Hi @peter.ebdon,

    There is nothing special in server-side for widgets if you are using Angular UI. You only need an API to get data for your widget.

    See Dynamic C# API Client Proxies documentation if you have any question about how to create an API for getting data.

  • User Avatar
    0
    Mehmet created

    I prepared a GitHub gist to share abp-error-rate-widget content with you: https://gist.github.com/mehmet-erim/9ed4cedff438a44c99b7405672626e74 I made minor changes for readability

    Please see the host-dashboard.component to learn how to use this widget. If you have removed the host-dashboard.component from your app, you can create an app-pro template via ABP CLI.

  • User Avatar
    0
    ServiceBot created
    Support Team Automatic process manager

    This question has been automatically marked as stale because it has not had recent activity.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 20, 2024, 13:06