Dashboards & Visualizations

How can I add HTML to the search page?

brent_weaver
Builder

My team and I are developing a custom Splunk app for our organization. In the app we of course have search. How do I modify the search page and have the bottom view pane be a HTML page I created? The page has info on how to search who to contact if you don't know Splunk. It's really a welcome page.

Is this possible?

Tags (2)
1 Solution

niketn
Legend

@brent_weaver, one of the options would be to create a dashboard with HTML panel containing your App's Search page as iFrame.

alt text

Following is a template, you can create your own using HTML/CSS styling and overriding Splunk's default styles as required. (PS: If you are creating a theme for all dashboards in your app, you can modify/create dashboard.css in your App's appserver/static folder)

<dashboard hideChrome="true" hideTitle="false" hideEdit="true">
  <label>My Custom App</label>
  <row>
    <panel>
      <html>
        <style>
          .dashboard-header h2 {
              text-align:center;
          }          
          .dashboard-body {
              padding: 0 0px 0px;
              color: #fff;
              background-color: #000;
          }          
          .dashboard-row .dashboard-panel {
              background: #000;
              margin: 0 0px 0px 0;
              position: relative;
          }
        </style>
        <iframe src="http://<YourSplunkServerName>/en-US/app/<YourAppName>/search" height="640px" width="100%" frameborder="0"></iframe>
        <div class="appFooter" style="background-color:#000;color: #fff;">
          <p>&#169; 2017 Blah Bah</p>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

PS: This is just a basic example where you need to override HTML/CSS style as per your requirement.
Ideal way would be to create your own Dashboard with Search Handler and Search UI using Splunk JS Stack however, that would be time-consuming.

You can then edit the navigation.xml file for your Splunk App to have your above dashboard as default load page instead of search screen. You ca access the same form Settings --> User Interface --> Navigation menu. If your dashboard view name is my_custom_app.xml, the same can be set as default view for app using code similar to the following:

<nav search_view="search" color="#65A637">
  <view name="search" />
  <view name="reports" />
  <view name="alerts" />
  <view name="my_custom_app" default="true" />
</nav>

PS: Details on creating custom App Navigation Menu is documented in the link: http://dev.splunk.com/view/webframework-developapps/SP-CAAAEP9

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@brent_weaver, one of the options would be to create a dashboard with HTML panel containing your App's Search page as iFrame.

alt text

Following is a template, you can create your own using HTML/CSS styling and overriding Splunk's default styles as required. (PS: If you are creating a theme for all dashboards in your app, you can modify/create dashboard.css in your App's appserver/static folder)

<dashboard hideChrome="true" hideTitle="false" hideEdit="true">
  <label>My Custom App</label>
  <row>
    <panel>
      <html>
        <style>
          .dashboard-header h2 {
              text-align:center;
          }          
          .dashboard-body {
              padding: 0 0px 0px;
              color: #fff;
              background-color: #000;
          }          
          .dashboard-row .dashboard-panel {
              background: #000;
              margin: 0 0px 0px 0;
              position: relative;
          }
        </style>
        <iframe src="http://<YourSplunkServerName>/en-US/app/<YourAppName>/search" height="640px" width="100%" frameborder="0"></iframe>
        <div class="appFooter" style="background-color:#000;color: #fff;">
          <p>&#169; 2017 Blah Bah</p>
        </div>
      </html>
    </panel>
  </row>
</dashboard>

PS: This is just a basic example where you need to override HTML/CSS style as per your requirement.
Ideal way would be to create your own Dashboard with Search Handler and Search UI using Splunk JS Stack however, that would be time-consuming.

You can then edit the navigation.xml file for your Splunk App to have your above dashboard as default load page instead of search screen. You ca access the same form Settings --> User Interface --> Navigation menu. If your dashboard view name is my_custom_app.xml, the same can be set as default view for app using code similar to the following:

<nav search_view="search" color="#65A637">
  <view name="search" />
  <view name="reports" />
  <view name="alerts" />
  <view name="my_custom_app" default="true" />
</nav>

PS: Details on creating custom App Navigation Menu is documented in the link: http://dev.splunk.com/view/webframework-developapps/SP-CAAAEP9

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Tech Talk Recap | Mastering Threat Hunting

Mastering Threat HuntingDive into the world of threat hunting, exploring the key differences between ...

Observability for AI Applications: Troubleshooting Latency

If you’re working with proprietary company data, you’re probably going to have a locally hosted LLM or many ...

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...