Dashboards & Visualizations

Submit button per panel in Simple XML

Motivator

Ist it possible to have one submit button per panel in a simple XML dashboard/form? I saw that it is not possible to have a <fieldset> element as a child of a <pane>. Am I doing something wrong?

Regards
Chris

Tags (3)
1 Solution

Champion

As @somesoni2 said, SimpleXML does not allow more than the one Submit button, the one on the top of a dashboard. You can work around this with Advanced XML (per the other link @digitalX shared), but Advanced XML is deprecated in Splunk 6.x.

I worked around this issue with some JavaScript extensions to my SimpleXML. I have shared the code and more details on my blog post here: https://blog.octoinsight.com/there-can-be-only-one-submit-button

The function in the post allows you to specify the panel name and how you want the button to appear. The gist of the code is below.

      // generate html button in parent element
      // id: id and name to use on the html button
      // label: label/span to apply to the button
      // parent: id of parent html element in which to place the button
      // append?: should append or prepend in parent list of children
      // submit?: should it be a submit button type or not
      // vertical?: is the button used in a vertical list of items
      generateButton = function(id, label, parent, append, submit, vertical) {

        var btn = document.createElement('button');
        var span;

        // apply id field
        if (typeof id !== 'undefined' && id.length > 0) {
          btn.id = id;
          btn.name = id;
        }

        // apply label
        if (typeof label !== 'undefined' && label.length > 0) {
          span = document.createElement('span');
          span.innerHTML = label;
          btn.appendChild(span);
        }

        // assign styling and insert if parent is set
        if (typeof parent !== 'undefined' && parent.length > 0) {
          var parentID = (parent[0] === '#' ? parent : '#' + parent);
          var p = $(parentID);

          if (p.length) {

            // set button in its place of the parent
            var t = p.find('.fieldset');
            if (t.length) {
              t = $(t[0]);
              if (!!append) {
                t.append(btn);
              } else {
                t.prepend(btn);
              }
            }
          }
        }

        // set button type classes and CSS
        if (!!submit) {
          btn.className = 'btn btn-primary';
        } else {
          btn.className = 'btn-info';
          btn.style.padding = "3px 12px";
          btn.style.borderRadius = "4px";
        }

        // set button CSS based on it being in a
        // vertical stack of items or not
        if (!!vertical) {
          btn.style.verticalAlign = 'middle';
          btn.style.margin = "5px 10px 5px 0px";
        } else {
          btn.style.verticalAlign = 'top';
          btn.style.marginTop = "21px";
          btn.style.marginRight = " 10px";
        }

        return $(btn);
      };

View solution in original post

Builder

It would be nice if it were possible to have multiple submit buttons per page in Simple XML.
Here is my scenario:
Global fieldset with filters for all charts and tables on the dashboard. Several of those charts and tables have additional filtering options, i.e. multiple input controls. Sometimes it only makes sense to rerun a panel's search when all its input controls have been configured by the user. This is especially true if the search is "expensive" and runs for a long time.

Champion

This is exactly the problem that made me get motivated to come up with my JS solution posted down below. @helge, you are more than welcome to take my code from our app. It is tested and certified for 6.x.

Champion

Also note there was a bug in 6.5.0 and 6.5.1 where the searchWhenChanged=false setting was ignored for input elements inside of panels. This rendered the cool submit buttons inside of a panel useless because the search were automatically running. Splunk fixed this bug in 6.5.2. My suggestion is you do not test core functionality of buttons on 6.5.0 or 6.5.1 so you don't run around in circles with this issue.

Champion

As @somesoni2 said, SimpleXML does not allow more than the one Submit button, the one on the top of a dashboard. You can work around this with Advanced XML (per the other link @digitalX shared), but Advanced XML is deprecated in Splunk 6.x.

I worked around this issue with some JavaScript extensions to my SimpleXML. I have shared the code and more details on my blog post here: https://blog.octoinsight.com/there-can-be-only-one-submit-button

The function in the post allows you to specify the panel name and how you want the button to appear. The gist of the code is below.

      // generate html button in parent element
      // id: id and name to use on the html button
      // label: label/span to apply to the button
      // parent: id of parent html element in which to place the button
      // append?: should append or prepend in parent list of children
      // submit?: should it be a submit button type or not
      // vertical?: is the button used in a vertical list of items
      generateButton = function(id, label, parent, append, submit, vertical) {

        var btn = document.createElement('button');
        var span;

        // apply id field
        if (typeof id !== 'undefined' && id.length > 0) {
          btn.id = id;
          btn.name = id;
        }

        // apply label
        if (typeof label !== 'undefined' && label.length > 0) {
          span = document.createElement('span');
          span.innerHTML = label;
          btn.appendChild(span);
        }

        // assign styling and insert if parent is set
        if (typeof parent !== 'undefined' && parent.length > 0) {
          var parentID = (parent[0] === '#' ? parent : '#' + parent);
          var p = $(parentID);

          if (p.length) {

            // set button in its place of the parent
            var t = p.find('.fieldset');
            if (t.length) {
              t = $(t[0]);
              if (!!append) {
                t.append(btn);
              } else {
                t.prepend(btn);
              }
            }
          }
        }

        // set button type classes and CSS
        if (!!submit) {
          btn.className = 'btn btn-primary';
        } else {
          btn.className = 'btn-info';
          btn.style.padding = "3px 12px";
          btn.style.borderRadius = "4px";
        }

        // set button CSS based on it being in a
        // vertical stack of items or not
        if (!!vertical) {
          btn.style.verticalAlign = 'middle';
          btn.style.margin = "5px 10px 5px 0px";
        } else {
          btn.style.verticalAlign = 'top';
          btn.style.marginTop = "21px";
          btn.style.marginRight = " 10px";
        }

        return $(btn);
      };

View solution in original post

Builder

Im facing similar issue and added the above js , but have not got any idea how to add it to a splunk panel . would also like to enable drill down on the custom button...

0 Karma

SplunkTrust
SplunkTrust

That is correct, you can't have a submit button inside a panel in simple xml. But you can have form inputs, so as a dirty workaround, you can configure your dashboard panels have a checkbox and use the checkbox token in your panel search. Users can uncheck/check the checkbox to re-run the search. Again, can't say enough it's a dirty work around

SplunkTrust
SplunkTrust

Out of curiosity, why have a local submit button for each panel rather than having 1 global submit button?

0 Karma

Explorer

have the same Problem. Have seen this Topic:
https://answers.splunk.com/answers/150393/form-input-add-submit-button-for-each-panel.html
But it looks a little complicated with the modules. I hope there is a simpler way to do this...

0 Karma