XPages and Me

My Journey into XPages Development

Dabbling in Bootstrap and Font Awesome Part 6-6: (re)Use Me! (Navbar)

In this post, I will show you how I set up my Bootstrap navigation bar. I know there are already many different posts out there on that. The difference with mine is, that I am using a profile document to define, what kind of navigation bar is being used across the whole application.

In addition, the profile document is also being used to manage the Bootstrap container type and field sizing (more about that in another post).

So, lets begin.

DB Profile Form:

In my applications that use Bootstrap I have a DB Profile form with the following fields for:

For: Type: Values: Field Name:
Navbar Type Radio Button Default
Fixed
Static
iTxtNavBarType
Navbar Look Radio Button Default
Inverse
iTxtNavBarLook
Navbar Container Type Radio Button Default
Fluid
iTxtNavBarContainerType
Container Type Radio Button Default
Fluid
iTxtContainerType
Field Size Radio Button Large
Default
Small
iTxtFieldSize

Obviously, you can name the fields on your profile anyway you see fit.

Additionally, I have a field for the “Key” on it, by which I can get a hold of the DB Profile document in a sorted view by using “getDocumentByKey”. The key I use is “.DBProfile”.

View:

Create a view that’ll contain the DB Profile document from where you can access it in the JavaScript code below. My view’s alias is “$vwSYSLookupKeywords”.

Application Layout Custom Control:

Property Definition:

Create a new custom control and give it a name (I named mine ccSYS_BS_AppLayout). Open the “Property Definition” tab and add the two following properties:

Name: applicationTitle
Type: string
Editor: none
Description: Enter the title of your application, that you’d like to have displayed in the navigation bar
Required Field: yes
Name: showHomeLink
Type: boolean
Editor: ComboBox
Parameters: true
false
Default Value: true
Description: Select if you’d like to have the application title work as the ‘Home’ link.Default: true
Required Field: no

Divs:

Add two divs into the custom control, name the first one “divNavbar” and the second one “divContainer”. Select the first div, open the “All Properties” tab, locate the property “role” under the section “accessibility” and type “navigation” into the field:

Image 1

Scroll down to the “Styling” section and click on the blue diamond beside the property “styleClass” and select “Compute value…”. In the script editor prompt make sure the language selected is “JavaScript (Server Side)” and condition is selected as “Compute Dynamically”, then enter the following code:

//Declarations
	//Notes Objects
	var oView:NotesView = database.getView('$vwSYSLookupKeywords');
	var oDocDBProfile:NotesDocument = oView.getDocumentByKey('.DBProfile', true);

	//String
	var sStyleClass:String = '';

	//Check if a DB Profile was found.
	//If not, just display default NavBar
	if(oDocDBProfile == null){
		sStyleClass = 'navbar navbar-default';
	}
	else{

		//Make sure the fields 'iTxtNavBarType' and/or 'iTxtNavBarLook' are not empty.
		//If they are, just display default NavBar
		if(oDocDBProfile.getItemValueString('iTxtNavBarType') == '' || oDocDBProfile.getItemValueString('iTxtNavBarLook') == ''){
			'navbar navbar-default';
		}
		else{
			sStyleClass = 'navbar'

		//First check for the NavBar type
			switch (oDocDBProfile.getItemValueString('iTxtNavBarType')){

			//Static
				case 'Static':
					sStyleClass += ' navbar-static-top';
				break;

			//Fixed
				case 'Fixed':
					sStyleClass += ' navbar-fixed-top';
				break;
			}	//switch (oDocDBProfile.getItemValueString('iTxtNavBarType'))

		//Next, check if inverted NavBar was selected
			if(oDocDBProfile.getItemValueString('iTxtNavBarLook') == 'Inverse'){
				sStyleClass += ' navbar-inverse';
			}
			else{
				sStyleClass += ' navbar-default';
			}	//if(oDocDBProfile.getItemValueString('iTxtNavBarLook') == 'Inverse')
		}	//if(oDocDBProfile.getItemValueString() == '' || oDocDBProfile.getItemValueString() == '')
	}	//if(oDocDBProfile == null)

	return sStyleClass;

Click on “OK” to close the prompt.

So, what does that do? The code reads the settings in your DB Profile document and applies the style classes to the navbar, based on the selections you’ve made.

Next, select the second div and give it a name (I named mine “divContainer”). Open the “Style” tab, click on the blue diamond beside “Class:” and select “Computed value…”. In the script editor prompt make sure the language selected is “JavaScript (Server Side)” and condition is selected as “Compute Dynamically”, then enter the following code:

//Declarations
	//Notes Objects
	var oView:NotesView = database.getView('$vwSYSLookupKeywords');
	var oDocDBProfile:NotesDocument = oView.getDocumentByKey('.DBProfile', true);

	//String
	var sStyleClass:String = '';

	//Check if a DB Profile was found.
	//If not, just apply the default container class
	if(oDocDBProfile == null){
		sStyleClass = 'container';
	}
	else{

		//If the field 'iTxtContainerType' is empty or the value is 'Default' apply the default container class
		if(oDocDBProfile.getItemValueString('iTxtContainerType') == '' || oDocDBProfile.getItemValueString('iTxtContainerType') == 'Default'){
			sStyleClass = 'container';
		}
		//If 'Fluid' was selected, apply the container-fluid styel class
		else{
			sStyleClass = 'container-fluid';
		}	//if(oDocDBProfile.getItemValueString('iTxtContainerType') == '' || oDocDBProfile.getItemValueString('iTxtContainerType') == 'Default'){
	}	//if(oDocDBProfile == null)

	return sStyleClass;

Click on “OK” to close the prompt.

Again, the code reads the DB Profile and applies the style classes to your content container, based on your selections.

Next, add three more divs to your custom control and name them “divNavbarContainer”, “divNavbarHeader” and “divNavBarMenu”. Select “divNavbarContainer”, open the “Style” tab, click on the blue diamond beside “Class:” and select “Computed value…”. In the script editor prompt make sure the language selected is “JavaScript (Server Side)” and condition is selected as “Compute Dynamically”, then enter the following code:

//Declarations
	//Notes Objects
	var oView:NotesView = database.getView('$vwSYSLookupKeywords');
	var oDocDBProfile:NotesDocument = oView.getDocumentByKey('.DBProfile', true);

	//String
	var sStyleClass:String = '';

	//Check if a DB Profile was found.
	//If not, just display default container
	if(oDocDBProfile == null){
		sStyleClass = 'container';
	}
	else{
		//Make sure the field 'iTxtNavBarContainerType'
		//If it is empty, apply default container
		if(oDocDBProfile.getItemValueString('iTxtNavBarContainerType') == ''){
			sStyleClass = 'container';
		}
		else{
			switch (oDocDBProfile.getItemValueString('iTxtNavBarContainerType')){

			//Static
				case 'Default':
					sStyleClass += 'container';
				break;

			//Fixed
				case 'Fluid':
					sStyleClass += 'container-fluid';
				break;
			}	//switch (oDocDBProfile.getItemValueString('iTxtNavBarContainerType'))
		}	//if(oDocDBProfile.getItemValueString('iTxtNavBarContainerType') == '')
	}	//if(oDocDBProfile == null)

	return sStyleClass;

Click on “OK” to close the prompt.
Set the style classes for the other two divs as follows:

Div: Style Classes:
divNavbarHeader navbar-header
divNavBarMenu navbar-collapse collapse

In the “Outline”, drag-and-drop the divs “divNavbarHeader” and “divNavBarMenu” into the div “divNavbarContainer”. Then drag-and-drop the div “divNavbarContainer” into the div “divNavbar”. Your outline should now look something like this:

Image 2

Link and Label:

Here we are going to use the Property Definitions. Based on your selection for “showHomeLink”, you’ll either have a “Home” link or just a title.

Drag-and-drop a “Link” and a “Label” control onto your custom control. Select the link and give it a name (I named mine “actHome”). Click on the diamond beside “Visible” and select “Compute value…”. In the script editor prompt, make sure the language selected is “Expression Language” and condition is “Compute on Page Load”, then enter the following EL code:

compositeData.showHomeLink

Click on “OK” to close the prompt.

Click on the diamond beside “Link type:” and select “Compute value…”. In the script editor prompt make sure the language selected is “JavaScript (Server Side)” and condition is “Compute Dynamically”, then enter the following JavaScript code:

'/' + database.getFilePath().replace('\\', '/')

This will computed the URL to your application and serve as a “Home” button.
Lastly, click on the diamond beside “Label” and select “Compute value…”. In the script editor prompt, make sure the language selected is “Expression Language” and condition is “Compute on Page Load”, then enter the following EL code:

compositeData.applicationTitle

Click on “OK” to close the prompt.

Open the tab “Style” and enter “navbar-brand” into the field “Class:”.
Select the label and give it a name (I named mine “idTxtApplicationTitle”). Click on the diamond beside “Label” and select “Compute value…”. In the script editor prompt, make sure the language selected is “Expression Language” and condition is “Compute on Page Load”, then enter the following EL code:

compositeData.applicationTitle

Click on “OK” to close the prompt, then click on the diamond beside “Visible” and select “Compute value…”. In the script editor prompt, make sure the language selected is “Expression Language” and condition is “Compute on Page Load”, then enter the following EL code:

!compositeData.showHomeLink

Click on “OK” to close the prompt, then open the tab “Style” and enter “navbar-brand” into the field “Class:”.

Drag-and-drop the link and the label into the div “divNavbarHeader” and the outline should now look something like this:

Image 3

Add HTML:

The HTML code will make sure that the menu will collapse into the “Hamburger” button, if the screen size gets smaller.

Select “divNavbarHeader” from the outline and then switch to the “Source” view:

Image 4

Copy this HTML:

<button
	type='button'
	class='navbar-toggle'
	data-toggle='collapse'
	data-target='.navbar-collapse'>
	<span class='sr-only'>Toggle Navigation</span>
	<span class='icon-bar' />
	<span class='icon-bar' />
	<span class='icon-bar' />
</button>

and paste it between the div opening tag and the link opening tag:

Image 5

Your source should now look like this:

Image 6

Switch back to the “Design” view.

Editable Areas:

Drag-and-drop two “Editable Area” controls into your custom control.

Select the first one, enter “callbackMenuItems” into the field “Name:” and “menuItemsFacet” into the field “Facet name:”.

Select the second one, enter “callbackContent” into the field “Name:” and “contentFacet” into the field “Facet name:”.

In the outline, drag-and-drop “callbackMenuItems” into the div “divNavBarMenu” and “callbackContent” into the div “divContainer”. Your outline should now look like this:

Image 7

Design Definition:

Select the Custom Control from the outline, open the tab “Design Definition” and enter the following XSP markup:

<?xml version='1.0' encoding='UTF-8'?>
<xp:view xmlns:xp='http://www.ibm.com/xsp/core'>
	<xp:panel>
		Navigation Bar
		Add your menu items here:<br/>
		<xp:callback facetName='menuItemsFacet'></xp:callback>
		<br/>
		Add content here:<br/>
		<xp:callback facetName='contentFacet'></xp:callback>
	</xp:panel>
</xp:view>

Save and close your custom control and you are ready to use it. Simply add it to another custom control or straight to an XPage and then you can plug in your menu and content.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: