ScriptActions Editor

Before you start to create & edit your own ScriptAction please be aware that you will need JavaScript-programming skills to successfully work with ScriptActions. Unfortunately this is something we cannot eliminate completely. In case you feel not comfortable with programming in JavaScript maybe you want to check out our already created ScriptActions where you may find something cool you want to download?

Figure 01: The ScriptAction editor window

To edit a ScriptAction, and after drag & drop in the tree, you simply need to select and right-click on it. In the contextmenu select the entry "Edit ScriptAction" as seen in fig. 02. After selecting to edit a new popup will open which contains the ScriptAction editor (see fig. 01). On the first glimpse this might be plenty of information but after reading this manual you will understand all of it.

Global Properties

The section "Global Properties" allows you to edit the general settings for your ScriptAction. You can edit the shown name and the hidden name inside the JavaScript. Also you can add a description which will allow other users to understand the function of this ScriptAction and define a groupname where the ScriptAction will be listed.

Finally you can add external links to other JavaScript files - eg node.js or other common JavaScript-frameworks. Generally we already deliver the jQuery-API-script (see jquery.com) to be available for your ScriptAction.

Figure 02: Contextmenu

JS Event Support

Figure 03: JS Events to be supported by your ScriptAction

The section "JS Event Supports" lets you limit the events on which one your script will react - mostly used will be "OnClick" but also there are many other supported events which may be of good usage for you.  

Parameter Groups

When working with others on the same campaign and/or the same ScriptActions it will be of advantage to organize your ScriptAction parameters. Thisfor we added the possibility to organize them in groups. In the section "Parameter Groups" you can create new groups with the green plus sign and when selecting a group change its name as seen in figure 04

Figure 04: Parameter Groups

Parameters

To be as dynamic as possible and to be able to re-use a ScriptActions we introduced the parameters. Each parameter will be available inside the JavaScript-code but configurable easily from the outside without any specific knowledge about JavaScript. See this section for examples.

Figure 05: ScriptAction parameter - the basic settings

Parametersettings

The basic settings of a parameter are easy to understand:
  • Name in Script - this will be the JavaScript variable name. Obviously this has to be a name without any special chars.
  • Display name - this will be the name shown in the DirectSmile CrossMedia designer.
  • Group - The optional group where this parameter will be listed in.
  • Description - an optional description of the parameter.
  • Is primary parameter - when checked the value of this parameter will be shown in the design tree.
  • Is parameter needed - this will make the parameter optional when unchecked.
  • Encoding - select an encoding to encode the value when writen to the HTML output. Currently supported are URL, HTML and Base64.

Parametertypes

There are several types of parameter you can choose from to better suit your scenario. Despite the basic types for input values (like text, numeric, checkbox, image and color) there are some more complex types:

Figure 06: Available parameter types
  • Select Target - This parameter will be able to select one of the defined CSS classes you've assigned to a layout item.
  • Page Selector - This will let you pick one of your campaign pages and deliver the URL inside your JavaScript.
  • Style Selector - This lets you select one of your defined CSS-styles.
  • DB Column - This parameter lets you select a column from your active database.
  • DataRelation Selector - This parameter will enable your ScriptAction to get the full access to a datarelation.
  • DataRelation Column - With this parameter you will be able to select a column from the datarelation.
  • SelectList - This parameter lets you define a predefined list to pick values from. Also supports multiple-selection.
    There are optional delimeter, prefix and postfix definable so you can also use string values for your select list.

The final usage of the parameters inside the JavaScript code can be seen in the section "Scripts" following this one right after. When you've setted up all your parameters in a nice way it may look like in the following figure when closing the editor.

Figure 07: Final view of the ScriptAction parameters.

This is the final view a normal user will see when working with ScriptActions. No need to know something about JavaScript programming. Just select and/or enter the values and the script will be rendered into the HTML output of your campaign page.

Scripts

The last section is the most important: Scripts. Here you will edit the JavaScript directly like in any other JavaScript editor. For a better programming there exists a syntax highlighting.

Figure 08: The JavaScript editor.

Inside the code you're creating you can directly reference your parameters you've defined before by using their ScriptName inside of two curly brackets - e.g. {{myParameter}}. When rendered to the final HTML output this syntax will be replaced by the configured value or if the parameter could not be found by an empty string.

Beside the parameters you've defined by your own there are also several global values which might be of advance for your ScriptAction:
  • {{ItemWidth}} - uses the defined width from the size menu in the top of the designer.
  • {{ItemHeight}} -uses the defined height from the size menu in the top of the designer.
  • {{DSMX_ROOT_URL}} - the root URL of your Crossmedia.
  • {{ItemID}} - the unique ID of your item.
  • {{ItemName}} - same as the {{ItemID}}.

Finally you can select one of three supported modes how your JavaScript will be rendered into the final HTML-output:

Figure 09: JavaScript modes
  • JS Function - this will be the function which will be called when the event occurs. E.g. if you choosen "onclick" then this function will be called when your items will be clicked.
  • OnLoad - this JavaScript will be placed inside jQuery $(document).ready() snippet. This is perfect for initiating JavaScript-frameworks.
  • Plain JS - if you want to create your own functions directly then this is the option you are looking for.

In case you are still unsure how to use the ScriptActions you might want to see the examples page where we have listed some basic examples on how to create ScriptActions: