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]

Exactly, could you kindly provide me that script ?

[sinu2]

Sidhnath Pandey,

The format is like below

If you can provide the script that would really helps me

[Siddhnath Pande]

I have shared the script.

However you want do more style on the table, so use this link

https://www.w3schools.com/tags/tag_table.asp

Still if you have any doubt let me know.

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

Thanks and Regards:
Siddhnath Pandey

[Siddhnath Pande]

Yeah Sure.

HTML Script:

<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-xl">
       
     <table class="table table-striped table-bordered">
      <h2>Table data</h2>
     
        <tr>
          <th scope="col">Column 1</th>
          <th scope="col">Column 2</th>
          <th scope="col">Column 3</th>
        </tr>
         <tr>
          <td scope="col">data 1</td>
          <td scope="col">data 2</td>
          <td scope="col">data 3</td>
        </tr>
         <tr>
          <td scope="col">data 1</td>
          <td scope="col">data 2</td>
          <td scope="col">data 3</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 Script:

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

As the above code helps you please mark my answer Correct and Helpful.

Thanks and Regards:
Siddhnath Pandey

[sinu2]

Hi Pandey ,

I have added the script you have provided in the HTML part and client script. But since i didnt aware where to add i added bottom of the existing script. after added code totlly form has gone.

Actaully in my widget already one heper link is there which is for chat configuration. But out new button which needs to create the below chat link in the same widget. So could you helpe me where do we need insert our code?

ActS

SBelow is the HTML script@@@@@@@@@@@@@@@@

###############Already existing code for chat functionality in that widget############

<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>

 #################### I have added our new button code starts here##################

<!---<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>----->