XPages and Me

My Journey into XPages Development

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

After using the Column Custom Control from my original post in many different applications for a while, all the sudden I ran into an issue. I had created a new application with a search panel atop a view panel and was using the column custom control in it for the search fields. Whenever I tried to preview the XPage in the browser, I would get an error message for the following line of code, that calculates the style classes for the column div:

Image 1

Really weird, especially since the previous 4 rows of code seemed to work fine, doing exactly what the one line of code was doing.

Anyway, to fix it, I had to do the following:

Instead of adding 1 – 12 to the combo boxes for the following property definitions, I had to add 0 – 12 and set the default value on all of them to 0:

Image 2

Next, I had to modify the SSJS code that calculates the style classes for the column div as follows:

//Declarations
    //String
    var sXSWidth:String = compositeData.columnWidth.mobileDevice;
    var sSMWidth:String = compositeData.columnWidth.tabletDevice;
    var sMDWidth:String = compositeData.columnWidth.desktopDevice;
    var sLGWidth:String = compositeData.columnWidth.desktopDeviceLarge;
    
    var sXSOffset:String = compositeData.columnOffset.mobileDevice;
    var sSMOffset:String = compositeData.columnOffset.tabletDevice;
    var sMDOffset:String = compositeData.columnOffset.desktopDevice;
    var sLGOffset:String = compositeData.columnOffset.desktopDeviceLarge;
    
    var sStyleClass:String = '';
    
//Determine style of the column
    //Extra small columns, for mobile devices
    if(sXSWidth != '0'){
        sStyleClass += ' col-xs-' + sXSWidth;
    }
    
    if(sXSOffset != '0'){
        sStyleClass += ' col-xs-offset-' + sXSOffset;
    }
    
    //Small columns, for tablets
    if(sSMWidth != '0'){
        sStyleClass += ' col-sm-' + sSMWidth;
    }
    
    if(sSMOffset != '0'){
        sStyleClass += ' col-sm-offset-' + sSMOffset;
    }
    
    //Medium columns, for desktops
    if(sMDWidth != '0'){
        sStyleClass += ' col-md-' + sMDWidth;
    }
    
    if(sMDOffset != '0'){
        sStyleClass += ' col-md-offset-' + sMDOffset;
    }
    
    //Large columns, for extra large desktops
    if(sLGWidth != '0'){
        sStyleClass += ' col-lg-' + sLGWidth;
    }
    
    if(sLGOffset != '0'){
        sStyleClass += ' col-lg-offset-' + sLGOffset;
    }
    
    return sStyleClass.trim()

Obviously, I had to change any custom control where I used this custom control and select 0 for the properties, where I didn’t define the column width or offset.

Let me know if you have any questions.

Advertisements

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

  1. ursus September 25, 2014 at 11:27 am

    Hi Daniel

    I was wondering if you know when you will be doing part 6-4 – Using the custom controls?

    Thanx and keep up the good work :o)
    Ursus

  2. Daniel Friedrich September 25, 2014 at 12:54 pm

    Hello Ursus,

    David Leedy said he was going to publish it as part of his 2014 Hackathon, so, it should be out there pretty soon.

    And thank you for the praise and reading my blog :o)

  3. Pingback: Dabbling in Bootstrap and Font Awesome Part 6-1: (re)Use Me! | XPages and Me

  4. Don Mottolo March 10, 2015 at 2:40 pm

    Sorry, I just came across your blog. Are you using the Bootstrap4XPages from OpenNtf with this? If not, what do you see as the advantages/disadvantages of using that or incorporating Bootstrap manually? Thanks

    • Daniel Friedrich March 10, 2015 at 3:34 pm

      Good morning Don,

      glad you stumbled upon my blog :o)

      No, I am not using Bootstrap4XPages. The main reason being, that I can implement new versions of Bootstrap and Font Awesome quicker and I don’t have to rely on our Domino Admins’ schedule to have new versions of Bootstrap4XPages installed on the various production servers we have.

      As I am using a central resource database, all we have to do is to update the database on the main hub server and it gets replicated automatically to all other servers.

      Additionally, I can quickly create reusable Custom Controls for any new Bootstrap component that might be released.

      I guess it really depends on your preferences.

      I hope this answers your question.

      Thank you and have a nice day

      • Don Mottolo March 10, 2015 at 4:55 pm

        Daniel, Thanks for the fast reply. Any recommendations where to start to follow your approach – the “dabbling” vs. “diving” posts?

      • Daniel Friedrich March 10, 2015 at 5:02 pm

        You are very welcome.

        The “dabbling” posts are the best way to start, as I use that series to set up my themes and reusable Custom Controls.

        The “diving” posts are things that I came across actually using the stuff from the “dabbling” series and that are based on actual use cases.

        Let me know if you have any questions / concerns / issues and I’d be glad to help you out.

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: