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!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

October 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...