How to popup static HTML table content with 8 columns of fields in service portal

[sinu2]

Hi, 

I am née for service portal. My requirement is to when onclick of a button popup a static HTML table with some content. If any one has done like this requirement earlier can provide me code or what needs to be config? 

[sinu2]

Ashutosh,

Any suggestion for the below please?

As soon as i click Call Us button in the below screen shot the below data should be displayed.

[Ashutosh Munot1]

Hi,

If its hardcoded then you dont need server side script.

<table class="table">
<thead>
<tr>
<th scope="col">Country From</th>
<th scope="col">Line Type</th>
<th scope="col">POC</th>
<th scope="col">Language</th>
<th scope="col">SP</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Australia</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">Mexico</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">Colombia</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">USA</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitt
</tbody>
</table>

Please substitute your values.

Thanks,
Ashutosh

Mark answer correct and helpful

[sinu2]

Hi Ashutosh,

And the problem is since it is already existing widget already in that widget chat functionality present. So below  that chat hyperlink in that widget we need to add this button in the same widget. I am confused where to add out code 

@@@@@@@@@@@@@@@@@@@HTML Script

Note: Commented code is which i added for our new requirements .Kindly suggest where to add

<div>
<style>
.{{::c.options.cssClassName}} >div {
height: 15em;
width: 19em;
padding: 0.5em 1em;
margin: 0 0em 1em 0;
background-color: #fff;
color: #00385a;
}

.{{::c.options.cssClassName}} div li {
list-style-image: url('potato-bullet.png');
}

.{{::c.options.cssClassName}} div>div {
height: 95%;
background-image: url('{{::c.options.icon}}');
background-repeat: no-repeat;
background-position: top right;
}
</style>
<a class="{{::c.options.cssClassName}}" href="{{::c.options.queryString}}">
<div>
<div>
<h3>{{::c.options.title}}</h3>
<ul ng-if="::c.options.bulletList">
<li ng-repeat="b in ::c.options.bulletList">{{b}}</li>
</ul>
</div>
</div>
</a>
</div>

<!---<div>
<button class="btn btn-primary" ng-click="c.openModal()">${Open Modal}</button>
</div>

<script type="text/ng-template" id="modalTemplate">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Modal Window</h4>
</div>
<div class="panel-body wrapper-x1">

<table class="table table-striped table-bordered">
<h2>Table data</h2>

<tr>
<th scope="col">Country From</th>
<th scope="col">Line type</th>
<th scope="col">POC</th>
<th scope="col">Language</th>
<th scope="col">SP</th>
</tr>
<tr>
<td scope="col">Australia</td>
<td scope="col">International Toll Free</td>
<td scope="col">+611800304218</td>
<td scope="col">English</td>
<td scope="col">BT</td>
</tr>
</table>

</div>
<div class="panel-footer text-right">
<button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
</div>
</div>
</script>----->

############client side script

function() {
/* widget controller */
var c = this;
c.options.cssClassName = "lw-tile-" + c.options.cssClassName;
}

/*function($uibModal,$scope){
var c =this;

c.openModal = function(){
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});
}

c.closeModal = function(){
c.modalInstance.close();
}

}*/

[sinu2]

Hi Ashotosh,

I need when ever i click a button called "call us" this static table should show but in your code i dont see onclick functionaly it is not working

i have modified my code in the existing script like below but not working could kindly see and suggest 

Note:Commented code is the new code for this functionality uncommented code which alresdy exist

HTML CODE****************

<div>
<style>
.{{::c.options.cssClassName}} >div {
height: 15em;
width: 19em;
padding: 0.5em 1em;
margin: 0 0em 1em 0;
background-color: #fff;
color: #00385a;
}

.{{::c.options.cssClassName}} div li {
list-style-image: url('potato-bullet.png');
}

.{{::c.options.cssClassName}} div>div {
height: 95%;
background-image: url('{{::c.options.icon}}');
background-repeat: no-repeat;
background-position: top right;
}
</style>
<a class="{{::c.options.cssClassName}}" href="{{::c.options.queryString}}">
<div>
<div>
<h3>{{::c.options.title}}</h3>
<ul ng-if="::c.options.bulletList">
<li ng-repeat="b in ::c.options.bulletList">{{b}}</li>
</ul>
</div>
<!--- <div>
<button class="btn btn-primary" ng-click="c.openModal()">${Open Modal}</button>
</div>

<script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Modal Window</h4>
</div>
<div class="panel-body wrapper-xl">

<table class="table table-striped table-bordered">
<h2>Table data</h2>

<tr>
<th scope="col">Country From</th>
<th scope="col">Line type</th>
<th scope="col">POC</th>
<th scope="col">Language</th>
<th scope="col">SP</th>
</tr>
<tr>
<td scope="col">Australia</td>
<td scope="col">International Toll Free</td>
<td scope="col">+611800304218</td>
<td scope="col">English</td>
<td scope="col">BT</td>
</tr>
</table>

</div>
<div class="panel-footer text-right">
<button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
</div>
</div>
</script>--->
</div>
</a>
</div>

CLIENT SIDE CODE**********************

function() {
var c = this;
c.options.cssClassName = "lw-tile-" + c.options.cssClassName;

}

/* function($uibModal, $scope) {
var c = this;

c.openModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});
}

c.closeModal = function() {
c.modalInstance.close();
}

}*/

[Siddhnath Pande]

Hey Sreeni,

See this below image, this what exactly you looking for?

After click on Open Model you will get something like this

Hope this will help you, Let me know this what you looking for then I will share the code as well. 

If the above code helps then please mark my answer Correct and Helpful.

Thanks and Regards:
Siddhnath Pandey