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]

Hi Pandey,

Could you Kindly take my below complete code and make adjustments

***********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() {
/* 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();
}

}*/

Sir again once more explanation Open Modal is our new link  and Contact US Via Chat is already working functionality in that widget

[sinu2]

###########Server existing script

(function() {
options.bulletList = options.bullets.split(',');
})();

[sinu2]

Pandey Ji,

What ever i have sent you code where ever commented code is there that is our new code and remaining uncommented code is for other functionality code. So as per our functionality you can insert code in to that Original code so that i can use. Thanks a lot

[Siddhnath Pande · Accepted solution]

Try This,

HTML Script:

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

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

. div>div {
height: 95%;
background-image: url('');
background-repeat: no-repeat;
background-position: top right;
}
</style>
<a class="" href="">
    <ul ng-if="::c.options.bulletList">
      <li ng-repeat="b in ::c.options.bulletList"></li>
		</ul>
</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-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) {
/* widget controller */
var c = this;
c.options.cssClassName = "lw-tile-" + c.options.cssClassName;
 c.openModal = function() {
 c.modalInstance = $uibModal.open({
 templateUrl: 'modalTemplate',
 scope: $scope
 });
 }
 
 c.closeModal = function() {
 c.modalInstance.close();
 }
}

Let me know if it work's

[sinu2]

Sure Pandey,

Right away going to test. And will let you know