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 functio...
See more...
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;
}