topic Re: Java script modification help needed in Dashboards & Visualizations

Java script modification help needed

sbhatnagar88 — Tue, 06 Oct 2020 11:40:57 GMT

Hi,

We have been using below .js and .css file to create kind of feedback form in Splunk dashboard. Once feedback is submitted by user it get stored in feedback.csv . I need to add below two functionalities in feedback form.

1. To add stars which has to be filled by user to record his satisfaction level.

2. when Send button is clicked after filling feedback, username should also get stored in feedback.csv.

Below is .js and .css file

--------- java script file----------

require(['splunkjs/mvc','splunkjs/mvc/searchmanager','splunkjs/mvc/simplexml/ready!'],function(mvc, SearchManager){
		var updateCSV = new SearchManager({
                id: "updateCSV",
                autostart: false,
		cache:false,
                search : "| makeresults | eval feedback=\"$setMsg$\" | inputlookup append=true feedback.csv | outputlookup feedback.csv"
                },{tokens: true});

	$(document).find('.dashboard-body').append('<button id="feedback" class="btn btn-primary">Feedback</button>');
	$(document).find('.dashboard-body').append('<div class="chat-popup" id="myForm"><form class="form-container"><h1>Feedback</h1><label for="msg"><b>Message</b></label><textarea placeholder="Type Feedback.." name="msg" id="msgFeedback" required></textarea><span id="validationFeebback"></span><button id="sbmtFeedback" type="button" class="btn">Send</button><button id="cnclFeebackPopUP" type="button" class="btn cancel">Close</button></form></div>');
	
	$("#feedback").on("click", function (){
		$('#msgFeedback').val("");
		$(document).find("#validationFeebback").text("");
		$(document).find('.chat-popup').show();
	});

	$("#cnclFeebackPopUP").on("click", function (){
		$(document).find('.chat-popup').hide();
	});

	$("#sbmtFeedback").on("click", function (){
		var msg=$('#msgFeedback').val();
		if (msg.length<=10 || (msg.length==1 && msg==" ")){
			$(document).find("#validationFeebback").text("Invalid Feedback").css({'color':'red',});
		}
		else{
			var tokens = splunkjs.mvc.Components.get("default");
    			tokens.set("setMsg", msg);
			updateCSV.startSearch();
			$(document).find("#validationFeebback").text("Your feedback has been submitted..!").css({'color':'green'});
		}
	});
	
});

--------------------.css file-------------------

.chat-popup {
  display: none;
  position: fixed;
  bottom: 120px;
  border: 3px solid #f1f1f1;
  z-index: 9;
  margin-left: 30%;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
  min-width: 500px;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
  line-height: 5px;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
.btn-primary{
float:right;
}
.btn{
margin-right: 10px;
margin-top: 10px;
line-height: 25px;

}

Re: Java script modification help needed

sbhatnagar88 — Thu, 08 Oct 2020 08:40:27 GMT

Any help would be highly Appreciable...

Re: Java script modification help needed

niketn — Sun, 11 Oct 2020 15:37:57 GMT

@sbhatnagar88 for issue 1 you need a developer with JavaScript/jQuery knowledge (This is not a Splunk related issue). What have you tried to get Stars displayed in front-end? What has not worked?

For issue 2, writing to CSV is incorrect approach, ideally you should be writing to KVStore for this kind of use case not CSV.

Nevertheless, you can get the logged in Splunk User name by two approach:

Option 1. Use environment token $env:user$ in Simple XML to set a token using Independent search.
The following example explains the approach with an independent search to set the token loggedInUser through SimpleXML and accesses token loggedInUser in JS using default or submitted token model. (you can find several examples for accessing tokens from change event handler of default and submitted token models in Splunk Dev or Splunk Answers. https://dev.splunk.com/enterprise/docs/developapps/visualizedata/binddatausingtokens/transformandvalidate/)

<search> <query>| makeresults | fields - _time | eval loggedInUser="$env:user$" </query> <earliest>-1s</earliest> <latest>now</latest> <done> <set token="loggedInUser">$result.loggedInUser$</set> </done> </search>

Option 2: Use splunk.config library to access User Name from object SplunkConfig['USERNAME']

require([ ... ... 'splunk.config' ], function(..., SplunkConfig) { ... // Set the currently logged in user from Splunk Configuration to Token var username = SplunkConfig['USERNAME']; ... });