What do you guys think of this idea? Have you found a workaround to be able to achieve the same?https://community.progress.com/community_groups/products_enhancements/i/rollbase/load_all_rollbase_menus.aspx
Hello matman,
Did you manage to get this working? I am rather curious on how you implement this one.
Thank you,
Gian
Hi Gian,
I managed to implement this using tedious hard work. Unfortunately the tabs seem to be generated server-side and I couldn't find a quick way to fetch them. Instead of fetching them server-side, I decided to implement this by copying the html of the active tab and adjusting it's CSS classes and IDs. This is a bit annoying so I added some things to make it more easy.
In the header and footer, I added the following code to replace the original tabs:
<script> $(function() { var menuCodesRegularUser = [ 'Tab 1', 'Tab 2', 'Tab 3', 'Tab 4' ]; var menuCodesAdministrator = [ 'Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5' ]; var menuCodes; if("{!#CURR_USER.role#value}" == "Administrator") menuCodes = menuCodesAdministrator; else menuCodes = menuCodesRegularUser; var tabs = $(".rbs_tab"); for(var i = 0; i < tabs.length; i++) { if(tabs[i].id != "rbe_selectedTab" && i in menuCodes) { $(tabs[i]).replaceWith(menuCodes[i]); } } }); </script>
The menuCodesAdministrator and menuCodesRegularUser arrays will be filled with the html of the active tabs. To retrieve the code of these active tabs easier I added the following code to my header and footer:
<script> function escapeHtml(text) { var map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, function(m) { return map[m]; }); } function getFormattedTab() { var tab = $("#rbe_selectedTab").get(0).outerHTML; tab = tab.replace(" id=\"rbe_selectedTab\"", ""); tab = tab.replace("rbs_tab rbs_tab_selected dropdown rbs_tab_0", "rbs_tab rbs_tab_selected rbs_tab_rollover dropdown rbs_tab_0"); tab = tab.replace("rbs_tab rbs_tab_selected dropdown", "rbs_tab rbs_tab_selected rbs_tab_rollover dropdown"); tab = tab.replace("caret", "customCaret"); $("#rbe_tabs").after("<input type='text' size='100' value='" + escapeHtml(tab) + "'></input>"); } </script>
GetFormattedTab() retrieves the html of the active tab on-page and manipulates it so it will look the way I want it to. It outputs the altered html to an input field, which will look on the page like this:
I created another page and some scripts and html components so I can enter all this tab code and have the menuCodesAdministrator etc. created for me:
Script of this page:
<script> function generateFields(nrOfFields) { var fields = ""; for(var i = 0; i < nrOfFields; i++) fields += "<input type='text' name='field_" + i + "' id='field_" + i + "' /><br /><br />"; var fieldDivId = "fields"; $("#" + fieldDivId).html(fields); } function generateResult(selected) { var result = ""; if(selected == "Administrator") result += "var menuCodesAdministrator = [\n"; else if(selected == "RegularUser") result += "var menuCodesRegularUser = [\n"; $("input[id^='field_']").each(function() { result += "'" + this.value + "',\n"; }); result += "];"; result = escapeHtml(result); result = result.replace(/\n/g, "<br />"); $("#result").html(result); } $(function() { var selected = "Administrator"; var numberOfFields = 5; generateFields(numberOfFields); $("input[type='radio'][name='role']").change(function() { selected = this.value; if(this.value == "Administrator") numberOfFields = 5; else if(this.value == "RegularUser") numberOfFields = 4; generateFields(numberOfFields); }); $("#generate").click(function() { generateResult(selected); }); }); </script>
HTML of this page:
<div style='padding: 25px;'> <input type='radio' value='Administrator' name='role' checked /> Administrator<br /> <input type='radio' value='RegularUser' name='role' /> Regular user<br /><br /> <div id='fields'> </div> <input type='button' class='btn btn-small' value='Generate!' name='generate' id='generate' /><br /><br /> <div id='result' style='border: 1px solid black; padding: 15px;'> </div> </div>
Now that I've generated the array of manipulated tab code, I must replace the array in my header and footer. The last thing to add to your header and footer is the CSS code I used to make the tabs appear differently. The CSS code is:
<style> .rbs_tab .caret { border-top: 5px solid #0576A8; } .rbs_tab .customCaret { display: inline-block; width: 0px; height: 0px; vertical-align: top; border-top: 5px solid #CCC; border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; margin-top: 4px; } .rbs_tab:hover .customCaret { border-top: 5px solid #0576A8; } .rbs_tab_selected.open .customCaret { display: inline-block; width: 0px; height: 0px; vertical-align: top; border-top: 5px solid #FFF; border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; margin-top: 4px; } </style>
Sorry if I posted too much information, I wanted to make a bit of a tutorial out of it. I suppose this solution is not exactly great, but it works. I would appreciate it if this could be added to Rollbase. ( Please upvote this idea: https://community.progress.com/community_groups/products_enhancements/i/rollbase/load_all_rollbase_menus.aspx )