All Apps and Add-ons

Is there a way to use a Pulldown/dropdown in a view to call another view?

kragel
Path Finder

I'd like to do something where I have a Pulldown/dropdown in panel_row_1_col1 and based on the selection I open another view in panel_row2_col1. I don't want to have all the code in one view. Is that possible? Or if there is another way to basically accomplish the same thing let me know. Here's what I have so far. I don't need to pass any $foo$ tokens, just open up the view in row2. I want to execute the switch to the view in row2 when they choose an option. Thanks.

UPDATED XML:

<view autoCancelInterval="90" isSticky="False" isVisible="true" onunloadCancelJobs="true" template="dashboard.html">
  <label>SEARCH EMAIL</label>
  <module name="AccountBar" layoutPanel="appHeader" />
  <module name="SideviewUtils" layoutPanel="appHeader" />
  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="maxSize">2</param>
    <param name="clearOnJobDispatch">False</param>
  </module>
  <module name="Pulldown" layoutPanel="panel_row1_col1">
    <param name="name">search_type</param>
    <param name="staticOptions">
      <list>
        <param name="label">Select...</param>
        <param name="value"></param>
      </list>
      <list>
        <param name="label">Inbound TO:</param>
        <param name="value">inbound_to_test</param>
      </list>
      <list>
       <param name="label">Inbound FROM:</param>
       <param name="value">inbound_from</param>
     </list>
     <list>
       <param name="label">Outbound TO:</param>
       <param name="value">outbound_to</param>
     </list>
   </param>
   <param name="label">Select the type of email search you want to execute</param>

   <module name="Redirector" layoutPanel="panel_row2_col1">
     <param name="url">$search_type$</param>
     <param name="target">targetFrame</param>
   </module>
  </module>
  <module name="HTML" layoutPanel="panel_row2_col1">
    <param name="html"><![CDATA[<iframe id="targetFrame" name="targetFrame" src="$search_type$" height="1000px" width="100%" style="border:0px;"></iframe>]]></param>
  </module>
</view>

inbound_to_test:

<view autoCancelInterval="90" isVisible="true" onunloadCancelJobs="true" refresh="-1" template="dashboard.html">
  <module name="SideviewUtils" layoutPanel="appHeader" />
  <module name="URLLoader" layoutPanel="resultsAreaLeft" autorun="True">
    <module name="HTML" layoutPanel="panel_row1_col1">
       <param name="html"><![CDATA[<h2>Successfully called view inbound_TO_test!.</h2>]]></param>
    </module>
  </module>
</view>
1 Solution

sideview
SplunkTrust
SplunkTrust

Certainly. You can do it with relatively easy configuration and no custom code to worry about.

Here's the XML for the first view.

<module name="TimeRangePicker" layoutPanel="panel_row1_col1" autoRun="True">
  <param name="default">Last 4 hours</param>

  <module name="Search">
    <param name="search">index=_internal source="*metrics.log" group="per_sourcetype_thruput" | dedup series | sort series | fields series</param>

    <module name="CheckboxPulldown">
      <param name="name">sourcetype</param>
      <param name="label">Sourcetype</param>
      <param name="template">series="$value$"</param>
      <param name="valueField">series</param>

      <module name="Button">
        <param name="allowSoftSubmit">True</param>

        <module name="Redirector">
          <param name="url">iframe_view</param>
          <param name="target">targetFrame</param>
          <param name="arg.sourcetype">$sourcetype$</param>
          <param name="arg.earliest">$search.timeRange.earliest$</param>
          <param name="arg.latest">$search.timeRange.latest$</param>
        </module>
      </module>

    </module>
  </module>
</module>

<module name="HTML" layoutPanel="panel_row1_col2">
  <param name="html"><![CDATA[
    <iframe id="targetFrame" name="targetFrame" src="iframe_view?" height="1000px" width="100%" style="border:0px;"></iframe>
  ]]></param>
</module>

and here's the XML for the view that will be embedded inside the iframe. (here i called it "iframe_view.xml")

<module name="URLLoader" layoutPanel="resultsAreaLeft" autoRun="True">

  <module name="Search">
    <param name="search">index=_internal source="*metrics.log" group="per_sourcetype_thruput" $sourcetype$ | stats avg(eps) by series </param>

    <module name="HTML">
      <param name="html"><![CDATA[
      <h3>Showing average eps $search.timeRange.label$</h1>
      ]]></param>
    </module>

    <module name="Pager">
      <module name="Table" />
    </module>

  </module>
</module>

For the most part it's just the Sideview modules all doing their jobs, ie Redirector and URLLoader have no idea there's an iframe involved but their normal thing works just fine here.

Note: the HTML module creating the iframe on the page doesn't have to be nested downstream from the other modules. Instead we use the "target" param on Redirector and the "name" and "id" attributes on our iframe tag.

Also note that the target view has no chrome, and the required SideviewUtils module is rendered into the viewHeader panel. It turns out that if you keep it in appHeader as is more common, SplunkWeb renders a big black bar there which we of course dont want or need.

You shouldn't have any problem with this configuration, and in fact you can turn on "keepURLUpdated" on the URLLoader and thus get full back button, forward button and history and passive permalinking support, no matter how complex of a form you've created.

You could also in theory split the form across both views, but if you go that direction just realize that any $foo$ tokens you need to make it across will have to be passed in explicitly via an arg.* param on that Redirector.

I'll add these two example views to the Sideview Utils app and write up a simple intro for them in the docs.

View solution in original post

sideview
SplunkTrust
SplunkTrust

Certainly. You can do it with relatively easy configuration and no custom code to worry about.

Here's the XML for the first view.

<module name="TimeRangePicker" layoutPanel="panel_row1_col1" autoRun="True">
  <param name="default">Last 4 hours</param>

  <module name="Search">
    <param name="search">index=_internal source="*metrics.log" group="per_sourcetype_thruput" | dedup series | sort series | fields series</param>

    <module name="CheckboxPulldown">
      <param name="name">sourcetype</param>
      <param name="label">Sourcetype</param>
      <param name="template">series="$value$"</param>
      <param name="valueField">series</param>

      <module name="Button">
        <param name="allowSoftSubmit">True</param>

        <module name="Redirector">
          <param name="url">iframe_view</param>
          <param name="target">targetFrame</param>
          <param name="arg.sourcetype">$sourcetype$</param>
          <param name="arg.earliest">$search.timeRange.earliest$</param>
          <param name="arg.latest">$search.timeRange.latest$</param>
        </module>
      </module>

    </module>
  </module>
</module>

<module name="HTML" layoutPanel="panel_row1_col2">
  <param name="html"><![CDATA[
    <iframe id="targetFrame" name="targetFrame" src="iframe_view?" height="1000px" width="100%" style="border:0px;"></iframe>
  ]]></param>
</module>

and here's the XML for the view that will be embedded inside the iframe. (here i called it "iframe_view.xml")

<module name="URLLoader" layoutPanel="resultsAreaLeft" autoRun="True">

  <module name="Search">
    <param name="search">index=_internal source="*metrics.log" group="per_sourcetype_thruput" $sourcetype$ | stats avg(eps) by series </param>

    <module name="HTML">
      <param name="html"><![CDATA[
      <h3>Showing average eps $search.timeRange.label$</h1>
      ]]></param>
    </module>

    <module name="Pager">
      <module name="Table" />
    </module>

  </module>
</module>

For the most part it's just the Sideview modules all doing their jobs, ie Redirector and URLLoader have no idea there's an iframe involved but their normal thing works just fine here.

Note: the HTML module creating the iframe on the page doesn't have to be nested downstream from the other modules. Instead we use the "target" param on Redirector and the "name" and "id" attributes on our iframe tag.

Also note that the target view has no chrome, and the required SideviewUtils module is rendered into the viewHeader panel. It turns out that if you keep it in appHeader as is more common, SplunkWeb renders a big black bar there which we of course dont want or need.

You shouldn't have any problem with this configuration, and in fact you can turn on "keepURLUpdated" on the URLLoader and thus get full back button, forward button and history and passive permalinking support, no matter how complex of a form you've created.

You could also in theory split the form across both views, but if you go that direction just realize that any $foo$ tokens you need to make it across will have to be passed in explicitly via an arg.* param on that Redirector.

I'll add these two example views to the Sideview Utils app and write up a simple intro for them in the docs.

kragel
Path Finder

Thanks. I fixed the code so Redirector is downstream instead of at the same level. It works great now! Regarding the green box, it looks like something on my test page must not be there. I created a new test page and called that one and no green "Loading..." box shows. Thanks again for all the help it is greatly appreciated! I updated the code in my original question so that it is correct.

0 Karma

sideview
SplunkTrust
SplunkTrust

If there's a green "Loading..." box displayed on any Splunk view and it doesn't go away, that means there's a JS error that happened when the page loaded. There's a lot of reasons why that could happen, but in the world of Sideview Utils view development, the most common root cause is that the SideviewUtils module was not included on that page, but something on the page expected it to be there... For instance if you have customBehaviors in application.js but they are not wrapped in if (typeof(Sideview)!="undefined") {

0 Karma

sideview
SplunkTrust
SplunkTrust

I see the XML posted up in your question - and one big problem is that you need to put the Redirector downstream from the Pulldown module. Right now they're siblings, which means from the perspective of Redirector, $search_type$ will be undefined.

0 Karma

kragel
Path Finder

I ran out of chars in my last response otherwise I would have fixed the spacing. Also, do you know why there is a green "Loading" rectangle in the middle of the iframe when it loads? Sorry for all the questions.

0 Karma

kragel
Path Finder

Ok, if I understand you correctly then all I should need to do is this. Note: inbound_to_test is the view I'm trying to call.


inbound_to_test
targetFrame



<![CDATA[]]>

However, I'm not seeing that is the case. It seems to me that the url param is not getting my view somehow. I think that is the issue. Thanks.

0 Karma

sideview
SplunkTrust
SplunkTrust

Actually you dont need any $foo$ tokens at all over in the iframe. It's weird - the Redirector tells the browser "hey send whatever window object is called 'targetFrame' to this URL". And the iframe by having targetFrame as its name attribute, is that window object.

So the Redirector will just send the iframe to the URL by virtue of the two targets matching.

0 Karma

kragel
Path Finder

Yeah sorry, my bad. You were right. I updated my code above. The redirect is working now. I just can't get src in the iframe to read my $search_type$ variable to go to the correct view from the pulldown. Sideview Editor runtime debug says the variable is set correctly. If I put the actual view name in for src it redirects to the specified view just fine. If you have any ideas on that I'd appreciate it. Thanks again.

0 Karma

sideview
SplunkTrust
SplunkTrust

You just need to look at the answer example I gave you more closely. There's no HTML module with the iframe tag in the first view and you're not using the target param in Redirector. Maybe read through my answer again.

As far as adding a "select..." it's pretty straightforward. You can refer to the Pulldown docs for more details, but you can also just put in

<list>
    <param name="label">Select... </param>
    <param name="value"></param>
  </list>

I'm pretty sure Redirector wont actually do the the redirect if the url value it's given is null.

0 Karma

kragel
Path Finder

I added my code in a effort to more clearly show what I'm doing wrong. I'm not sure if I'm using URLLoader incorrectly or the Redirector url param. Thank you.

0 Karma

sideview
SplunkTrust
SplunkTrust

CheckboxPulldown works basically like Pulldown and the Pulldown docs have more detailed docs and examples. For all the Sideview form element modules, the Pulldown docs are kind of the master docs. In this case you can copy from a static Pulldown example and paste in a "Checkbox" in front of the world "Pulldown". 😃 You'll also want to delete the Search module just upstream.

0 Karma

kragel
Path Finder

Thank you, I'm trying to make your suggestion work. You wouldn't happen to have an example of CheckBoxPulldown that doesn't use search do you? All the examples I'm finding use search. I want to use a statically defined list. Thanks.

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...