How to integrate a jQuery plugin with OutSystems Platform? 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 eSpace. But since the resources imported are not visible to other eSpaces, it is harder to share your widget.
The example below uses a web block to encapsulate a carousel with specific images, using the jQuery plugin rcarousel. The web block has:
- The CSS styles of the plugin;
- A set of images;
- Some 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 rcarousel 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 rcarousel documentation.
To pass the 'id' attribute of the container to jQuery:
- On the container properties, name the container. In our example, the container is called 'carousel'.
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 needed. You can even have rcarousel 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.
- About resources
- How to use resources to include all sorts of files when publishing your eSpace.
- Display an expression
- How to compute an expression at runtime in a web screen.
- Un-escape expression contents
- Web Design implementation guidelines
- Notes that IDs are automatically generated by OutSystems Platform. Applications should use CSS classes for styling.