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,

I have tried with your latest code.No Luck everything gone after this.Please see below portal after new code

Here is the code:

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

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

Note:Will it possible having two links in a same widget?

[Siddhnath Pande]

Yes it is. However that code should work. I have tried hard on this question. we should get some positive result.

If you want we can try one more time. It should be working 

Just let me know one thing in this below Image Whatever I have marked all these are Individual widgets right?

If yes then That code which I have shared in the last reply that code should be paste in the Contact US widget.

Meanwhile If you found that I might helped you somehow, then please mark my answer Correct and Helpful. It motivates me a lot to keep working continue.

Thanks and Regards:
Siddhnath Pandey

[sinu2]

Nope, apart of approval I have seen everything redirects to same widget

[sinu2]

Hi pandey,

In that portal apart of APPROVAL widget all widgets are same i mean when i open in widget editor apart of APPROVAL tab everything is same widget.

[Siddhnath Pande]

😞

It's way more complicated then I thought. Here widget Instance play's a huge role. Now It's difficult to explain without knowing the complete requirement at least of this page.

So I would recommend show this to your senior who know the complete functionality or I would say requirement.

I wish I could help you more to get this fix. But As you I have tried hard.

However if you found any of these reply helpful please mark it as Correct and Helpful

Thanks & regards:

Siddhnath Pandey