New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DaD user designer #121

Open
pofider opened this Issue Sep 28, 2015 · 8 comments

Comments

Projects
None yet
2 participants
@pofider
Contributor

pofider commented Sep 28, 2015

Implement client side component allowing to the non-developers to design simple reports. This component should be pluggable to any kind of frontend and produce jsreport compatible templates.

@pofider pofider added the enhancement label Sep 28, 2015

@pofider

This comment has been minimized.

Show comment
Hide comment
@pofider

pofider Oct 21, 2015

Contributor

The goal is to provide an easy to use end user report visual designer. Such a designer should be a standalone component producing jsreport compatible templates on the background. It is expected this component will be heavily integrated into the external applications thus it should be designed to support custom branding and extensions. Technically this should be the completely separate component with the brand new web stack using React and ES6.

The designer should produce design meta definition and along the real handlebars based jsreport template. It should always transform meta definition into the template every time the user changes the design.

The designer ui will consists of an designer pane, command bar and various widgets for designing tables, charts, images...

Designer Pane
We should probably use grid system for the report rather than pixel based absolute positioning. User should be able to drag and drop or re-size the widgets on the pane.

Widgets
Every widget should provide the following:

  • static html (icon) used on the command bar
  • html used on the design pane
  • handlebars template used for the real rendering
  • ui for filling the settings

Data Source
The integrator of the component should provide json based schema of the data source to the designer. The designer then uses the schema to build a visual tree component which will be used in widgets to define the data binding.

Basic data sources
The designer should later provide some direct data sources like sql, nosql...

Previewing
There will be several ways to invoke preview of the report and it is up to the integrator which one chooses.

  • preview based directly on the schema json
  • integrator completely takes the responsibility of previewing
  • integrator provides dynamic input data
  • integrator provides custom script loading data

Advanced editing
User should not be limited by the provided widgets and its capabilities. He should be able to alter directly the handlebars produced by the widget. In this case the designer warns the user that this widget will be transformed with no way back into the different widget type supporting html edits.

So this was just to provide the basic requirements and concepts. We should start with prototyping a designer pane with support for dad a resizing widgets.

Contributor

pofider commented Oct 21, 2015

The goal is to provide an easy to use end user report visual designer. Such a designer should be a standalone component producing jsreport compatible templates on the background. It is expected this component will be heavily integrated into the external applications thus it should be designed to support custom branding and extensions. Technically this should be the completely separate component with the brand new web stack using React and ES6.

The designer should produce design meta definition and along the real handlebars based jsreport template. It should always transform meta definition into the template every time the user changes the design.

The designer ui will consists of an designer pane, command bar and various widgets for designing tables, charts, images...

Designer Pane
We should probably use grid system for the report rather than pixel based absolute positioning. User should be able to drag and drop or re-size the widgets on the pane.

Widgets
Every widget should provide the following:

  • static html (icon) used on the command bar
  • html used on the design pane
  • handlebars template used for the real rendering
  • ui for filling the settings

Data Source
The integrator of the component should provide json based schema of the data source to the designer. The designer then uses the schema to build a visual tree component which will be used in widgets to define the data binding.

Basic data sources
The designer should later provide some direct data sources like sql, nosql...

Previewing
There will be several ways to invoke preview of the report and it is up to the integrator which one chooses.

  • preview based directly on the schema json
  • integrator completely takes the responsibility of previewing
  • integrator provides dynamic input data
  • integrator provides custom script loading data

Advanced editing
User should not be limited by the provided widgets and its capabilities. He should be able to alter directly the handlebars produced by the widget. In this case the designer warns the user that this widget will be transformed with no way back into the different widget type supporting html edits.

So this was just to provide the basic requirements and concepts. We should start with prototyping a designer pane with support for dad a resizing widgets.

@pofider

This comment has been minimized.

Show comment
Hide comment
@pofider

pofider Oct 23, 2015

Contributor

This could be an inspiration
https://github.com/rsamec/react-designer

Contributor

pofider commented Oct 23, 2015

This could be an inspiration
https://github.com/rsamec/react-designer

@bjrmatos

This comment has been minimized.

Show comment
Hide comment
@bjrmatos

bjrmatos Oct 24, 2015

Collaborator

great notes!

Designer Pane
We should probably use grid system for the report rather than pixel based absolute positioning. User should be able to drag and drop or re-size the widgets on the pane.

totally agree

another inspiration
https://github.com/ipselon/structor

Collaborator

bjrmatos commented Oct 24, 2015

great notes!

Designer Pane
We should probably use grid system for the report rather than pixel based absolute positioning. User should be able to drag and drop or re-size the widgets on the pane.

totally agree

another inspiration
https://github.com/ipselon/structor

@pofider

This comment has been minimized.

Show comment
Hide comment
@pofider

pofider Nov 3, 2015

Contributor

So I also found https://slides.com/ which is very nicely solving very similar problem, unfortunately not open sourced. After long searching I didn't find a reusable component that would fit our needs for drag and drop designer. It looks we will need to do this from the scratch.

I've also spend some time with extending my reactjs knowledge and also trying some prototyping with react-dnd however I still don't feel like and expert for such a react task. I don't want to screw its architecture just at the very start. This is probably just too big to learn react on it.

In other words, @bjrmatos , don't you want this to be your main task, along with other smaller ones? I believe you are way far in the react then I am and the best one for this.

Contributor

pofider commented Nov 3, 2015

So I also found https://slides.com/ which is very nicely solving very similar problem, unfortunately not open sourced. After long searching I didn't find a reusable component that would fit our needs for drag and drop designer. It looks we will need to do this from the scratch.

I've also spend some time with extending my reactjs knowledge and also trying some prototyping with react-dnd however I still don't feel like and expert for such a react task. I don't want to screw its architecture just at the very start. This is probably just too big to learn react on it.

In other words, @bjrmatos , don't you want this to be your main task, along with other smaller ones? I believe you are way far in the react then I am and the best one for this.

@bjrmatos

This comment has been minimized.

Show comment
Hide comment
@bjrmatos

bjrmatos Nov 3, 2015

Collaborator

yes! i can do this, just let me finish electron-html-to-pdf, i really want to close the idea of using electron as a rendering platform (god i wish i have more time)

can you create a repository under the jsreport org? or would you like me to do this in a repository under my account?

Collaborator

bjrmatos commented Nov 3, 2015

yes! i can do this, just let me finish electron-html-to-pdf, i really want to close the idea of using electron as a rendering platform (god i wish i have more time)

can you create a repository under the jsreport org? or would you like me to do this in a repository under my account?

@bjrmatos bjrmatos self-assigned this Nov 3, 2015

@pofider

This comment has been minimized.

Show comment
Hide comment
@pofider

pofider Nov 3, 2015

Contributor

Great. Take your time with electron-html-to-pdf. This will be anyway long term task, so there is no hurry.

You can use repository jsreport-designer.

Contributor

pofider commented Nov 3, 2015

Great. Take your time with electron-html-to-pdf. This will be anyway long term task, so there is no hurry.

You can use repository jsreport-designer.

@bjrmatos

This comment has been minimized.

Show comment
Hide comment
@bjrmatos

bjrmatos Dec 1, 2015

Collaborator

This video has inspired me, That UI designer looks very solid! https://youtu.be/PggnIYdaJFI

Collaborator

bjrmatos commented Dec 1, 2015

This video has inspired me, That UI designer looks very solid! https://youtu.be/PggnIYdaJFI

@pofider

This comment has been minimized.

Show comment
Hide comment
@pofider

pofider Jun 14, 2017

Contributor

Just linking here that we already fully work on the designer feature in the mentioned repository https://github.com/jsreport/jsreport-designer

Contributor

pofider commented Jun 14, 2017

Just linking here that we already fully work on the designer feature in the mentioned repository https://github.com/jsreport/jsreport-designer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment