XPages and Me

My Journey into XPages Development

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

Today, I am going to show you how to set up a reusable custom control for a Bootstrap Modal.

Step 1: Add Property Definitions

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

Name: modalID
Type: string
Editor: – none –
Parameters: – none –
Default Value: – none –
Description: The ID of the modal. Used to open and close the modal
Required Field: yes
Name: modalSize
Type: string
Editor: ComboBox
Parameters: regular
large
small
Default Value: regular
Description: Select the size of the modal.Default: regular
Required Field: no
Name: modalTitle
Type: string
Editor: – none –
Parameters: – none –
Default Value: – none –
Description: Title to be displayed in the modal header.
Required Field: yes
Name: modalAllowESC
Type: string
Editor: ComboBox
Parameters: true
false
Default Value: true
Description: Enables or disables the ability to close the modal by pressing ESC.Default: true
Required Field: no
Name: modalAnimated
Type: string
Editor: ComboBox
Parameters: yes
no
Default Value: yes
Description: For modals that simply appear rather than fade in to view, select no, otherwise select yes.Default: yes
Required Field: no

Step 2: Add controls to custom control

Add the following controls to your custom control:

6 Divs

2 Editable Areas

2 Spans

1 Button

1 Computed Field

1 FA Icon Custom Control

Note: The Div and Span controls are not in the list of “Container Controls”, “Core Controls” respectively. You can find them by double-clicking on “Other…”. Span can be found under the category “Core Controls” and Div can be found under the category “Container Controls”. In order to not having to double-click on “Other…” 6 times for the divs, add one div, then select it in the “Design” panel and copy-and-paste it.

Divs:

The divs are used to build the structure of the modal.

Div 1:

Select the first div and open the “All Properties” tab. Enter “dialog” into the field “role” under the section “accessibility”:

Image 1

By clicking on the “+” button beside the field “attrs under the section “basics”:

Image 2

add the following 5 attributes:

Attribute Name: Attribute Value:
tabindex -1
aria-labelledby Computed Value
Language: JavaScript (Server Side)
Condition: Compute Dynamically

'my' + compositeData.modalID
aria-hidden true
data-keyboard Computed Value
Language: Expression Language
Condition: Compute on Page Load

compositeData.modalAllowESC
data-backdrop static

If you look at the source of your div, the attribute list should look something like this now:

Image 3

Next, click on the blue diamond beside the property “id” (still under the section “basics”) and click on “Compute value…”. In the script editor prompt, select the language “Expression Language” then enter the following expression:

compositeData.modalID

Click on “OK” to close the prompt.

Lastly, scroll all the way down to the section “styling”, click on the blue diamond beside the property “styleClass” and select “Compute value…”. In the script editor prompt select “JavaScript (Server Side)” as the language and “Compute Dynamically” as the condition, then enter the following JavaScript code:

//Declarations
	//String
	var sModalClass:String = 'modal'

//Check if animation was activated
//If so, add style class for that
	if(compositeData.modalAnimated == 'yes'){
		sModalClass += ' fade';
	}

	return sModalClass

Click on “OK” to close the prompt.

Div 2:

Select the second div and give it a name (I’ve named mine “divModalDialog”). Open the category “Style”, click on the blue diamond beside the property “Class” and select “Compute value…”. In the script editor prompt, select “JavaScript (Server Side)” as the language and “Compute Dynamically” as the condition, then enter the following JavaScript code:

//Declarations
	//String
	var sModalDialogClass:String = 'modal-dialog';

//Check what modal size was selected and apply additional classes
	switch(compositeData.modalSize){
		case 'small':
			sModalDialogClass += ' modal-sm';
			break;

		case 'large':
			sModalDialogClass += ' modal-lg';
			break;
	}

	return sModalDialogClass

Click on “OK” to close the prompt

Div 3 – Div 6:

Name and set the style classes for the remaining divs as follows:

Name / Id: Style Class:
Div 3: divModalContent modal-content
Div 4: divModalHeader modal-header
Div 5: divModalBody modal-body
Div 6: divModalFooter modal-footer

Editable Areas:

The editable areas are serving as slots for your modal’s content and footer. When using the custom control, you would create the content and footer content each in an individual custom control and then plug them into their respective editable areas.

Set the name and facet name of the editable areas as follows:

Name: Facet Name:
Editable Area 1: callbackModalContent modalContentFacet
Editable Area 2: callbackModalFooter modalFooterFacet

Spans:

The spans are used to display the X in the top-right-corner of the modal and as screen reader flags. If you take a look at the Bootstrap Modal documentation, you’ll see that it uses “×” to render the X. This, however doesn’t work when using it in the XML markup, it will throw an error. That’s why I am using the FA Icon custom control (there is probably a work around for that, but I love to use FA).

Span 1:

Name the span “spanIcon”. Open the “All Properties” tab and under the section “basics” add the following attribute:

Image 4

Span 2:

Name the span “spanScreenReader”. Open the “Style” tab and enter “sr-only” int the field “Class”. Then switch to the “Source” view and type “Close” in between the <xp:span> tags:

Image 5

Button:

The button, together with the spans and FA Icon, will represent the X in the top-right corner of the modal. It will be visible, if the property “modalAllowESC” was set to true, otherwise it will be hidden.

Select the button and and open the “All Properties” tab. Under the section “basics” add the following attribute:

Image 6

Scroll further down and for the property “id” enter “btnEscape”:

Image 7

Scroll down a little more and click on the blue diamond beside the property “rendered” (still in the section “basics”), then click on “Compute value…”. In the script editor prompt, select “Expression Language” as the language and “Compute on Page Load” as the condition, then enter the following expression:

compositeData.modalAllowESC eq 'true'

This will make sure, that the X is only being displayed, if you allowed the user to close the modal by pressing “ESC”.

Click on “OK” to close the script editor.

Scroll all the way to the bottom and the “styling” section. Enter “close” into the the “styleClass” property field:

Image 8

Computed Field:

The computed field will display the modal’s title as an h4.

Select the computed field and open the “All Properties” tab. Under the section “basics” enter “idTxtModalTitle” into the “id” property field, then enter “h4” into the “tagName” property field.

Under the section “data”, click on the blue diamond beside “value” and select “Compute value…”. In the script editor prompt, select “Expression Language” as the language and “Compute on Page Load” as the condition, then enter the following expression:

compositeData.modalTitle

Click on “OK” to close the script editor.

The properties should now look like this:

Image 9

FA Icon Custom Control:

As mentioned before, the FA Icon Custom Control will display the X in the top-right corner.

Select the FA Icon Custom Control and apply the following settings:

Image 10

Now we’ve completed applying the settings / properties we need. Next, we are going to arrange the elements.

Step 3: Arranging the Elements:

If you take a look at your outline, it should look something like this:

Image 11

The first thing we are going to do is, to drag-and-drop the editable areas into their divs.

Editable area “callbackModalContent” goes into the div “divModalBody” and editable area “callbackModalFooter” goes into the div “divModalFooter”.

The outline should now look like this:

Image 12

Next, we are going to drag-and-drop the FA Icon into the span “spanIcon” and the outline should now look like this:

Image 13

Now, drag-and-drop the following elements into the button:

  1. Span “spanIcon”
  2. Span “spanScreenReader”

The outline should now look like this:

Image 14

Drag-and-drop:

  1. the button
  2. the computed field

into the div “divModalHeader”:

Image 15

Next, drag-and-drop:

  1. The div “divModalHeader”
  2. The div “divModalBody”
  3. The div “divModalFooter”

into the div “divModalContent”:

Image 16

Finally, drag-and-drop the div “divModalContent” into the div “divModalDialog”, and “divModalDialog” into the div “${compositeData.modalID}”:

Image 17

If you expand your whole outline, it should now look like this:

Image 18

Step 4: Design Definition:

Select “Custom Control” from the outline and open the tab “Design Definition”:

Image 19

Then enter the following XML markup into it:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:panel>
		Bootstrap Modal<br></br>
		<xp:callback facetName="modalContentFacet"></xp:callback>
		<xp:callback facetName="modalFooterFacet"></xp:callback>
	</xp:panel>
</xp:view>

Save and close the custom control

Step 5: Opening / closing the Modal:

To open or close a modal, all you have to do is to use “.modal()” (you could also use “.modal(‘show’)” and “.modal(‘close’)”). As this is JQuery code and we are using XPages, we need to add Mark Roden’s x$ jQuery Selector for XPages as a resource to our custom control / XPage (I’ve added the script to the web content folder and load it thru my theme).

Lets say, you’ve added the modal custom control to your custom control / XPage and entered the following for modalID:

Image 20

In the onclick-event of your button (or whatever you use to open the modal), you would enter the following Client Side JavaScript code:

x$('#{id:testModal}').modal();

If you were to use “.modal(‘show’)” and “.modal(‘hide’)”, your code would look like this

x$('#{id:testModal}').modal('show');
x$('#{id:testModal}').modal('hide');

And that’s it, enjoy!

Advertisements

2 responses to “Dabbling in Bootstrap and Font Awesome Part 6-7: (re)Use Me! (Modal)

  1. Csaba Kiss November 30, 2014 at 4:03 am

    Just a question: Why don’t you use boolean types for the modalAllowESC and the modalAnimated custom properties?

    • Daniel Friedrich November 30, 2014 at 5:26 pm

      Hello Csaba,

      to set the attribute for allowing or not allowing to close the modal by pressing the ESC button, you have to pass on the word “true”.

      For the animation, you have to either add or omit the class “fade” and I just stuck with the string values for true and false as with the true and false for the ESC button.

      Just my preferences.

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: