For some reason all of the reply notifications were getting junked, so I haven't seen any replies come in over the last year!
To your question: no, we haven't tested with London or Madrid. Currently we are on Kingston, and the tabs work fine without any necessary changes or updates. (We are preparing to upgrade to L or M later this year, so my answer could change at that time). I made some changes to the tabs per business requirements as we evolved our portal, but largely the same logic applies:
1. HTML list items <li> that show each tab; depending on your user roles you'll see different combinations of the tabs
2. The Bootstrap takes care of the layout with ease
3. jQuery at the bottom to perform 2 critical actions: handle the mouse clicking, and displaying/hiding the active/inactive tabs.
Can you please provide a snippet of the resulting HTML on your page?
This is the page layout with all the widgets in our Prod instance:
Then in the HTML, my widget still appears normally:
Noting that the "table-tabs" ID belongs to the core tabs widget, not to the Task tables that you want to list out on the page itself.
Hi Geoff. Here are images and values, This is in my personal dev instance. The <div id="xfbacbd64db6323002445e1bb4b961915 is the Incident instance sys_id. Note the <div> after has no attributes.
I think i will request a Kingston dev instance and try this there.
Thanks for responding and taking a look.
Ken
|
Instance = Table Tabs instance ID = table_tabs_instance Bootstrap class name =
|
Widget = Table Tabs ID = table-tabs
|
|
Body HTML template excerpt <li ng-show="data.your_condition_here" role="presentation" id="ticket_incidents" class="active"><a href="#">Incidents</a></li> <li ng-show="data.your_condition_here" role="presentation" id="ticket_ritms"><a href="#">Requested Items</a></li>
Client controller
function ($scope, $sce) {
$("#table-tabs ul li").click(function (e) { e.preventDefault();
// Set the "active" tab for Bootstrap styling $("#table-tabs ul li").removeClass("active"); $(this).addClass("active");
// Select which table to display var id = $(this).attr("id"); switch (id) { // the ID of a table case "ticket_incidents": hideTables("#ticket_incidents"); break; // the ID of a table case "ticket_ritms": hideTables("#ticket_ritms"); break; }
return false; });
function hideTables(option) { $(".table-class").hide();
if (option) { $(option).show(); } } }
| |
|
Instance with Table = Incidents ID = ticket_incidents Bootstrap class name = table-class
|
Widget = Data Table from Instance Definition ID =
|
|
Instance with Table = Requested Items ID = ticket_ritms Bootstrap class name = table-class
|
Widget = Data Table from Instance Definition ID =
|
|
Instance = ID = Bootstrap class name =
|
Widget = jQuery ID = jquery
Client controller function () { /* widget controller */ var c = this;
var url = window.location.href; var n = url.includes("$spd.do") || url.includes("sp_config");
/* ….. */ if (n != true) { $(".table-class").hide(); // ….. $(".table-class:first").show(); } }
|
|
|
|
Oh, I wonder if we're talking about two different areas of the HTML!
The HTML screenshot I provided was specifically for the "Table Tabs" widget, not for my Incident table.
Hopefully I can clarify below:
This is the rendered HTML (collapsed) for my "Table Tabs" widget:
This is the HTML in the same "Table Tabs" widget when in the Widget Editor screen:
So you should see that the
<div id="table-watchlist-tabs" class="table-tabs"in both HTML are the same.
Now, here is the rendered HTML for my Incident table (widget based upon "Data Table with Instance") in the portal:
And here is the HTML in the custom widget I created based on the "Data Table with Instance" widget:
Note specifically that I had to manually add the
<div id="{{data.id}}" class="tickets-tables"ID and class attributes for this. These were changes I made later on, after posting my template to ServiceNow Share, but specifically I have made sure that the jQuery selector can see the "tickets-tables" class by enforcing it in the custom widget. The data.id is grabbed by the Server Script.
I've attached below a crude scrubbed down version of our current widget that displays the Task records in the portal. It's pretty much what we are using, but removed some strings/variables that contain our company/instance info. It should be completely operational in this form, however, just needs tweaking to your own company's portal style, etc.
Hi Marc, Sam, anyone. Did you find the answer to your issues. What was the got-you that fixed your issues?
I started with the Download Version 2.0 widgets.
Any help appreciated, Ken
The code looks simple enough although I am not familiar with how the tables are hidden with CSS. I think I have all the components set.
One question is my assumption that this works with the Data Table from Instance Def widget, which "tables" display and work correctly.
The "Incidents" instance of DTfID has id (data_table_incidents) and Bootstrap class name (table-class)
jQuery is unchanged and still uses $(".table-class").hide();
<li ng-show="data.your_condition_here" role="presentation" id="data_table_incidents" class="active"><a href="#">Incidents</a></li>
// the ID of a table
case "data_table_incidents":
hideTables("#data_table_incidents");
break;
