Dashboards & Visualizations
cancel
Turn on suggestions
Showing results for 
Show  only  | 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!

Advanced Splunk Data Management Strategies

Join us on Wednesday, May 14, 2025, at 11 AM PDT / 2 PM EDT for an exclusive Tech Talk that delves into ...

Uncovering Multi-Account Fraud with Splunk Banking Analytics

Last month, I met with a Senior Fraud Analyst at a nationally recognized bank to discuss their recent success ...

Secure Your Future: A Deep Dive into the Compliance and Security Enhancements for the ...

What has been announced?  In the blog, “Preparing your Splunk Environment for OpensSSL3,”we announced the ...
Top