XPages and Me

My Journey into XPages Development

Diving into Bootstrap and Font Awesome – Part 2: Enhancing the Bootstrap Panel Custom Control

As I’ve mentioned in my post “Dabbling in Bootstrap and Font Awesome Part 7: All these shiny new toys! What now?”, using responsive UI frameworks and creating web apps for mobile devices, forces us developers to rethink the way we set up an application’s UI.

With Bootstrap’s grid system, you can put content pretty much wherever you like and using Bootstrap panels, you can organize your content in a way that makes sense and looks good, be it on a desktop or a mobile device.

If you have used the Bootstrap Panel yet, you might have noticed, that it expands to the height of the content inside. That can be problematic:

  • On a mobile device: If you display a rather long form inside a panel on a mobile device, and you have action buttons in the footer of the panel, you”ll have to scroll all the way down to get to the buttons. Not very helpful if you are to review a request.
  • Having two or more panels side-by-side: One panel might stretch far beyond the bottom of your screen while the other one doesn’t. If your first panel contains a view or repeat control with your documents and your second panel is used to display information based on the document you’ve selected, you might have to scroll all the way down, select the document and have to scroll all the way up again.
  • Nice look-and-feel: If one panel is very long and the others on your page are rather short, that doesn”t look so nice.

Of course, there are many different ways to solve these issues. My solution to this is, to allow to set a fixed height on the panel body and, if the content is longer than the height, to display a scroll bar, so, you can scroll thru your content.

In order for that to work, we need to add a few things to the panel custom control I’ve posted about in part 6-8 of my “Dabbling in Bootstrap and Font Awesome” series, so, lets get started

Enhancing the Bootstrap Panel Custom Control

Step 1: Add Additional Custom Properties

Open the panel custom control and then click on the “Property Definition” tab, as we need to add the following custom properties:

Name: panelHide
Type: string
Editor: ComboBox
Parameters: no
yes
Default Value: no
Description: Select “yes”, if the panel should be hidden initially

Default value is no

Required Field: no
Name: panelID
Type: string
Editor: – none –
Parameters: – none –
Default Value: – none –
Description: ID of the panel. This is necessary if you want to animate the panel with JQuery
Required Field: yes
Name: panelHeightFixed
Type: string
Editor: ComboBox
Parameters: yes
no
Default Value: no
Description: Select “yes”, if you want the panel’s height to be fixed. If you select “no”, the panel will expaned based on the content, until it reaches the height set in panelHeightMax.

Any setting for this property will be ignored, if panelHeightMax is not set.

Default: no

Required Field: no
Name: panelHeightMax
Type: string
Editor: – none –
Parameters: – none –
Default Value: – none –
Description: Enter the maximum height of the panel. Leave blank, if you don”t want a maximum height.

Note: If you enter a maximum height and there is a possibility that the content of the panel overflows, make sure you set panelEnableScroll to “yes”

Required Field: no
Name: panelEnableScroll
Type: string
Editor: ComboBox
Parameters: yes
no
Default Value: no
Description: Set to “yes”, if you”ve defined a maximum height and there is a possibility for the content to overflow.

Any setting for this property will be ignored, if panelHeightMax is not set.

Default: no

Required Field: no

Your list of properties should now look like this:

Image 1

So, what are these additional properties for?

  • panelHide: Will determine if to set the style of the panel’s container div to “display:none”
  • panelID: Will assign an ID to the panel’s container div, that we can reference in a JQuery selector
  • panelHeightFixed: If you set a value for panelMaxHeight and select “yes”, the panel body’s height will be fixed and not expand until it reaches panelMaxHeight.
  • panelMaxHeight: Defines how high the panel body can be.
  • panelEnableScroll: When setting panelMaxHeight and the content is larger than that, it will bleed outside the panel body. Setting this property to “yes”, will automatically enable a scroll-bar, once the content of the panel body hits max height.

Step 2: Configure Controls

Select the Div “divPanel”, open the “All Properties” tab and under the section “basics” click on the blue diamond beside the field “id”, then select “Compute value…”. In the script editor prompt, select “Expression Language” as the language, then enter the following expression:

compositeData.panelID

Scroll all the way down to the section “styling”, click on the blue diamond beside the field “style” and select “Computed value…”. In the script editor prompt, select “JavaScript (Server Side)” as the language and “Compute on Page Load” as the condition, then enter the following JavaScript code:

if(compositeData.panelHide == 'yes'){
	'display:none';
}

Next, select the div “divPanelBody”, open the “All Properties” tab and scroll all the way down to the section “styling”. Click on the blue diamond beside the field “style” and select “Computed value…”. In the script editor prompt, select “JavaScript (Server Side)” as the language and “Compute on Page Load” as the condition, then enter the following JavaScript code:

//Declarations
	//String
	var sStyle:String = '';
	
//Check selections made for panelHeightFixed, panelHeightMax and panelEnableScroll
//Build style string accordingly

	//panelHeightMax
	if(compositeData.panelHeightMax != null && compositeData.panelHeightMax !=''){
		sStyle += 'max-height: ' + compositeData.panelHeightMax;
		
		//panelHeightFixed
		if(compositeData.panelHeightFixed == 'yes'){
			sStyle += ';height: ' + compositeData.panelHeightMax;
		}
		
		//panelEnableScroll
		if(compositeData.panelEnableScroll == 'yes'){
			sStyle += ';overflow-y: auto;'
		}
	}
	
	return sStyle

Save your changes and you are all set.

In the upcoming parts of my new series, I’ll show you examples of, how you can use the panels. And yes, we will animate them.

Enjoy!

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: