Client Design Mode walkthrough

Classic Servoy
1

Hi,

I’ve been using controller.setDesignMode but can’t find any info on how to persist the changes? servoyDeveloper.save() doesn’t seem to apply here since the solutionModel was not used?

2

Created issue SVY-2680 with a request to improve the documentation on saving changes made in Client Design Mode.

If saving changes is not possible then I will file a feature request to allow servoyDeveloper.save() to save these changes. That would enhance the usability very much.

3

Using Client Design Mode is easy. Saving the changes is less straight forward, but after understanding how it is meant to be used (which took me a while :wink:) I made a walkthrough:

http://www.visualfoxpro.com/client_design.aspx

Hope it’s useful.

4

Note that you can also specify an onDrag, onDrop, onSelect and onResize method when going to client design mode.

This allows you to save the user’s changes directly when dropping or resizing elements.

controller.setDesignMode(onDrag, onDrop, onSelect, onResize);
5

Yes, but even then you have to ‘redo’ the move first with the solutionModel if I am not mistaken?

6

Hi Omar,

Looking at your sample to use Client Design Mode I do not understand what __posArray is. What version of Servoy did you use? I can not make it work.

Thanks for the sample

7

Hi Juan,

Looking at that example code it seems Omar forgot to declare the __posArray variable or it is a global variable which he didn’t show in the screenshots.
Anyway, you can simply declare it at the top of code in the saveClientDesign method as an Array like so:

var __posArray = new Array();

Hope this helps.

8

That is correct, __posArray was defined as a global variable which I forgot to mention. Also note that currentController has been deprecated and can be replaced by application.getActiveWindow().controller. Originally this example was made in Servoy 6. I will test it under 7 and 8(alpha) and let you know if anything else needs to change to get it to work.

9

I opened the solution under Servoy 7 and resolved any deprecation errors/warnings. I also included support for changing and saving the width and height of the controls. For your convenience I exported the solution which you can download from http://www.intrasoft.nl/DesignModeExample.servoy . Note that the code is in globals.js and the OnSolutionOpen method is attached to the projects onOpen event (click the project and look in the properties sheet). Also make sure that the controls you want to move around have the name property filled!! Documentation of the setDesignMode method is here: https://wiki.servoy.com/display/DOCS/Client+Design+Mode . The included form makes use of the Servoy sample data but if you did not install that then delete the form and create your own, the solution will work with any form you create in the project.

This is what the result will be like: http://youtu.be/Oki9HTmfeHI?hd=1