Organize widgets by dragging the mouse

ProgramadorGeoprocessamento · ‎04-07-2017

Hello everyone!

I'm new to developing GIS applications, and with that, I'm using the appbuilder web, in version 2.2. My client asked me to develop a simple application that will serve as a reference for other more complex applications. Based on this, I was asked to customize the theme "Foldable Theme".

But one of the features that he asked me was to allow the widgets to be moved (dragged with the mouse), so that the user can organize the widgets on the screen as needed. Our apps will not have users with mobile devices.

I saw that this possibility exists with the themes "Launchpad Theme" and "Dart Theme", but I need to include this functionality in my custom theme based on "Foldable Theme". If anyone can give me some way to go, thank you.

Thank you!

PGis.

GilbertoMatos · ‎04-10-2017

Hello

I had to do the same. The only way I got it was by doing the following:

1) In your file "application folder \ themes \ Name of your Theme \ common.css", include the class below:

# Widget_name_in_config.json_panel
{
      Right: auto!
      Max-height: 400px! Important;
}

2) After that, you should open the widget.js file of your widget, and at the end of the startup () function, add the following line:

Var dnd = new Moveable (dom.byId (this.id + "_panel"));

You will need to add the following references:

Define
(
      [

         ...
         'Dojo / dnd / moveable'
         'Dojo / dom',
         'Dojo / on'
     ],
     Function (..., Moveable, dom, on)

Unfortunately I could not find a generic solution that works for all widgets, so you will need to make those changes for each widget you want to move on the screen.

Note: I had two problems after that. Resizing the widget has stopped working, and the minimize button puts the widget back to the top left.

[]s,
Gilberto.