topic Re: Adding default search to your own app dashboard in Dashboards & Visualizations

Adding default search to your own app dashboard

dotadmin — Tue, 10 Oct 2017 18:07:25 GMT

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>

Re: Adding default search to your own app dashboard

richgalloway — Tue, 10 Oct 2017 18:16:14 GMT

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

Re: Adding default search to your own app dashboard

dotadmin — Wed, 11 Oct 2017 05:17:31 GMT

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>

Re: Adding default search to your own app dashboard

dotadmin — Wed, 11 Oct 2017 15:06:44 GMT

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