XPages and Me

My Journey into XPages Development

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

Today, I will enhance the FA Icon custom control from one of my previous posts

Enhance the existing FA Icon Custom Control:

“So, how are you going to enhance the custom control?” , you ask. “It already is perfection.”, you say. Well, thank you for the compliment but there is almost always room for improvement. So, I am going to add additional “Property Definitions” that will allow you to add Bootstrap helper classes to your icon. Sounds intriguing, doesn’t it?

Open the custom control for the FA icon and open the “Property Definition” tab. Add a new property and name it “helperClassAlignment” then change the settings as follows:

Name: helperClassAlignment
Type: string
Editor: ComboBox
Parameters: none
pull-left
pull-right
center-block
Default Value: none
Description: Select a helper class to pull the icon to the left or right or to center it. Please see ‘http://getbootstrap.com/css/#helper-classes’ for more information.

Default: none

Add another “Property Definition”, name it “helpClassColor” and change the settings as follows:

Name: helperClassColor
Type: string
Editor: ComboBox
Parameters: none
text-muted
text-primary
text-success
text-info
text-warning
text-danger
Default Value: none
Description: Select a helper text class to add color to your iconPlease see ‘http://getbootstrap.com/css/#helper-classes’ for more information.Default: none

Next, we need to change the SSJS code that calculates the styles for the icon. Select the computed field, open the “Style” tab, click on the blue diamond beside “Class” and select “Compute value…”:

Image 1

In the script editor prompt, replace this 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

…with this 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';
    }

//Step 5: Check if helper classes have been selected
    //Step 5.1: Alignment
    if(compositeData.helperClassAlignment != 'none'){
        sIconClass += ' ' + compositeData.helperClassAlignment;
    }
    
    //Step 5.2: Color
    if(compositeData.helperClassColor != 'none'){
        sIconClass += ' ' + compositeData.helperClassColor;
    }
    
    return sIconClass

Close the script editor prompt and save-and-close the custom control.

So, what does that actually do? You can use the alignment helper classes to position your icon where ever you need it (left, right or centered).

The color helper classes allow you to apply the Bootstrap state colors to the icon. So, for instance, you can color the icons either red, green, blue etc.

And that’s it, enjoy.

Advertisements

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

  1. Csaba Kiss November 30, 2014 at 3:28 am

    Just observations:
    1. When you copy/pasted your javascript code line 10 got screwed up (&).

    2. I use this line for the icon name
    sIconClass += ‘ fa-‘ + compositeData.iconName;

    since all icon names begin with fa-

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

      Good catch again, thank you for letting me know.

      I had added the “read more” tag to my posts a few weeks back. While doing that, I used the new wordpress editor and it messed up everything within the code-tags.

      Seems I didn’t catch everything. I will take another look at my posts and correct them where needed.

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: