Scripting
Apps use JavaScript and CSS. Click 
to open Scripting, and then
if you want to move it to its own tab, or 
and 
to change the
edge Scripting is pinned to. You can also open Scripting by double-clicking any event in
Page Navigator.
Script is shown for the current canvas selection. Use the dropdowns or Page Navigator to select another control, or to change event. You only see events that apply to the selected control. In the dropdowns, bold names indicate that scripting is attached. You can attach script to control or Page events. Just type the code, save it, and it is then attached. Select Page and Global to see an App's main script.
CSS in Transtream Apps is documented separately, see CSS for an overview and some examples of changes you can make.
Importance of backups and source code control
On the Apps page you can duplicate Apps, and export their XML. If you are developing Apps, we recommend you follow a source code control and backup regime appropriate to your organization and development goals.
Scripting area key features
- Search and search & replace with Ctrl F,
and 
. See the next section for details. - Full access to jQuery. See the jQuery site for documentation. This is external.
- Color coding and formatting, and Intellisense.
- Real time syntax checking in the Alerts area.
- A CSS Editor that supports all current CSS web standards.
- An Outputs >_ tab showing any output returned by the script.
Control references - jQuery and classic Composer 6 styles
You can use two styles of control reference in script:
- jQuery with the $ selector. Hold Shift, and click a control
to get a jQuery wrapper reference, $() reference for it. This is the recommended method due to better cross-browser support and the added functionality jQuery
makes available. For example:
$("contentManager")
- Composer 6. Hold Ctrl, and click a control to get a control() reference. This is the
referencing syntax used in scripting with Shipment Server 6.x and 7.x versions of Composer. For example:
control("contentManager")
Intellisense
Designer has Intellisense for JavaScript and for element public properties. In script, insert a . (period character) to see that control's Intellisense options.
Search and Search & Replace
To search scripts, you have:
-
or Ctrl F to search within the current script, including options for regular expressions, case, and whole-word search.
- Ctrl F Ctrl F to search & replace, including one-by-one or all replacement. Ctrl F brings
up search. Whilst the search box is visible, pressing Ctrl F again adds the replace capability.
Click Replace for a single replacement. All replaces every occurrence in the current script only.
-
to search across all scripts on the page.
This gives you a search dialog. Click a result to go to that script. So if you need to do a search and replace across
all scripts, use
to identify the scripts, and then do a search and replace in each.
Note
searches within script only. So if you are looking for a control
and it is not referenced within script, it will not be found. Rather than scrolling through the names in the dropdown to find a control, it can be
simpler to search for it in Page Navigator. Selecting a control in Page Navigator also selects it in Scripting.