Dynamic Document Web Editor

The DynamicDoc Web Editor (maybe you already have seen it here) completely builds upon the ScriptActions. Beside the JavaScript itself the ScriptActions are needed for the users possibilities to add new items into the document.

So all we need to add into our layout is the editor item itself with the additional images which we will use as buttons for our ScriptActions. For our example we defined also hover effects for the images and applied some styling (border, added a gradient) but basically the images are enough.

You may recognize that we defined a CSS class for the editor item - this will be needed to identify the editor for the ScriptActions - the same as in the examples before.

Now we will pick the three most common Dynamic Document Web Editor related ScriptActions from our script actions tab on the left-sided menu

The first action will simply add a richttext-frame to the editor. The second one is for adding DirectSmile ImageSets whose personalization can be edited directly inside the editor. Finally the third action will be needed to add an internal image - this means an image you've uploaded into the designer.

The final two actions which will not be used in this example are for external images, where you define an URL to link to an image you may have uploaded to another server, and the Set Rotation action which sets the rotation of the currenty selected item to a fixed value. This could be used to offer the option to reset the rotation - especially on touch devices this may become handy.

Now our layout tree should look like this (of course you may differ the colors or skip some unnecessary steps):

All we need to do now is to configure the three ScriptActions so they know what to do. In the figure below you will see the configuration of the "Add text" action - plenty of values to set but basically we will only need to select the CSS class of our editor item and maybe alter the default text value to something more context based.

The optional values can limit the users range of modifications. You may set maximum size values or completely "lock" the item in the editor - this will prevent any moving of the item. Finally there is also the option to disable the editing of the text item. These parameters could become handy in case you want to limit the layout - maybe when setting up a B2B campaign which will be used to create printed documents but need to fit some corporate identity.

The "Add internal image" action has one parameter which differs a little bit from the others: The ImageSelector. Here all you need to do is to drag & drop an image from your library to the drop zone.

The final product of this quiet simple example is this nice web based editor of printable DirectSmile documents: