Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<button onclick="OnButtonClick();">Click Me</button>
​
<div id="message-bus-form"></div>
<script type="text/x-kendo-template" id="message-bus-form-template">
    <p>To use the message bus, you must supply the endpoint URL and HTTP verb.</p>
    <div class="form-group">
        <label class="control-label col-xs-3" for="Url">API endpoint URL</label>
        <div class="col-xs-7">
            <input class="form-control" name="Url" type="text" value="#= Url #" required="required" />
            <span class="small">Where is the message going to be sent?</span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3" for="HttpVerb">HTTP verb</label>
        <div class="col-xs-7">
            <input name="HttpVerb" data-bind="value:HttpVerb" data-source="httpVerbsDataSource" data-value-field="verb" data-text-field="verb" data-role="dropdownlist" /><br/>
            <span class="small">How should the message be delivered?</span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3" for="QueueName">Custom queue name</label>
        <div class="col-xs-7">
            <input class="form-control" name="QueueName" type="text" value="# if (QueueName != null) {# #= QueueName # #}#" placeholder="optional" />
            <span class="small">[OPTIONAL] Name of SQS queue (case-sensitive), or leave blank to use standard queue.</span>
        </div>
    </div>
    <div class="window-footer">
        <button type="button" class="k-button">Close</button>
        <button type="button" class="k-primary k-button">Save changes</button>
    </div>
</script>
</body>
</html>
 
​
 
    var messageBusFormWindow = $("#message-bus-form")
        .kendoWindow({
            title: "Message Bus",
            modal: true,
            visible: false,
            resizable: false,
            scrollable: false,
            width: 500,
            actions: ["Close"],
            open: function () {
                kendo.init($("#message-bus-form"));
            }
        }).data("kendoWindow");
    var messageBusFormTemplate = kendo.template($("#message-bus-form-template").html());
​
    var httpVerbsDataSource = new kendo.data.DataSource({
        data: [
            { verb: "GET" },
            { verb: "POST" },
            { verb: "PUT" }
        ]
    });
​
    function OnButtonClick(e) {
        var dataItem = {
            Url: "abcdef",
            HttpVerb: "POST",
            QueueName: "name"
        };
​
        var windowContent = messageBusFormTemplate(dataItem);
        messageBusFormWindow.content(windowContent);
        messageBusFormWindow.center().open();
    }
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers