XPages and Me

My Journey into XPages Development

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

In Part 6-1 of my XPages and Bootstrap / Font Awesome series, I showed you how to create reusable custom controls in order to make XPages development easier and quicker again.

I know I’ve promised to show you in this part, how to use these custom controls. However, I thought I am going to add a few more reusable custom controls that might be helpful and in part 6-4, I will show you how to use them all (promise!).

So, in this part, I’ll enhance the Control Wrapper custom control I’ve created in part 6-1 and add another reusable Custom Controls: One for using Font-Awesome Icons

In part 6-3 I will show you how to create two reusable custom controls for Input Groups.

So, lets get started

Enhance Control Wrapper:

Open the custom control created in part 6-1 and drag-and-drop a “Display Error” beside the “Computed Field” for the help block text and give it a name (I named mine msgError):

Image 3

Beside the field “Show error messages for:” click on the blue diamond and select “Compute value…”. In the script editor, select “Expression Language” as the language and “Compute on Page Load” as condition:

Image 4

Then enter the following EL expression:

compositeData.fieldID

Select the “Style” tab and enter “help-block” into the “Class” field:

Image 5

What that will do is, if you added any validation to your field and an error message for when the validation fails, it will be displayed here. Now we just need to remove the “loaded” property and set the rendered property of the computed field for the help block text instead.

Select the computed field, click on the “All Properties” tab and locate the “loaded” property under the “basics” section. Click on the blue diamond beside the field and select “Use static value”, this will remove the Expression Language we’ve set before.

Now locate the “rendered” property under the “basics” section. Click on the blue diamond beside the rendered field and click on “Compute value…”. As language select “JavaScript (Sever Side)” and “Computed Dynamically” as the condition:

Image 6

Then enter the following JavaScript code:

//Declarations
    //String
    var sFieldID:String = compositeData.fieldID;
    var sHelpText:String = compositeData.helpBlockText;

    //Boolean
    var bIsValid:Boolean = true;

//Check if a Field ID was passed on and if so, if the field is valid
    if(sFieldID != '' && sFieldID != null){
        bIsValid = getComponent(sFieldID).isValid();
    }

//Check if Help Block Text should be displayed
    (sHelpText != '' && sHelpText != null) && bIsValid;

When the field fails the validation, the computed field for the help block text will be hidden, and the error message will be displayed instead.

Save and close the custom control.

Font Awesome Icon Custom Control:

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

Name: Type: Editor: Parameters: Default Value: Descripiton:
iconName (required) String -none- Enter the style class name for the icon you’d like to display. You can find the list of available icons on http://fortawesome.github.io/Font-Awesome/icons/
iconSize String ComboBox fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Select the size of the icon. Leave blank if you want to use the default size
iconFixedWidth boolean Boolean value false Use to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists and list groups.Default is false.
iconSpinning boolean Boolean value false Use to get any icon to rotate. Works well with fa-spinner, fa-refresh, and fa-cog.Default is false

 

Now, drag-and-drop a “Computed Field” onto the the custom control. Select it and give it a name (I named mine idTxtFAIcon). Open the “All Properties” tab and make sure “escape” under the section “basics” is set to “true”. Under the same section, locate the property “tagName” type in “i”. That will cause the computed field to be rendered as an i-tag when opened in the browser. Your properties should now look like this:

Image 1

Scroll further down to the section “styling” and click on the blue diamond beside the field “styleClass”. In the script editor prompt, make sure the language selected is “JavaScript (Server Side)” and “Condition” is set to “Compute on Page Load”:

Image 2

Then enter the following JavaScript code:

//Declarations
    //String
    var sIconClass:String = 'fa';

//Step 1: Add the icon class
    sIconClass += ' ' + compositeData.iconName;

//Step 2: Check if size was selected. If so, add size class
    if(compositeData.iconSize != '' && compositeData.iconSize != null){
        sIconClass += ' ' + compositeData.iconSize;
    }

//Step 3: Check if spinning was selected. If so, add fa-spin
    if(compositeData.iconSpinning){
        sIconClass += ' fa-spin';
    }

//Step 4: Check if iconFixedWidth was selected. If so, add fa-fw
    if(compositeData.iconFixedWidth){
        sIconClass += ' fa-fw';
    }

    return sIconClass

The code will apply the different style classes, based on the selections you make when using the custom control. Save and close your custom control.

Enjoy!

Advertisements

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

  1. Csaba Kiss November 29, 2014 at 6:56 pm

    When I insert this custom control into my xpage, it is not rendered at all in the Design window, even though I entered the Design Definition. What am I doing wrong?

    • Daniel Friedrich November 30, 2014 at 3:04 am

      Hello Csaba,

      good catch! Yes, that is correct. When I initially created the reusable custom control, I thought I can use the design definition to display the selected icon. However, that doesn’t work, so, I removed it in my custom control.

      I will amend the blog entry. I hope everything else is working for you though.

      Have a nice evening!

  2. Csaba Kiss November 30, 2014 at 3:11 am

    Oops. sorry, I cannot post code…

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: