Dashboards & Visualizations

Adding default search to your own app dashboard

dotadmin
Explorer

So we needed a view where we had the default search look and capabilities but within the "chrome" or look and feel of the app we were creating. I searched high and low through the documentation but there's no method to add CSS or javascript to the search page that is rendered to then manipulate the look and feel of the search page. Finally, it dawned on me that everything on that page is run by javascript so I simply viewed the page source and copied and pasted the HTML from the search page into a new html page within our app and then was able to tweak the HTML to add the CSS and Javascript from our app (sample below with ID's replaced). Just be sure to copy the HTML out of your own app as the App ID's , etc will change.

<!doctype html>
<!--[if lt IE 7]> <html lang="en" class="no-js ie  lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html lang="en" class="no-js ie7 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html lang="en" class="no-js ie8 lt-ie9"> <![endif]-->
<!--[if IE 9]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
        <meta name="referrer" content="never" />
        <meta name="referrer" content="no-referrer" />

        <script>
            (function () {
                window._splunk_metrics_events = [];
                window._splunk_metrics_events.active = true;

                function onLoadSwa() {
                    new SWA({"version": "2", "userID": "USER_ID", "instanceGUID": "INSTANCE_GUID", "url": "https://e1345286.api.splkmobile.com/1.0/e1345286", "deploymentID": "DEPLOYMENT_ID"});
                };

                document.addEventListener("DOMContentLoaded", function(event) {
                    var s = document.createElement('script');
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = '/en-US/static/app/splunk_instrumentation/build/pages/swa.js';
                    s.addEventListener('load', onLoadSwa);
                    var x = document.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                });
            }());
        </script>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Loading...</title>
    <meta name="description" content="listen to your data" />
    <meta name="author" content="Splunk Inc." />
    <meta name="viewport" content="width=1160, initial-scale=1.0" />
    <link rel="shortcut icon" href="/en-US/static/SPLUNK_APP_ID/img/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/en-US/static/SPLUNK_APP_ID/img/bookmark/apple-icon-57x57-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/en-US/static/SPLUNK_APP_ID/img/bookmark/apple-icon-72x72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/en-US/static/SPLUNK_APP_ID/img/bookmark/apple-icon-114x114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/en-US/static/SPLUNK_APP_ID/img/bookmark/apple-icon-144x144-precomposed.png" />
    <meta name="msapplication-TileColor" content="#65A637">
    <meta name="msapplication-TileImage" content="/en-US/static/SPLUNK_APP_ID/img/bookmark/ms-tileicon-144x144.png">
    <link rel="stylesheet" type="text/css" href="/en-US/static/SPLUNK_APP_ID/build/css/bootstrap-enterprise.css" />
  <link rel="stylesheet" type="text/css" href="link-to-custom-css-goes-here.css"/>

</head>
<body class="locale-en">


<div class="preload">
        <div id="placeholder-splunk-bar">
            <a href="/en-US/" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
        </div>
    <div id="placeholder-app-bar"></div>
    <div id="placeholder-main-section-body">
    Loading...
    </div>
</div>

    <!-- live to code, code to live... -->

    <script src="/en-US/config?autoload=1" crossorigin="use-credentials"></script>
    <script src="/en-US/static/SPLUNK_APP_ID/js/i18n.js"></script>
    <script src="/en-US/i18ncatalog?version=%40SPLUNK_APP_ID.502&autoload=1"></script>
    <script>
    __splunkd_partials__ = {"/servicesNS/nobody/system/apps/local/APP_NAME": {"messages": [], "links": {}, "entry": [{"acl": {"perms": {"read": [], "write": []}}, "links": {"disable": "/servicesNS/nobody/system/apps/local/APP_NAME/disable"}, "content": {"version": "1.0", "configured": "0", "core": "0"}, "fields": {"optional": [], "required": [], "wildcard": []}}], "generator": {}}, "/services/server/info": {"messages": [], "links": {}, "entry": [{"acl": {"perms": {"read": [], "write": []}}, "links": {}, "content": {"instance_type": null, "serverName": "MacBook-Pro-2016.local", "isFree": false, "staticAssetId": "SPLUNK_APP_ID", "addOns": {"itsi": {"parameters": {"size": "10", "guid": "F0C92ACB-5195-4ED6-98B2-8AF47056DC30"}, "type": "app"}}, "guid": "INSTANCE_GUID", "version": "6.6.2", "build": "4b804538c686", "activeLicenseSubgroup": "Production", "licenseState": "OK", "isTrial": false, "product_type": "enterprise"}, "fields": {"optional": [], "required": [], "wildcard": []}}], "generator": {}}, "/appnav": {"messages": [], "links": {}, "entry": [{"acl": {"perms": {"read": [], "write": []}}, "links": {}, "content": {"label": "APP_NAME", "color": "#222222", "defaultView": "upload_diag", "nav": [{"uri": "/en-US/app/APP_NAME/upload_diag", "label": "upload_diag", "viewName": "upload_diag"}, {"uri": "upload_diag", "label": "Upload Diag"}, {"uri": "sb_overview", "label": "Overview"}, {"uri": "insights", "label": "Insights"}, {"uri": "config_viewer", "label": "Config Viewer"}, {"uri": "log_activity", "label": "Logs & Errors"}, {"uri": "activity_viewer", "label": "Activity Viewer"}, {"uri": "activity_viewer", "label": "Crash Log Viewer"}, {"uri": "search_splunk", "label": "Search"}, {"uri": "search", "label": "Search"}]}, "fields": {"optional": [], "required": [], "wildcard": []}}], "generator": {}}};
    </script>
    <script src="/en-US/static/SPLUNK_APP_ID/build/pages/enterprise/common.js"></script>
    <script src="/en-US/static/SPLUNK_APP_ID/build/pages/enterprise/search.js"></script>
</body>
</html>
Tags (2)
0 Karma
1 Solution

dotadmin
Explorer

Here is a sample of what we finally ended up with:

<!doctype html><!--[if lt IE 7]>
<html lang="en" class="no-js ie  lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
<html lang="en" class="no-js ie7 lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>
<html lang="en" class="no-js ie8 lt-ie9"> <![endif]--><!--[if IE 9]>
<html lang="en" class="no-js ie9"> <![endif]--><!--[if gt IE 9]><!-->
<html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta name="referrer" content="never"/>
  <meta name="referrer" content="no-referrer"/>
  <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css"/>
  <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/APP_NAME/css/dashboard.css"/>

</head>
<body class="locale-en">
<div class="preload">
  <header>
    <a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
    <div class="header splunk-header">
      <div id="placeholder-splunk-bar">
        <a href="/en-US/" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
      </div>
    </div>
    <div id="placeholder-app-bar"></div>
    <a id="navSkip"></a>
  </header>
  <div class="dashboard-body main-section-body overview" data-role="main">
    <div class="content-wrap">
      <div id="placeholder-main-section-body">
        Loading...
      </div>
    </div>
  </div>
</div>

<!-- live to code, code to live... -->

<script src="/en-US/config?autoload=1" crossorigin="use-credentials"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script>
  __splunkd_partials__ = {
    "/servicesNS/nobody/system/apps/local/SplunkBOT2": {
      "messages": [],
      "links": {},
      "entry": [{
        "acl": {"perms": {"read": [], "write": []}},
        "links": {"disable": "/servicesNS/nobody/system/apps/local/APP_NAME/disable"},
        "content": {"version": "1.0", "configured": "0", "core": "0"},
        "fields": {"optional": [], "required": [], "wildcard": []}
      }],
      "generator": {}
    },
    "/services/server/info": {
      "messages": [],
      "links": {},
      "entry": [{
        "acl": {"perms": {"read": [], "write": []}},
        "links": {},
        "content": {
          "instance_type": null,
          "serverName": "SERVER_NAME", 
          "isFree": false,
          "staticAssetId": "STATIC_ASSET_ID",
          "addOns": {
            "itsi": {
              "parameters": {"size": "10", "guid": "GUID_HERE"},
              "type": "app"
            }
          },
          "guid": "ANOTHER_GUID_HERE",
          "version": "6.6.2",
          "build": "4b804538c686",
          "activeLicenseSubgroup": "Production",
          "licenseState": "OK",
          "isTrial": false,
          "product_type": "enterprise"
        },
        "fields": {"optional": [], "required": [], "wildcard": []}
      }],
      "generator": {}
    },
    "/appnav": {
      "messages": [],
      "links": {},
      "entry": [{
        "acl": {"perms": {"read": [], "write": []}},
        "links": {},
        "content": {
          "label": "APP_NAME",
          "color": "#222222",
          "defaultView": "upload_diag",
          "nav": [{
            "uri": "nav_item_2",
            "label": "Overview"
          }, {"uri": "nav_item_3", "label": "Insights"}, {
            "uri": "config_viewer",
            "label": "Config"
          }, {"uri": "nav_item_4", "label": "Logs"}, {
            "uri": "nav_item_5",
            "label": "Activity"
          }, {"uri": "nav_item_6", "label": "Crash Log Viewer"}, {
            "uri": "nav_item_7",
            "label": "Search"
          }]
        },
        "fields": {"optional": [], "required": [], "wildcard": []}
      }],
      "generator": {}
    }
  };
</script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/build/pages/enterprise/common.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/build/pages/enterprise/search.js"></script>
</body>
</html>

View solution in original post

0 Karma

dotadmin
Explorer

Here is a sample of what we finally ended up with:

<!doctype html><!--[if lt IE 7]>
<html lang="en" class="no-js ie  lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
<html lang="en" class="no-js ie7 lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>
<html lang="en" class="no-js ie8 lt-ie9"> <![endif]--><!--[if IE 9]>
<html lang="en" class="no-js ie9"> <![endif]--><!--[if gt IE 9]><!-->
<html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta name="referrer" content="never"/>
  <meta name="referrer" content="no-referrer"/>
  <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css"/>
  <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/APP_NAME/css/dashboard.css"/>

</head>
<body class="locale-en">
<div class="preload">
  <header>
    <a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
    <div class="header splunk-header">
      <div id="placeholder-splunk-bar">
        <a href="/en-US/" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
      </div>
    </div>
    <div id="placeholder-app-bar"></div>
    <a id="navSkip"></a>
  </header>
  <div class="dashboard-body main-section-body overview" data-role="main">
    <div class="content-wrap">
      <div id="placeholder-main-section-body">
        Loading...
      </div>
    </div>
  </div>
</div>

<!-- live to code, code to live... -->

<script src="/en-US/config?autoload=1" crossorigin="use-credentials"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script>
  __splunkd_partials__ = {
    "/servicesNS/nobody/system/apps/local/SplunkBOT2": {
      "messages": [],
      "links": {},
      "entry": [{
        "acl": {"perms": {"read": [], "write": []}},
        "links": {"disable": "/servicesNS/nobody/system/apps/local/APP_NAME/disable"},
        "content": {"version": "1.0", "configured": "0", "core": "0"},
        "fields": {"optional": [], "required": [], "wildcard": []}
      }],
      "generator": {}
    },
    "/services/server/info": {
      "messages": [],
      "links": {},
      "entry": [{
        "acl": {"perms": {"read": [], "write": []}},
        "links": {},
        "content": {
          "instance_type": null,
          "serverName": "SERVER_NAME", 
          "isFree": false,
          "staticAssetId": "STATIC_ASSET_ID",
          "addOns": {
            "itsi": {
              "parameters": {"size": "10", "guid": "GUID_HERE"},
              "type": "app"
            }
          },
          "guid": "ANOTHER_GUID_HERE",
          "version": "6.6.2",
          "build": "4b804538c686",
          "activeLicenseSubgroup": "Production",
          "licenseState": "OK",
          "isTrial": false,
          "product_type": "enterprise"
        },
        "fields": {"optional": [], "required": [], "wildcard": []}
      }],
      "generator": {}
    },
    "/appnav": {
      "messages": [],
      "links": {},
      "entry": [{
        "acl": {"perms": {"read": [], "write": []}},
        "links": {},
        "content": {
          "label": "APP_NAME",
          "color": "#222222",
          "defaultView": "upload_diag",
          "nav": [{
            "uri": "nav_item_2",
            "label": "Overview"
          }, {"uri": "nav_item_3", "label": "Insights"}, {
            "uri": "config_viewer",
            "label": "Config"
          }, {"uri": "nav_item_4", "label": "Logs"}, {
            "uri": "nav_item_5",
            "label": "Activity"
          }, {"uri": "nav_item_6", "label": "Crash Log Viewer"}, {
            "uri": "nav_item_7",
            "label": "Search"
          }]
        },
        "fields": {"optional": [], "required": [], "wildcard": []}
      }],
      "generator": {}
    }
  };
</script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/build/pages/enterprise/common.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/build/pages/enterprise/search.js"></script>
</body>
</html>
0 Karma

richgalloway
SplunkTrust
SplunkTrust

Please answer and accept your how-to posting so future readers know it's not an unanswered question.

---
If this reply helps you, Karma would be appreciated.

dotadmin
Explorer

@richgalloway, thanks. I wanted to come back and post what I ended up as a final product before closing it out.

0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...