Power Pages Collapsible Tabs
Dan Larsen
41
Like
Share
ReportOccasionally as we are building Power Pages, we find that the Forms can become too long for our customers. In Dynamics, we currently have the ability to break the content up by tabs. Back in the day, CRM had collapsible tabs. While Pages doesn’t have this feature out of the box, there is a quick method with JavaScript that will allow you to automatically create collapsible tabs. You will want to ensure that all Tab labels on the form are visible else your results may vary.
Ok, to make this work, you will want to go to the JavaScript section on your webpage. You can do this directly on the Web Page record in Portal Management or you can use the Code Editor in the Pages Studio. In either case, drop the following JavaScript.
$(document).ready(function () {
var tabnames=[];
var tabids=[];
$('.tab-title').each(function() { tabnames.push($(this).text()); });
$('.tab').each(function() { tabids.push($(this).data("name")); });
tabids = $.grep(tabids,function(n){ return n == 0 || n });
for (let i=0;i<=tabnames.length-1;i++) { collapseTabs(tabnames[i],tabids[i]); }
function collapseTabs(tabname,tabid) {
// Collapsible tabs for Service Identifier
$('h2:contains('+tabname+')').filter(function() { return $(this).text() === tabname; }).html(tabname+" <span id='"+tabname.replaceAll(' ', '')+"_collapseId' class='glyphicon glyphicon-triangle-top' style='float: right;margin-top: 2px;margin-right: 4px;'></span><span id='"+tabname.replaceAll(' ', '')+"_expandId' class='glyphicon glyphicon-triangle-bottom' style='float: right;margin-top: 2px;margin-right: 4px;'></span>");
// Hide all sections
$('#'+tabname.replaceAll(' ', '')+'_collapseId').hide();
$('#'+tabname.replaceAll(' ', '')+'_expandId').show();
$("div[data-name='"+tabid+"']").fadeOut();
// Show expand icon, hide collapse icon and show respective tab on click of collapse icon
$('#'+tabname.replaceAll(' ', '')+'_collapseId').click(function () {
$('#'+tabname.replaceAll(' ', '')+'_expandId').show();
$('#'+tabname.replaceAll(' ', '')+'_collapseId').hide();
$("div[data-name='"+tabid+"']").fadeOut();
});
// Show collapse icon, hide expand icon and show respective tab on click of expand icon
$('#'+tabname.replaceAll(' ', '')+'_expandId').click(function () {
$('#'+tabname.replaceAll(' ', '')+'_collapseId').show();
$('#'+tabname.replaceAll(' ', '')+'_expandId').hide();
$("div[data-name='"+tabid+"']").fadeIn(500);
});
}
});
Save and sync your changes and browse to your page. What you should now have are collapsible tabs for each of the tabs on the form.
You should be able to expand and collapse each of the tabs by clicking on their respective arrows.
Hopefully you find this as helpful as I did.
*This post is locked for comments