0
I have a multi-relational field containing the 51 states (50 + DC) and I want to display them as checkboxes for user friendliness, since most will be non-BPM users in general. Unfortunately, so many rows means that it spans off a single page.

Does anyone have a relatively easy way to break this up into, say, 3 columns of 17? I'm not seeing a way to do this at the moment.

Accepted Answer

Monday, May 11 2015, 11:34 AM - #Permalink
1
Paul Thompson wrote:

This can be accomplished with (obviously) custom form, JavaScript and jQuery. Configure the MR to display as checkboxes. The following POC (which may not work on your version) can be a starting point. I suggest putting it into a JavaScript object ... not an HTML Javascript Widget.

Jeff Malin is the jQuery whiz around here... he can probably do the same thing in 3 lines ;-)




// Multi-Relational as Grid
// MSIE "feature" - the "console" object is only available when Developer Tools is active.
if ((typeof console == 'undefined') || (typeof console.log == 'undefined')) {
console = { log: function(){} };
}

// ----------------------------------------------------------------------------

// Build a string that contains an HTML TABLE element. We populate this with
// the checkboxes. This string is used to replace the contents of the SPAN
// element that contains the current list of checkboxes.
// Loop through all HTML checkbox INPUT elements associated with the specified
// Multi-Relational field. Each checkbox is associated with some text
// (the value displayed as per the aux table's Value Display Format setting)
// and several other HTML elements.

AddLoadCallback( function() {
var str_FldId = LookupFieldId('US_STATES') ,
str_ChkBoxGrid = LookupFieldId('table_MultiRelAsGrid') ,
n_Row=0 , n_Col=0 ,
n_ChkBoxes_PerRow = 3 ,
str_tableHtml = '';

// Initialize the table with the Multi-Relational's first INPUT element
// plus the beginning tag for the table we're going to build.
str_tableHtml = jQuerySBM( '#' + str_FldId + '\\.wrapper input[type=Hidden]')[0].outerHTML + '<table id="table_MultiRelAsGrid" border="1">\r\n' ;


// "???" is the Multi-Relational fld ts_id.
// Find the SPAN element with ID="F???.wrapper", it contains all the
// checkbox INPUT elements. Iterate each INPUT element with ID="SELECT_F???".

jQuerySBM( '#' + str_FldId + '\\.wrapper input#SELECT_' + str_FldId).each( function(idx,ele) {

// "this" (and "ele") refer to the current checkbox INPUT element.
console.log(this.tagName + ';idx=' + idx + '==' + this.nextSibling.textContent);

// Fill table by columns.
if (n_Col === 0) {str_tableHtml += '<tr>' ;}


// Get the HTML elements associated with the current checkbox INPUT
// element. This should find a SCRIPT, A and BR elements.

str_tableHtml += '<td>';

// outerHTML is the INPUT element. nextSibling is the state name text.
str_tableHtml += this.outerHTML + this.nextSibling.textContent ;
jQuerySBM( this ).nextUntil('input').each( function(idx,ele) {
console.log(' ' + this.tagName + ';idx=' + idx );
// NOTE: To filter out the clickable link to the aux table, only append
// if this.tabName isn't "A"
if (this.tagName.toUpperCase() !== 'A') {
str_tableHtml += this.outerHTML + '\r\n' ;
}
});
str_tableHtml += '</td>' ;
n_Col = (n_Col+1) % n_ChkBoxes_PerRow;
if (n_Col === 0) {
str_tableHtml += '</tr>\r\n' ;
n_Row += 1 ;
}

});

if (n_Col !== 0) {
str_tableHtml += '</tr>\r\n' ;
n_Row += 1 ;
}

jQuerySBM( '#' + str_FldId + '\\.wrapper')[0].innerHTML = str_tableHtml + '</table>' ;

});

The reply is currently minimized Show
Responses (7)
  • Accepted Answer

    Monday, May 11 2015, 11:29 AM - #Permalink
    0
    This can be accomplished with (obviously) custom form, JavaScript and jQuery. Configure the MR to display as checkboxes. The following POC (which may not work on your version) can be a starting point. Jeff Malin is the jQuery whiz around here...




    // Multi-Relational as Grid
    // MSIE "feature" - the "console" object is only available when Developer Tools is active.
    if ((typeof console == 'undefined') || (typeof console.log == 'undefined')) {
    console = { log: function(){} };
    }

    // ----------------------------------------------------------------------------

    // Build a string that contains an HTML TABLE element. We populate this with
    // the checkboxes. This string is used to replace the contents of the SPAN
    // element that contains the current list of checkboxes.
    // Loop through all HTML checkbox INPUT elements associated with the specified
    // Multi-Relational field. Each checkbox is associated with some text
    // (the value displayed as per the aux table's Value Display Format setting)
    // and several other HTML elements.

    AddLoadCallback( function() {
    var str_FldId = LookupFieldId('US_STATES') ,
    str_ChkBoxGrid = LookupFieldId('table_MultiRelAsGrid') ,
    n_Row=0 , n_Col=0 ,
    n_ChkBoxes_PerRow = 3 ,
    str_tableHtml = '';

    // Initialize the table with the Multi-Relational's first INPUT element
    // plus the beginning tag for the table we're going to build.
    str_tableHtml = jQuerySBM( '#' + str_FldId + '\\.wrapper input[type=Hidden]')[0].outerHTML + '<table id="table_MultiRelAsGrid" border="1">\r\n' ;


    // "???" is the Multi-Relational fld ts_id.
    // Find the SPAN element with ID="F???.wrapper", it contains all the
    // checkbox INPUT elements. Iterate each INPUT element with ID="SELECT_F???".

    jQuerySBM( '#' + str_FldId + '\\.wrapper input#SELECT_' + str_FldId).each( function(idx,ele) {

    // "this" (and "ele") refer to the current checkbox INPUT element.
    console.log(this.tagName + ';idx=' + idx + '==' + this.nextSibling.textContent);

    // Fill table by columns.
    if (n_Col === 0) {str_tableHtml += '<tr>' ;}


    // Get the HTML elements associated with the current checkbox INPUT
    // element. This should find a SCRIPT, A and BR elements.

    str_tableHtml += '<td>';

    // outerHTML is the INPUT element. nextSibling is the state name text.
    str_tableHtml += this.outerHTML + this.nextSibling.textContent ;
    jQuerySBM( this ).nextUntil('input').each( function(idx,ele) {
    console.log(' ' + this.tagName + ';idx=' + idx );
    // NOTE: To filter out the clickable link to the aux table, only append
    // if this.tabName isn't "A"
    if (this.tagName.toUpperCase() !== 'A') {
    str_tableHtml += this.outerHTML + '\r\n' ;
    }
    });
    str_tableHtml += '</td>' ;
    n_Col = (n_Col+1) % n_ChkBoxes_PerRow;
    if (n_Col === 0) {
    str_tableHtml += '</tr>\r\n' ;
    n_Row += 1 ;
    }

    });

    if (n_Col !== 0) {
    str_tableHtml += '</tr>\r\n' ;
    n_Row += 1 ;
    }

    jQuerySBM( '#' + str_FldId + '\\.wrapper')[0].innerHTML = str_tableHtml + '</table>' ;

    });

    The reply is currently minimized Show
  • Accepted Answer

    Monday, May 11 2015, 11:38 AM - #Permalink
    0
    Paul Thompson wrote:

    Paul Thompson wrote:

    blahblah




    I cannot figure out how to edit or delete an existing post.
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, May 13 2015, 01:21 PM - #Permalink
    0
    I can't quite get this to work. The field seems to line up properly in three columns, but every choice reads as 'Undefined', even though clicking certain ones fires the appropriate change events, as if I had clicked 'Delaware' or whatever. I'll keep poking at it, unless you have an idea.
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, May 13 2015, 10:52 PM - #Permalink
    0
    If table has the right number of cells (1 per state), then the loop is processing properly.

    Just to verify, this is a multi-relational field, displayed as checkboxes

    The script has a couple "console.log" lines that send diagnostic info to the browser's JavaScript console. If you open browser's JavaScript console/debug tool you will see what the script is reading. If you're not comfortable doing Javascript debugging, you can replace "console.log" with "alert", but you will have to click OK to each message.


    I tested using Chrome.
    The reply is currently minimized Show
  • Accepted Answer

    Thursday, May 28 2015, 11:55 AM - #Permalink
    0
    -sigh- Yes, this works. I must've screwed up the implementation of it, because I sent the code to my colleague who copy/pasted it, added the widget, and it worked fine. So I'm looking at trade schools now that I can't copy/paste code correctly.

    Thanks for the code - definitely appreciated.
    The reply is currently minimized Show
  • Accepted Answer

    Saturday, May 30 2015, 08:33 AM - #Permalink
    0
    Chris Vaughn wrote:

    {snipsnip} So I'm looking at trade schools now that I can't copy/paste code correctly ...
    :D

    I know the feeling. Glassblowing for me, or maybe TIG welding.
    The reply is currently minimized Show
  • Accepted Answer

    Monday, August 20 2018, 04:43 AM - #Permalink
    -1
    thanks for this post. Actually I was looking for the same issues as my site is in development which is about discounted rates for school shopping and more. The site is like this back to school discount codes through which students can obtain different discounts on school supplies
    The reply is currently minimized Show
Your Reply

Recent Tweets