Custom widgets from the same 3-files about angular-dashboard-framework HOT 10 CLOSED

I'm not sure why you need a shared scope. If i get you right you would like to create a widget with a predefined configuration which is not editable, is this right?

I've implemented predefined configurations: 0e09b13a

Now you are able to register the waether widget with different configurations:

angular.module('yourmodule', ['sample.widgets.weather', 'adf.provider'])
  .config(function(dashboardProvider){
    var weatherWidget = dashboardProvider.widgets['weather'];
    var portoWeatherWidget = angular.copy(weatherWidget);
    // pass predefined config
    portoWeatherWidget.config = {location: 'porto'};
    portoWeatherWidget.title = 'Weather Porto';
    // disable edit mode
    portoWeatherWidget.edit = null;
    // register the new widget
    dashboardProvider.widget('weatherPorto', portoWeatherWidget);
  });

Note: The code above is not tested, so it could have some rough edges.

from angular-dashboard-framework.

The point of using a "dashboard framework" is so I can deliver this module and that anyone in my organization can use it in their own way. By making their look and feel, their dialog boxes, their buttons, etc. Without having to change the /src that I provide. Can your approach do this?

It's more or less like that.
Imagine that you have two N working teams on several different projects. So in one project I will Have a "Table widget" with some configurations (look and feel and some parameters) and in the other project I will have the same "Table widget" but with only one parameter that the user can customize.

And it isnt possible to maintain 3*files per each one. So my idea was that I have a way to register one Table A widget (with config object) and a Table B widget (with a different config object).

So if I click the add-widget dialog I'll have :
Table A (that lets me customize parameter x, y and z)
Table B (that lets me customize the parameter z)

I really just like to create versions of that widget.

A place where I (as a web-developer) can create versions of the widget so that the final user can choose from, without having to create more 3*files. It is really what I showed in the first post.

Was I clear?

Note: to test your code above I just need to create a angular.module('porto' ..) with that 2 dependencies and on sample.js inject that module? It's giving me injector error.

from angular-dashboard-framework.

I think that could be solved, if we provide a way to configure the edit mode of a widget. In that case you could provide a base widget, which defines the whole options in the edit mode and some ng-if statements to hide some of the options. Now you could define a widget which copies all properties of the base widget and sets some unchangeable options with config and hide those options with the editConfig. E.g:

angular.module('yourmodule', ['sample.widgets.weather', 'adf.provider'])
  .config(function(dashboardProvider){
    var weatherWidget = dashboardProvider.widgets['weather'];
    var portoWeatherWidget = angular.copy(weatherWidget);
    // pass predefined config
    portoWeatherWidget.config = {location: 'porto'};
    portoWeatherWidget.title = 'Weather Porto';
    // disable edit of location
    portoWeatherWidget.edit.config = {hideLocation: true};
    // register the new widget
    dashboardProvider.widget('weatherPorto', portoWeatherWidget);
  });

In the edit template you could write something like:

<form role="form">
  <div class="form-group" ng-if="!editConfig.hideLocation">
    <label for="location">Location</label>
    <input type="location" class="form-control" id="location" ng-model="config.location" placeholder="Enter location">
  </div>
</form>

from angular-dashboard-framework.

You are right there is a injection error with the code above. This is because the dashboardProvider does not expose the widgets at the moment. You could run the code by adding the following line on top of the this.widget method of the dashboardProvider:

    this.widgets = widgets;

If we found a working solution for the problem, we could create a nicer way for extending widgets (e.g. copyWidget method).

from angular-dashboard-framework.

Yes, now it works. Thanks.

But the real issue here is turning this dashboard into a real generic framework, where, without writing on /src, we can define the url template for add/edit widget.

So that I can add a widget from another form, developed by another team. They only need to know what method to use to add a widget.

<widget type="weather" config={...urledit:"/templates/edit_custom.html"} ...>

A way that I don't need to force them to use any template. Can you see the potencial here? It's really an essencial feature to enhance your work.

what do you think ?

from angular-dashboard-framework.

I think i understand what you mean. But i do not understand how you would provide different configurations for a widget. I think this must be done during the registration, but you've done this in the add widget dialog. Could you please explain exactly what a developer should do to register a widget with a different configuration in your case.

from angular-dashboard-framework.

What I'm saying is a /src without the template for the add-widget and edit-widget.

Imagine a design team working on a web app (nothing to do with a dashboard), and they want to implement a dashboard in a div. They have their own buttons, styles.. their own look and feel.

So they will use your framework, but only the methods, not the template for add or edit. They would like to work on html, like:

< adf-dashboard name="{{name}}" structure="4-8" adf-model="model" ng-cloak >
< widget type="weather" config="pass configurations here">
< adf-dashboard/>

Something that they could define a widget.

Or a method addwidget that they can call from the controller of the page (dashboard + another app).

A web-designer doesnt want to use fixed buttons, or fixed edit/add dialog. But its not mantainable to rewrite the source code.

Are you interested in developing this as a real reusable framework library?

from angular-dashboard-framework.

Sorry, but i need some time to think about it.

from angular-dashboard-framework.

Have you given thought on it?

It would be a really important feature to make it a generic framework.
Thnks

from angular-dashboard-framework.

I'm very sorry but this concept conflicts with initial idea of the dashboard. This dashboard is mainly build for SCM-Manager 2. The goal is that a plugin developer can register a new widget to the dashboardProvider and this widget is automatically available on each dashboard, without touching the the html directive. If you want this features you have to fork this repository and implement it by yourself.

from angular-dashboard-framework.