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? 

[Siddhnath Pande]

I didn't not get exact requirement this time, However what I have understood is you didn't get where exactly you have to paste this code right?

So here is the solution in your HTMl Script:

put my complete html script code after line no. 30.

& complete client script code put in the your client scrip code just after line no. 4

[sinu2]

Hi pandey, Actually what I was informing you in the above message is. The code you provided me is I need to paste in one of my widget which has already another code exist for another button. So I am confused that this new code where do I need to add😊. So If I add html code in line 31 and client script in line 5 will that work?

[Siddhnath Pande]

Yes try,

& if it helps then please mark my answer Correct and Helpful.

& if not working let me know.

Thanks and Regards:
Siddhnath Pandey

[sinu2]

Hi Pandey,

As per your suggestion i have added HTML code in line 31 and client script in line 5 but after saved evrything gone and showinglike below.

BBelow is the code

IIn HTML from line 31 to 66 and in client script line 5 to 19 are newly added code. Rest code is existing one for another hyperlink.

Kindly suggest what is wrong

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

}
}

/*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]

Yeah sure,

First Sorry I didn't read, in the client script not paste complete code just this code only after line no. 4

Or just do me a favor share your Complete widget Code I will change it & I'll give you with working.