Custom JavaScript Functions

You can create, edit, and manage custom JavaScript functions in Arbortext Styler. There are two types:

• ALD Functions — custom JavaScript functions that can be included in ALD (print/PDF) output

You can reference the ALD function in a stylesheet source extension for an element context. This feature applies to stylesheets set up to use PTC ALD as the effective print engine.

Custom ALD functions are stored in PTC ALD templates and documents created from the stylesheet. They are grouped in their own namespace.

• HTML Functions — custom JavaScript functions that can be included in HTML File or chunked HTML output

You can reference an HTML function as the value of an attribute of an event-based HTML tag (such as onclick or onmouseover) defined for an element or context. The function is then output and called by the HTML tag in HTML output.

To create a custom ALD function in a stylesheet (or in a stylesheet module, if you want to group functions and share them with other stylesheets):

1. Make sure that your environment is set to use PTC ALD as the effective print engine. For more information, see Logic for Print/Preview Engine Selection.

2. Custom JavaScript functions for ALD output are held in ALD Function objects. Navigate to the ALD Functions list The ALD Functions list icon — an image of an italic f and a printer

The ALD Functions list icon — an image of an italic f and a printer

and click Insert > ALD Function an image of an italic f and a printer with a plus

3. Name the ALD Function object, for example jscript. Note the name appears in the Description tab for the object, for example _user.jscript()

If you rename an ALD Function object, the new name will not pass to references to the object. You must update the references manually.

4. Edit the function by clicking the Edit button in the lower window. You can also select an ALD Function object in the list and choose Edit ALD Function from the context menu. The ALD Source Editor window opens with some default code provided.

5. Enter your JavaScript code into the empty lines in the window. Auto-completion with a list of suggested function names is provided as you type.

6. Click File > Apply to save the code change.

You can also choose File > Apply and Close to save the change and close the Source Editor. The code from the Source Editor window appears in the lower window.

7. Add your own information about the object/function in the Comment tab, if required.

To reference the ALD function in a stylesheet extension with PTC ALD code:

1. Navigate to the Elements list The Elements list icon - the yellow element icon

and choose the context that will reference the function.

2. Choose Edit > Edit Context Source > ALD (or Edit Context Source > ALD from the context menu). The ALD Source Editor windows opens.

3. To reference the function, you can use the shortcut user.functionObject(), for example user.jscript().

You can copy this shortcut from the Description tab for the ALD Function object.

To create a custom HTML function in a stylesheet (or in a stylesheet module, if you want to group functions and share them with other stylesheets):

1. Custom JavaScript functions for HTML output are held in HTML Function objects. Navigate to the HTML Functions list The HTML Functions list icon — an image of an italic f

The HTML Functions list icon — an image of an italic f

and click Insert > HTML Function an image of an italic f and plus

2. Name the HTML Function object, for example jscript. Note the name appears in the Description tab for the object, for example jscript().

If you rename an HTML Function object, the new name will not pass to references to the object. You must update the references manually.

3. Edit the function by clicking the Edit button in the lower window. You can also select an HTML Function object in the list and choose Edit HTML Function from the context menu. The HTML JavaScript Editor window opens with some default code provided.

4. Enter your custom JavaScript code into the empty lines in the window. Auto-completion with a list of suggested function names is provided as you type.

If the selected function needs the current node to do work, edit the function call to pass the this object to the function as an argument. In this context, this is the node which executes the command. For example:

var thisNode = arguments[0];

5. Click File > Apply to save the code change.

You can also choose File > Apply and Close to save the change and close the HTML JavaScript Editor. The code from the HTML JavaScript Editor window appears in the lower window.

6. Add your own information about the object/function in the Comment tab, if required.

To reference the HTML function as the value of an attribute for an HTML tag:

1. Navigate to the Elements list The Elements list icon - the yellow element icon

and choose the element or context that will reference the function.

2. Navigate to the HTML tag category for the element or context.

3. Choose the HTML tag that will represent the element or context in HTML output from the HTML tag field.

4. In the Attributes field, click Add to open the Add HTML Attribute dialog box. Here you can set attributes and their values for the HTML tag.

5. Add the name of the attribute in the HTML attribute field. You can also select the attribute from the drop down list.

6. Select Function in the Value area and choose the required HTML function from the drop down list. The list displays the HTML Function objects available in the stylesheet.

7. Click OK to close the dialog box. The attribute and its value (the HTML function name, in quotes) are shown in the Attributes field.