Now operations are auto generated and supports query params, path params and form params.

components/iot-plugins/iot-base-plugin/org.wso2.carbon.device.mgt.iot.ui/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/operation-bar.hbs

@@ -44,13 +44,20 @@
                                 <br>
                             </h4>
 
-                            <form action="{{@app.context}}/api/operations/{{../device.type}}/{{operation}}?deviceId={{../device.deviceIdentifier}}"
-                                  method="post" style="padding-bottom: 20px;">
-                                {{#each params}}
-                                    <input type="text" name="{{this}}" placeholder="{{this}}" class="form-control">
+                            <form action="{{@unit.params.backendApiUri}}{{params.0.uri}}" method="{{method}}" style="padding-bottom: 20px;" id="form-{{operation}}">
+                                {{#each params.0.pathParams}}
+                                    <input type="text" id="{{this}}" placeholder="{{this}}" class="form-control" data-param-type="path" />
                                     <br />
                                 {{/each}}
-                                <button id="btnSend" type="submit" class="btn btn-default">&nbsp;&nbsp;&nbsp;&nbsp;Send
+                                {{#each params.0.formParams}}
+                                    <input type="text" id="{{this}}" name="{{this}}" placeholder="{{this}}" class="form-control" data-param-type="form" />
+                                    <br />
+                                {{/each}}
+                                {{#each params.0.queryParams}}
+                                    <input type="text" id="{{this}}" placeholder="{{this}}" class="form-control" data-param-type="query" />
+                                    <br />
+                                {{/each}}
+                                <button id="btnSend" type="button" onclick="submitForm('form-{{operation}}')" class="btn btn-default">&nbsp;&nbsp;&nbsp;&nbsp;Send
                                                        to Device&nbsp;&nbsp;&nbsp;&nbsp;</button>
                                 <label id="lblSending" class="wr-input-label hidden"><i
                                         class="fw fw-lifecycle fw-spin fw-2x"></i> Sending..</label>
@@ -70,6 +77,27 @@
     </div>
 {{/if}}
 
+<div id="operation-response-template" style="display: none">
+    <div class="content">
+        <div class="row">
+            <div class="col-lg-5 col-md-6 col-centered">
+                <h3>
+                    <span class="fw-stack">
+                        <i class="fw fw-ring fw-stack-2x"></i>
+                        <i id="status-icon" class="fw fw-error fw-stack-1x"></i>
+                    </span>
+                    <br>
+                </h3>
+                <h4>
+                    <span id="title"></span>
+                    <br>
+                </h4>
+                <span id="description"></span>
+            </div>
+        </div>
+    </div>
+</div>
+
 {{#zone "bottomJs"}}
     {{js "js/operation-bar.js"}}
 {{/zone}}

components/iot-plugins/iot-base-plugin/org.wso2.carbon.device.mgt.iot.ui/src/main/resources/jaggeryapps/devicemgt/app/units/iot.unit.device.operation-bar/public/js/operation-bar.js

@@ -27,6 +27,70 @@ function operationSelect (selection) {
     showPopup();
 }
 
+function submitForm(formId) {
+    var form = $("#" + formId);
+    var uri = form.attr("action");
+    var uriencodedQueryStr = "";
+    var uriencodedFormStr = "";
+    var payload = {};
+    form.find("input").each(function () {
+        var input = $(this);
+        if (input.data("param-type") == "path") {
+            uri = uri.replace("{" + input.attr("id") + "}", input.val());
+        } else if (input.data("param-type") == "query") {
+            var prefix = (uriencodedQueryStr == "") ? "?" : "&";
+            uriencodedQueryStr += prefix + input.attr("id") + "=" + input.val();
+        } else if (input.data("param-type") == "form") {
+            var prefix = (uriencodedFormStr == "") ? "" : "&";
+            uriencodedFormStr += prefix + input.attr("id") + "=" + input.val();
+            //payload[input.attr("id")] = input.val();
+        }
+    });
+    uri += uriencodedQueryStr;
+    var httpMethod = form.attr("method").toUpperCase();
+    var contentType = form.attr("enctype");
+    console.log(payload);
+    if (contentType == undefined || contentType.isEmpty()) {
+        contentType = "application/x-www-form-urlencoded";
+        payload = uriencodedFormStr;
+    }
+    //setting responses callbacks
+    var defaultStatusClasses = "fw fw-stack-1x";
+    var content = $("#operation-response-template").find(".content");
+    var title = content.find("#title");
+    var statusIcon = content.find("#status-icon");
+    var description = content.find("#description");
+    var successCallBack = function (response) {
+        title.html("Response Received!");
+        statusIcon.attr("class", defaultStatusClasses + " fw-success");
+        description.html(response);
+        $(modalPopupContent).html(content.html());
+    };
+    var errorCallBack = function (response) {
+        console.log(response);
+        title.html("An Error Occurred!");
+        statusIcon.attr("class", defaultStatusClasses + " fw-error");
+        var reason = (response.responseText == "null")?response.statusText:response.responseText;
+        description.html(reason);
+        $(modalPopupContent).html(content.html());
+    };
+    //executing http request
+    if (httpMethod == "GET") {
+        invokerUtil.get(uri, successCallBack, errorCallBack, contentType);
+    } else if (httpMethod == "POST") {
+        invokerUtil.post(uri, payload, successCallBack, errorCallBack, contentType);
+    } else if (httpMethod == "PUT") {
+        invokerUtil.put(uri, payload, successCallBack, errorCallBack, contentType);
+    } else if (httpMethod == "DELETE") {
+        invokerUtil.get(uri, successCallBack, errorCallBack, contentType);
+    } else {
+        title.html("An Error Occurred!");
+        statusIcon.attr("class", defaultStatusClasses + " fw-error");
+        description.html("This operation requires http method: " + httpMethod + " which is not supported yet!");
+        $(modalPopupContent).html(content.html());
+    }
+}
+
 $(document).on('submit', 'form', function (e) {
     e.preventDefault();
     var postOperationRequest = $.ajax({