Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

How to include a jQuery plugin

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Question

    How to integrate a jQuery plugin with OutSystems? For example, a carousel?

    Answer

    Use a web block to encapsulate the code, style, and resources of the jQuery plugin.

    1. Download the plugin code, usually a zip archive with several files;
    2. Create a web block with the files in the archive;
    3. Add optional parameters to the web block to control the plugin;
    4. Add an un-escaped Expression to the web block to run JavaScript that activates the plugin;
    5. Include the web block in your web screens.
    6. 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 JavaScript of the plugin;
    • 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:

    1. On the container properties, name the container. In this example, we named the container 'carousel'.
    2. In JavaScript, use name.Id to retrieve the id generated by OutSystems. In this example, carousel.Id.

    As an alternative, the carousel could be based on a unique CSS class instead of an id attribute.

    image alt text

    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.

    The example below shows a web block importJquery with the contents of jQuery.js pasted as the Javascript of the block.

    image alt text

    If you include third-party code in an eSpace, remember to check the license and copyright before you share your eSpace.

    More information:

    eSpace

    Sample eSpace with a jQuery rcarousell.

    rcarousel

    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.

    • Was this article helpful?