Using jQuery-UI Controls in IO Docs

Last updated:
1:16pm Feb 11, 2020
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

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:

Feedback (1)

What TIBCO product is this for?

Don Johnson 4:37pm Apr. 24, 2018