How to integrate a jQuery plugin with OutSystems? For example, a carousel?
Use a web block to encapsulate the code, style, and resources of the jQuery plugin.
- Download the plugin code, usually a zip archive with several files;
- Create a web block with the files in the archive;
- Add optional parameters to the web block to control the plugin;
- Include the web block in your web screens.
- If needed, assign CSS styles to the containers.
As an alternative, you could import the files as direct resources of your modules. But since the resources imported aren't visible to other modules, it's harder to share your widget.
The example below uses a web block to encapsulate a carousel with specific images, using the jQuery plugin carousel. The web block has:
- The CSS styles of the plugin;
- A set of images;
- HTML that references the images;
- An expression to activate the carousel.
The image shows the structure of the web block.
The image below shows the CSS styles of a carousel as the style sheet of the web block.
Finally, use an un-escaped expression at the end of the web block to start the jQuery code, based on an example from the carousel documentation.
To pass the 'id' attribute of the container to jQuery:
- On the container properties, name the container. In this example, we named the container 'carousel'.
name.Idto retrieve the id generated by OutSystems. In this example,
As an alternative, the carousel could be based on a unique CSS class instead of an id attribute.
However, the 'rcarousel' plugin uses jQuery. There are two alternatives to include jQuery:
- Include a reference to jQuery in the layout. jQuery will be loaded in all pages that use the layout.
- Create a jQuery web block, and include this block when rcarousel is used. Rcarousel can use the jQuery web block.
If you include third-party code in an eSpace, remember to check the license and copyright before you share your eSpace.
Sample eSpace with a jQuery rcarousell.
A continuous jQuery UI carousel by Wojciech Ryrych, with a simple example carousel without navigation.
Notes that IDs are automatically generated by OutSystems. Applications should use CSS classes for styling.