Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Adding default search to your own app dashboard

dotadmin
Explorer
‎10-10-2017 11:07 AM

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
Reply
1 Solution
Solved! Jump to solution
Solution

dotadmin
Explorer
‎10-10-2017 10:17 PM

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
Reply
Solved! Jump to solution
Solution

dotadmin
Explorer
‎10-10-2017 10:17 PM

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
Reply
Solved! Jump to solution

richgalloway
SplunkTrust
SplunkTrust
‎10-10-2017 11:16 AM

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.
Reply
Solved! Jump to solution

dotadmin
Explorer
‎10-11-2017 08:06 AM

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

0 Karma
Reply
Get Updates on the Splunk Community!

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Survey for Splunk Admins and App Developers is open now! | Earn a $35 gift card!      Hello there,  Splunk ...

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...