XPages and Me

My Journey into XPages Development

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

Today, I will create two additional, reusable custom controls for Bootstrap’s Input Group. Input groups allow you to add text, icons or buttons before, after or on both sides of any text-based input. For more information, please follow this link.

In addition to creating the two custom controls, I will also demonstrate a little bit, how to use the “Visible” property for property definitions.

Input Custom Control

1. Add additional controls

Instead of starting completely from scratch, I’ll just make a copy of the Control Wrapper custom control I’ve created in part 6-1 and enhanced in part 6-2, and rename it to “ccSYS_BS_InputGroupWrapper”. Open the custom controls and add the following controls:

1 x Div

4 x Span

4 x Computed Field

To add the Div and Spans, you’ll need to double-click on “Other…” in the “Controls” tab, which will open the “Create Control” prompt. The Div can be found under the category “Container Controls” and the Spans can be found under the category “Core Controls”.

After adding the controls, your custom control should now look something like this:

Image 2

Select each of the added controls and give them a meaningful name. This is important to keep an overview over what control does what. Here is how I named mine:

Div: divInputGroup

Spans: spanAddonIconLeft, spanAddonTextLeft, spanAddonIconRight, spanAddonTextLeft

Computed Fields: idTxtIconLeft, idTxtTextLeft, idTxtIconRight, idTxtTextRight

Your custom control should now look something like this:

Image 1

2. Add Property Definitions

Before we continue with the controls, we need to add some Property Definitions to the custom control. Select the custom control in the outline and open the “Property Definition” tab. The first property I am going to add is called “addonPosition” and has the following properties:

Name: addonPosition
Type: string
Editor ComboBox
Parameters: left
right
both
Description: Select the position where the field add-on should be displayed.Default is empty
Required Field: yes

Note: The “Required Field” option can be found under the tab “Validation”:

Image 3

Next, add two groups and name them “addonLeft” and “addonRight”. What I want to do here is, when I use this custom control, I want these custom properties groups displayed or hidden, based on the selection made for “addonPosition”.

Select the first group and open the tab “Visible”:

Image 4

Then enter the following JavaScript:

addonPosition == 'left' || addonPosition == 'both';

Next, select the second group, open the “Visible” tab and enter the following JavaScript:

addonPosition == 'right' || addonPosition == 'both'

So, what does that do? When you use the custom control in another custom control or XPage, the two groups are initially not visible:

Image 5

If you select “left” as the addonPosition, the group addonLeft is being displayed:

Image 6

If you select “right” as the addonPosition, the group addonRight is being displayed:

Image 7

If you select “both” as the addonPosition, both groups are being displayed:

Image 8

Pretty neat, huh?

Lets get back to adding the property definitions. Select the first property under the group “addonLeft” and change the properties as follows:

Name: addonType
Type: string
Editor ComboBox
Parameters: text
icon
Description: Select the type of the field add-on.
Required Field: no

Add a second property to the group and change the properties as follows:

Name: addonContent
Type: string
Editor -none-
Parameters: -none-
Description: Enter the content of the field add-on.If you selected “text” as the addonType, enter plain text.If you selected “icon” as the addonType, enter the name of the Font Awesome icon (i.e. fa-check)
Required Field: no

Now, do the same thing for the group “addonRight” and your property definition should look something like this:

Image 9

3. Change Control Properties

Next, I’ll make further changes to the controls I’ve added before. Select the Div, open the “Style” tab and type “input-group” into the field “Class”:

Image 10

Select the first Span (spanAddonIconLeft), open the “All Properties” tab and locate the property “loaded” under the section “basics”. Click on the blue diamond beside “loaded”, select “Compute value…” and in the script editor prompt, select “Expression Language” as the language and enter the EL expression:

(compositeData.addonPosition eq 'left' || compositeData.addonPosition eq 'both') && compositeData.addonLeft.addonType eq 'icon' && !empty compositeData.addonLeft.addonContent

Close the prompt, scroll down to the section “Styling” and enter “input-group-addon” into the field “styleClass”. All properties should now look something like this:

Image 11

Repeat the same for the other three Spans with the following code for loaded:

spanAddonTextLeft

(compositeData.addonPosition eq 'left' || compositeData.addonPosition eq 'both') && compositeData.addonLeft.addonType eq 'text' && !empty compositeData.addonLeft.addonContent

spanAddonIconRight

(compositeData.addonPosition eq 'right' || compositeData.addonPosition eq 'both') && compositeData.addonRight.addonType eq 'icon' && !empty compositeData.addonRight.addonContent

spanAddonTextRight

(compositeData.addonPosition eq 'right' || compositeData.addonPosition eq 'both') && compositeData.addonRight.addonType eq 'text' && !empty compositeData.addonRight.addonContent

Select the first computed field (idTxtIconLeft) and open the “All Properties” tab. Make sure the property “escape” under the section “basics” is set to “true” and enter “i” into the property “tagName”. Locate the property “styleClass” under the section “styling”, click on the blue diamond and select “Compute value…”. In the script editor prompt make sure that “JavaScript (Server Side)” is selected as the language and “Compute on Page Load” as the condition. Then enter the following code:

'fa ' + compositeData.addonLeft.addonContent

Your “All Properties” should now look something like this:

Image 12

Repeat the same steps for the computed field “idTxtIconRight”, but add the following JavaScript for the styleClass:

'fa ' + compositeData.addonRight.addonContent

Next, select the computed field “idTxtTextLeft”, open the “All Properties” tab and make sure that “escape” is set to “true”. Locate the property “value” under the section “data”, click on the blue diamond beside it and select “Compute value…”. In the script editor prompt, make sure the selected language is “Expression Language” and “Condition” is set to “Compute on Page Load”. Then enter the following EL expression:

compositeData.addonLeft.addonContent

Your “All Properties” should now look like this:

Image 13

Repeat the same for the other computed field “idTxtTextRight” but as an EL expression, enter the following:

compositeData.addonRight.addonContent

4. Rearrange Controls

Next, we need to rearrange the controls.

In the Outline tab, drag-and-drop the computed fields into the spans as follows:

idTxtIconLeft spanAddonIconLeft
idTxtTextLeft spanAddonTextLeft
idTxtIconRight spanAddonIconRight
idTxtTextRight spanAddonTextRight

After that, the outline should look something like this:

Image 14

Now we need to drag-and-drop and arrange the spans and the editable area in the div “divInputGroup”. Drag-and-drop the elements in the following order:

spanAddonIconLeft
spanAddonTextLeft
Editable Area
spanAddonIconRight
spanAddonTextRight

The outline of the custom control should now look like this:

Image 15

Lastly, we need to position the div “divInputGroup” between the label “lblControl” and the computed field “idTxtHelpBlock”. After that, the outline should now look like this:

Image 16

5. Add Design Definition

The last thing I need to do is to add xml markup to the design definition. Open the “Design Definition” tab and enter the following xml markup:

<?xml version='1.0' encoding='UTF-8'?>
<xp:view xmlns:xp='http://www.ibm.com/xsp/core'>
	<xp:panel>
		Control Wrapper Input Group<br></br>
		<xp:callback></xp:callback>
	</xp:panel>
</xp:view>

And that’s it, save and close the custom control

Next, I’ll create the Input Group custom control that can be used with buttons.

Input Custom Control with Buttons.

1. Add additional controls

To start, I make a copy of the custom control I’ve just created and rename it to “ccSYS_BS_InputGroupWrapperBtn”. Next, add the following controls to the custom control:

2 x Span

2 x Editable Area

The custom control should now look like this:

Image 17

Select each control and give it the following names:

Spans: spanAddonBtnLeft, spanAddonBtnRight

Editable Areas:

Name: Facet Name:
callbackButtonLeft buttonLeftFacet
callbackButtonRight buttonRightFacet

The custom control should now look something like this:

Image 18

2. Add Property Definiton

I need one additional property definition, so, open the “Property Definition” tab, add a property to the root and change the settings as follows:

Name: addonBtnPosition
Type: string
Editor ComboBox
Parameters: left
right
Description: Select the position where the button add-on should be displayed. Default is empty
Required Field: yes

The list of property definitions should now look something like this:

Image 19

3. Change Control Properties

Next, I need to make further changes to the controls I’ve added. Select the first Span (spanAddonBtnLeft), open the “All Properties” tab and locate the property “loaded” under the section “basics”. Click on the blue diamond beside “loaded”, select “Compute value…” and in the script editor prompt, select “Expression Language” as the language and enter the EL expression:

compositeData.addonBtnPosition eq 'left'

Close the prompt, scroll down to the section “Styling” and enter “input-group-btn” into the field “styleClass”. All properties should now look something like this:

Image 20

Repeat the same for the other Span with the following EL expression for loaded:

spanAddonBtnRight
compositeData.addonBtnPosition eq 'right'

Next, select the editable are that is being used for the field, and enter “controlFacet” as the “Facet Name”:

Image 21

4. Rearrange Controls

Next, I need to rearrange the controls.

In the Outline tab, drag-and-drop the editable areas into the spans as follows:

callbackButtonLeft spanAddonBtnLeft
callbackButtonRight spanAddonBtnRight

After that, the outline should look something like this:

Image 22

Now I need to put the two spans into the div “divInputGroup”. Drag-and-drop the span “spanAddonBtnLeft” above “spanAddonIconLeft” and “spanAddonBtnRight” below “spanAddonTextRight”:

Image 23

5. Add Design Definition

The last thing I need to do is to add xml markup to the design definition. Open the “Design Definition” tab and enter the following xml markup:

<?xml version='1.0' encoding='UTF-8'?>
<xp:view xmlns:xp='http://www.ibm.com/xsp/core'>
	<xp:panel>
		Control Wrapper Input Group with Button<br></br>
		<xp:callback facetName='buttonLeftFacet'></xp:callback>
		<xp:callback facetName='controlFacet'></xp:callback>
		<xp:callback facetName='buttonRightFacet'></xp:callback>
	</xp:panel>
</xp:view>

What will this do? It will display only the text “Control Wrapper Input Group with Button” and provide you with 3 editable areas to plug in your field and a button, either to the left or the right of the field.

Save and close your custom control and you are done.

And that’s it. Next time, I’ll show you how to use all this stuff and it is going to be my first NotesIn9 video!

Enjoy!

Advertisements

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

  1. Ursus Schneider September 2, 2014 at 9:44 am

    I have been following your blog posts and am looking forward to 6-4 when we can start using them :o) Thank you for all your hard work!

  2. Ursus Schneider September 2, 2014 at 11:30 am

    After following your example to the letter I have a small question regarding the directions – when rearranging the controls (4. Rearrange Controls) it seems if the “callbackControl Editable Area” has moved in between your “Span content” lines although you do not describe it that way. Did I miss something or is that an error.

    Sorry to ask the question here but I could not find a link to your email address.

    Would it be possible for you to post an example database so that I can check if I have done everything correctly?

    Thank you again for your hard work
    Ursus

  3. Csaba Kiss November 30, 2014 at 3:08 am

    I get Exception error whenever I try to add an InputGroupWrapper. I tried it twice already from scratch. (compositeData.addonPosition eq ‘left’ || compositeData.addonPosition eq ‘both’) && compositeData.addonLeft.addonType eq ‘text’ && !empty compositeData.addonLeft.addonContent
    Encountered “\u2018”, expected one of …

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: