Introducing the all-new TIBCO Community site!

For current users, please click "Sign In" to reset your password and access the enhanced features. If you're a first-time visitor, we extend a warm welcome—click "Sign Up" to become a part of the TIBCO Community!

If you're seeking alternative community sites, explore ibi, Jaspersoft, and Spotfire.

Jump to content
  • Using jQuery-UI Controls in IO Docs


    Manoj Chaurasia

    Table of Contents

    IO Docs provides support for basic HTML controls such as input, text area, checkbox, and radio button. jQuery-UI cross-browser widgets can enhance the look-and-feel and usability of your interactive documentation. For example:

    jquery-ui.png.d492013b13537aea45b11c00802a6ae7.png

    Note: This document assumes your portal is branded using Blackbeard. The instructions can be modified slightly to work with Sparrow-based portals (see https://www.youtube.com/watch?v=-t-i4WYJEpQfor details).

    Step-by-step Procedure

    1. Create a sample API definition (no need to define any endpoints).
    2. Paste the following JSON to the new API's IO-Docs definition:

       {     "name": "jQuery UI Test",     "title": "jQuery UI Test",     "description": "Extending IO Docs with jQuery-UI Controls",     "version": "3",     "protocol": "rest",     "basePath": "",     "auth": {         "key": {             "param": "api_key",             "location": "query"         }     },     "resources": {         "Example Endpoint": {             "methods": {                 "exampleMethod": {                     "description": "",                     "httpMethod": "GET",                     "path": "",                     "parameters": {                         "sampleDate": {                             "type": "date",                             "description": "Sample date field in ISO-8601 format",                             "default": "",                             "required": true,                             "location": "query"                         },                         "sampleInteger": {                             "type": "integer",                             "description": "Whole numbers in the range of 1-20",                             "default": "",                             "required": true,                             "location": "query"                         },                         "anotherInteger": {                             "type": "integer",                             "description": "Whole numbers only",                             "default": "",                             "required": true,                             "location": "query"                         }                     }                 }             }         }     } }

    3. Under Manage > Portal > Portal Setup, add the following line to the Head JavaScript section (between the closing </script> tag and the opening <script> tag):

       </script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" media="all"> ... <script>

    4. Under Manage > Portal > Portal Setup, add the following code to the Body JavaScript section:

       window.addEventListener('portalAfterInit', function () {     // Load and initialize jQuery and jQuery-UI after the Main portal content renders     if (mashery.contentType === 'ioDocs') {         console.log("In IO-Docs");         m$.loadJS('https://code.jquery.com/jquery-1.12.4.js', function () {             console.log("jQuery loaded");             m$.loadJS('https://code.jquery.com/ui/1.12.1/jquery-ui.js', function () {                 console.log("jQuery-UI loaded");                 // add calendar control                 $('input[name="params[sampleDate]"]').datepicker({ dateFormat: 'yy-mm-dd' });                   // Add slider after integer field                 $('input[name="params[sampleInteger]"]').after('<div id="slider-range-max"></div>');                 $("#slider-range-max").slider( {                     range: "max",                     min: 1,                     max: 20,                     value: 1,                     slide: function( event, ui ) {                         $('input[name="params[sampleInteger]"]').val( ui.value );                     }                 });                 $('input[name="params[sampleInteger]"]').val($("#slider-range-max").slider( "value" ) );                   // Add spinner control                 var spinner = $('input[name="params[anotherInteger]"]').spinner();             });         });     } }, false);

    The results should look like this:

    jquery-ui_0.png.4be71715b5617c57f52e0e84a990c25c.png


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...