The Resources tab in a Library is where you store uploaded files. In theory you can upload any kind of file. But, the User Interface of Composer really only allows you to utilize only graphics files in a form.

 

Other file types commonly found in library resources are JavaScript (.js) and  Cascading Stylesheets (.css). Please refer to Library Advanced Features on how to utilize these in forms.

 

Other file types stored in the Resources tab are XML (for data definitions), XFA files, .zip files, backups and others. These are currently beyond the scope of this guide.

 

Custom CSS

Composer uses an abstracted stylesheet mechanism in order to allow styling of both HTML and PDF forms. For HTML forms, you can implement additional styling by directly specifying the CSS in the form definition to achieve effects not possible in Composer alone.

 

Note: CSS is rarely developed in isolation. It is usually specifically designed to add styling to a set of web pages that are structured in a particular way. This has two implications:

 

1.In order to use CSS effectively, you must understand the way that Composer generates HTML forms. The easiest way to do this is generally to open a Composer generated form in a browser that enables you to explore the HTML and CSS, such as Firebug (in Firefox), in Google Chrome or Web Inspector in Safari.
 

2.It is unlikely that importing an existing CSS file from, for example, your corporate web site, will have much value to be used directly in Composer forms (except in the most trivial of cases). It is more likely that you will extract certain elements from your existing CSS, restructure or refactor them, and then import the modified CSS into Composer.

 

Note: If you are going to be directly implementing CSS, you must not only understand CSS in general, but also be careful to test your CSS on multiple browsers and devices. The advantage of sticking with regular Composer styles is that we have done all the testing to ensure that changes work correctly in all browsers.

 

Custom JavaScript Libraries

Sometimes you may need to add custom JavaScript libraries to your project. This is an advanced topic, and we generally recommended that you add custom libraries with the help of Avoka professional services.

 

You can do this as follows:

 

•Write your JavaScript functions using a text editor, and save as a .js file, such as mycode.js.

•Drag the JavaScript Library widget from the palette to the Nuts and Bolts/JavaScript Libraries node.

•Specify a name.

•Click the browse button to upload and select your mycode.js file to be associated with this library.

 

You may now invoke functions in mycode.js using the following syntax:

 

library_name.function(a, b);

 

If you want two different versions of the library for PDF and HTML:

 

•Create two versions of the .js file. Ensure that each library has the same functions, with the same signatures, but with appropriate implementations.

•Create a JavaScript Library object for each .js file, but check the checkbox to specify it's used for only HTML or only PDF respectively.

•Override the Library Name property (which defaults to the Field Name by default) so that both Libraries have the same Library Name.
 

This way you will be able to use the same syntax to call functions, and it will automatically have the right version of the library in either the HTML or PDF forms.