HI,
i have created Survey widget in home page as shown below screen shot.
if we click on green emoji it displays "Very Good" and if we click on orange emoji it displays "Good" and if we click on Red emoji it displays "Bad".
but but should not displays all three together. if we click on one emoji it should displays only one.
Script :
HTML Template:
<div class="panel panel-{{::c.options.color}} b" style="overflow: hidden;">
<div class="panel-heading" style="background: rgb(151,215,227);
background: linear-gradient(90deg, rgba(151,215,227,1) 0%, rgba(2,159,187,1) 100%);">
<h4 class="h4 panel-title" style = "margin-left: 20px; margin-top:0px; color: #fff; font-size: 24px; font-weight:600;">${Feedback Survey}</h4>
</div>
<div style="padding:22px 21px;
overflow: hidden;">
<div class="col-md-6">
<h3 style="padding-left: 0;font-size: 16px;
line-height: 22px;"><b>${How Satisfied are you with the general handling of your request?}</b></h3>
</div>
<!--<img style="padding-left: 30px;" src="feedback.png" width="400" height="120"/> -->
<div class="col-md-6 mgtp1">
<span class="sp_img">
<button style="background-color: #fff;border: none;" onclick="myFunction()"> <img src="happy.png"/> </button>
<p id="demo"></p>
</span>
<span class="sp_img">
<button style="background-color: #fff;border: none;" onclick="myFunction1()"><img src="natural.png"/></button>
<p id="demo1"></p>
</span>
<span class="sp_img">
<button style="background-color: #fff;border: none;" onclick="myFunction2()"><img src="sad.png"/></button>
<p id="demo2"></p>
</span>
</div>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Very Good";
}
</script>
<script>
function myFunction1() {
document.getElementById("demo1").innerHTML = "Good";
}
</script>
<script>
function myFunction2() {
document.getElementById("demo2").innerHTML = "Bad";
}
</script>
<div class="col-md-12">
<p>Provide Any Additional Comments here</p>
<textarea style="width:100%;" rows="3" cols="80" ></textarea>
</div>
<div class="col-md-12" style="padding-right:14px;">
<a href="?id=syd_complete_survey&sys_id={{item.sys_id}}">
<button type="button" style="float:right;background-color: #47BD91;border: none;color: #fff;">SUBMIT</button>
</a>
</div>
</div>
</div>
Server Script
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
})();
Client Script :
function() {
/* widget controller */
var c = this;
}
Your help would be appreciated.
i used same script but it displays 3 text at a time. please find the below screen shot for your reference.
Hi srinu55,
One thing got missed like you have to use ng-click in place of onclick as it it angular JS.
And also removed the script part from html side and use only client controller for that:
So the updated code is :
HTML
<div class="panel panel-{{::c.options.color}} b" style="overflow: hidden;">
<div class="panel-heading" style="background: rgb(151,215,227);
background: linear-gradient(90deg, rgba(151,215,227,1) 0%, rgba(2,159,187,1) 100%);">
<h4 class="h4 panel-title" style = "margin-left: 20px; margin-top:0px; color: #fff; font-size: 24px; font-weight:600;">${Feedback Survey}</h4>
</div>
<div style="padding:22px 21px;
overflow: hidden;">
<div class="col-md-6">
<h3 style="padding-left: 0;font-size: 16px;
line-height: 22px;"><b>${How Satisfied are you with the general handling of your request?}</b></h3>
</div>
<!--<img style="padding-left: 30px;" src="feedback.png" width="400" height="120"/> -->
<div class="col-md-6 mgtp1">
<span class="sp_img" ng-show="first">
<button style="background-color: #fff;border: none;" ng-click="myFunction()"> <img src="happy.png"/> </button>
<p>{{demo}}</p>
</span>
<span class="sp_img" ng-show="second">
<button style="background-color: #fff;border: none;" ng-click="myFunction1()"><img src="natural.png"/></button>
<p>{{demo1}}</p>
</span>
<span class="sp_img" ng-show="third">
<button style="background-color: #fff;border: none;" ng-click="myFunction2()"><img src="sad.png"/></button>
<p>{{demo2}}</p>
</span>
</div>
<div class="col-md-12">
<p>Provide Any Additional Comments here</p>
<textarea style="width:100%;" rows="3" cols="80" ></textarea>
</div>
<div class="col-md-12" style="padding-right:14px;">
<a href="?id=syd_complete_survey&sys_id={{item.sys_id}}">
<button type="button" style="float:right;background-color: #47BD91;border: none;color: #fff;">SUBMIT</button>
</a>
</div>
</div>
</div>Client Controller:
function($scope) {
/* widget controller */
var c = this;
$scope.first= true;
$scope.second = true;
$scope.third = true;
$scope.myFunction = function(){
$scope.second = false;
$scope.third = false;
$scope.demo='Very Good';
}
$scope.myFunction1 = function(){
$scope.first= false;
$scope.third = false;
$scope.demo1='Good';
}
$scope.myFunction2 = function(){
$scope.second = false;
$scope.first= false;
$scope.demo2='Bad';
}
}
Screenshot of the widget: Initially all three option will be visible:
Since i don't have images so it is showing like this:
If I clicked first option then :
Second option :
So only one option is showing on the form.
You can copy paste the code and check the output.
Mark helpful and correct if it helps.
Thanks,
CB
