Loading all tabs and submenus in Rollbase

Posted by matman on 12-Dec-2014 07:13

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

All Replies

Posted by Sri Harsha on 06-Jan-2015 22:32

Hi,

If you are looking for a way to add sub menu to an existing tab, Rollbase already has a way to achive it.

For example, I have two objects A and B. I have created a new tab for object B and setting the parent tab as A, it gives the following UI.

Is this what your are looking for ?

Posted by matman on 07-Jan-2015 02:39

Hi skoppel, no I am looking for something more similar to this: (which I managed to implement)

I want to be able to view a tab's menu from another active tab.

Posted by Gian Torralba on 12-Jan-2015 14:24

Hello matman,

Did you manage to get this working? I am rather curious on how you implement this one.

Thank you,

Gian

Posted by matman on 13-Jan-2015 03:03

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 = {
			'&': '&amp;',
			'<': '&lt;',
			'>': '&gt;',
			'"': '&quot;',
			"'": '&#039;'
		};

		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 )

This thread is closed