I managed to create a widget with the following code-
HTML
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title">Terms and Conditions</div>
</div>
<div class="panel-body">
<div>
<button class="btn btn-primary" ng-click="c.openModal()">${View Article}</button>
</div>
<div>
<input type="checkbox" name="agree" value="agree" ng-model="c.data.agree" placeholder>
<span style="color:blue">I accept these Terms and Conditions</span>
</div>
<div class="panel-footer text-right">
<button class="btn btn-secondary" ng-click="c.closeModal()">${Cancel}</button>
<button class="btn btn-primary" ng-click="c.closeModal()">
${Ok}
</button>
Client Script
function($uibModal, $scope) {
var c = this;
c.openModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});
}
c.closeModal = function() {
c.modalInstance.close();
}
}
This is how the widget looks currently-
On click of 'View Article' I need to open a knowledge article on a seperate page. Clicking on Cancel should close the box, And user needs to check I accept and click OK to close the dialogue box, other wise gets a message, Please accept the Terms.
Any help on how can I relate the behaviours?
Hi Anurag,
I have created the widget , in this way :
Widget code :
HTML Template :
<div class="panel panel-primary b">
<div class="panel-heading">
<h4 class="panel-title">
<i class="fa fa-info-circle m-r-sm"></i>User Information
</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group" >
<div class="col-sm-12">
<span style="color:red;">*</span><label class="control-label" >Phone Number</label>
<select id="ph_num" name="ph_num" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="c.selectedNumber" ng-options="x for x in data.choices" ng-change="myChange(c.selectedNumber)"><option value="">-- Select an option--</option></select>
</div>
</div>
<div class="form-group" >
<div class="col-sm-12">
<span style="color:red;">*</span><label class="control-label" >Data Plan Needed</label>
<select id="data_plan" name="data_plan" class="form-control ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="c.selectedData" ng-options="y for y in data.choices" ng-change="myChange(c.selectedData)"><option value="">-- Select an option--</option></select>
</div>
</div>
</form>
</div>
<div class="panel-footer clearfix">
<input class="pull-right btn btn-primary" type="reset" value="${Reset}" ng-click="reset()">
<input class="pull-left btn btn-primary" type="viewarticle" value="${View Article}" ng-click="onView()">
</div>
</div>
Client Script :
function($scope, $window, spUtil,spModal) {
var c = this;
$scope.myChange = function(something){
$scope.data.func ='submit';
c.confirmed = "asking";
spModal.confirm($scope.data.msg).then(function(confirmed) {
c.confirmed = confirmed; // true or false
})
if(c.confirmed) {
//Replace new line with breaks
c.data.textchange =c.selectedNumber;
if(something == "No"){
//Write your code here
}
}
}
$scope.onView = function() {
//Write view article code here
}
$scope.reset = function() {
c.selectedNumber = "";
c.selectedData = "";
$scope.data.func ='reset';
c.server.update().then(function(response) {
spUtil.update($scope);
})
}
}
Server Script :
(function() {
var user = gs.getUser();
var user_id = gs.getUserID();
var session = gs.getSession();
data.language = session.getLanguage();
data.choices = ['Yes','No'];
data.msg = gs.getMessage('I accept these terms and conditions');
//Start
if(input.func == "reset"){
//Write any code you want to perform at reset
}
//End
})();
