How to include jQuery Weblets in existing (Pre-SP1) WAMs and VLF WAMs

Date: 2 December 2011
Product/Release: LANSA for the Web (WAMs) V12 SP1 (From EPC871)
Abstract: jQuery Weblets (including the default RDMLX date Weblet) require additional steps to display correctly in existing WAMs. VLF WAMs also require additional steps to display correctly.
Submitted By: LANSA Technical Support

When using jQuery Weblets, a WAM must include the relevant jQuery CSS (Cascading Style Sheets) to display correctly. The new default layout Weblet and themes in V12 SP1 include the required CSS without any additional steps, but for existing WAMs, or WAMs using layouts created before SP1, additional steps are required

Furthermore, VLF WAMs (including those built in SP1) use the vlf_layout stylesheet by default, which includes it's own CSS and no obvious method for including the required theme CSS. Fortunately, with SP1 and External Resources, adding the required CSS files is now very easy.

For existing WAMs, or WAMs using a pre-SP1 layout weblet

Open the layout Weblet for your Webroutine and, select Manage External Resources under the Web menu. In the resulting dialog, select Add, and then include the jQuery UI Widgets and LANSA Theme Extensions from your desired theme:

External Resources

Note that by adding these CSS files, certain elements of your WAM may change in appearance. Messages Weblet will be themed, and you should make sure that the CSS does not conflict with any additional CSS you are using in your WAM.

jQuery Weblet appearance will depend on the jQuery theme you selected, so you might want to experiment to see which one fits your existing layout best, by adding and removing the CSS files in this dialog.


For VLF WAMs, the procedure is slightly different. VLF WAMs use the vlf_layout layout Weblet by default, and this should be replaced with the new vlf_layout_v2 layout Weblet (vlf_layout_v2 was specifically created to enable the use of jQuery UI Weblets).

This can be achieved by one of 2 methods:

  1. For new VLF WAMs, the DEFINE_COM statement can be modified as follows:
    Begin_Com Role(*EXTENDS #PRIM_WAM) Layoutweblet('vlf_layout_v2')
  2. For existing VLF WAMs, you can open the design view and simply drag & drop the vlf_layout_v2 from the repository onto your Webroutine

From there, you would add the relevant jQuery UI theme CSS as per regular WAMs, however this will be done in the WAM/Webroutine level, instead of in the layout Weblet (it is not recommended that you modify the shipped vlf_layout_v2 layout Weblet).