Base solution for your next web application
Open Closed

How to create Witget with user configurable parameters #10238

User avatar
0
mnetolicky created

Product info

  • Product version latest v10.2.0
  • Product type .net core + Angular

Question

I have following need/task. I want to create an Witget with user configurable parameters which are editable only in Edit mode of the Dashboard.

Here is the example: We will have entity Sensor. And OTM relation to received sensor values (Entity TimeSeriesData). This values should be shown as line chart. Because we will have multiple Sensors of different type I was planning to develop one Widget which will be possible to parametrize on User level. And this Widget will be placed multiple times on Dashboard. Always for different Sensor.

I mean that Widget will always show graph for TimeSeries for selected Sensor, but user can add multiple Widgets on Dashboard. Only difference will be that user select different property. This will cause actually different where clause in underlying SELECT.

I have looked on your example https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Developing-Angular-Customizable-Dashboard

I can see that you are using filter DateRangePicker. That’s I want to use also. So different timerange can be displayed for graphs. But I can not see how to achieve configurable property of the Widget which can be changed only in Edit mode of Dashboard. I need to click on Edit on dashboar and there I can change it. Alos in sample dashboards we can add each Widget only once. How this can be configured that there is not this limitation?

Can you please give me some guidance how to achieve it? Or maybe if you have some example it would be great.

Go to accepted answer
6 Answer(s)
  • User Avatar
    0
    musa.demir created

    Hi @mnetolicky

    Adding multiple widget on a single page is implemented you will be able to use it in next release.

    You can use widget filter by using abp event. It is the easiest way to implement it. For example on the demo you can check the following code part:

      ngOnInit(): void {
    this.subHelloWorldFilter();
  }  
  
  ngOnDestroy(): void {
    this.unSubHelloWorldFilter();
  }
  
  onNameChange = (name) => {
//do something
  }
  
  subHelloWorldFilter() {
    abp.event.on('app.dashboardFilters.helloFilter.onNameChange', this.onNameChange);
  }

  unSubHelloWorldFilter() {
    abp.event.off('app.dashboardFilters.helloFilter.onNameChange', this.onNameChange);
  }

    Zero manages dashboard pages, widgets, and filters that users can see according to its permissions. Loads widgets to correct position with the correct scale, etc... But doesn't care about the widget's work or what is its content. If you want to make a user-configurable widget you should implement it. For example, you can create a widget that has a setting button that opens a settings model. Users can click it to change the widget's configuration and save it. Then you can reload content on modal save with a new configuration. And you can also save it on the server. etc. It depends on what you need.

  • User Avatar
    0
    mnetolicky created

    Hello @musa.demir, thanks for answer. I want to clarify your statement "Adding multiple widget on a single page is implemented you will be able to use it in next release.". By "multiple widget" do you mean multiple same Widgets, correct? Because now I can add Widget only once. By Next release do you mean 10.3? Or other version?

    Thanks a lot, Michal

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Yes, it is "using same widget multiple times in a page". By next release, we mean 10.4.

    Thanks,

  • User Avatar
    0
    mnetolicky created

    Thanks a lot for information. And when is release date for 10.4? and when do you think that 10.4 RC will be available?

    Regards, M.

  • User Avatar
    0
    nadav created

    Hi @musa.demir

    Adding multiple widget on a single page is implemented you will be able to use it in next release.

    You can use widget filter by using abp event. It is the easiest way to implement it. For example on the demo you can check the following code part:

      ngOnInit(): void { 
    this.subHelloWorldFilter(); 
  }   
   
  ngOnDestroy(): void { 
    this.unSubHelloWorldFilter(); 
  } 
   
  onNameChange = (name) => { 
//do something 
  } 
   
  subHelloWorldFilter() { 
    abp.event.on('app.dashboardFilters.helloFilter.onNameChange', this.onNameChange); 
  } 
 
  unSubHelloWorldFilter() { 
    abp.event.off('app.dashboardFilters.helloFilter.onNameChange', this.onNameChange); 
  }

    Zero manages dashboard pages, widgets, and filters that users can see according to its permissions. Loads widgets to correct position with the correct scale, etc... But doesn't care about the widget's work or what is its content. If you want to make a user-configurable widget you should implement it. For example, you can create a widget that has a setting button that opens a settings model. Users can click it to change the widget's configuration and save it. Then you can reload content on modal save with a new configuration. And you can also save it on the server. etc. It depends on what you need.

    How can I save a widget config properties to server side and make it persistence?

  • User Avatar
    0
    nadav created

    How can I save a widget config properties to server side and make it persistence?

Assignee
No one
Labels
None yet